Passer un niveau

@Artemis Merci pour ta réponse et ton avis

J'ai juste une question, qu'entends-tu par " tu codes parfois à même les templates" ?

Pour ce qui est de sortir les éléments du flux, je ne savais même pas que c'était quelque chose à éviter avant d'arriver ici, j'ai bien fait de m'inscrire, j'ai déjà appris plein de choses grâce à vous

Hello !
Alors, j'ai cette impression en lisant tes codes, comme si tu codais directement dans le template, en y ajoutant tes balises, et tu n'oses pas tout retirer pour repartir sur des bases saines, disons, tes bases à toi ! C'est tout à fait possible de faire ça, si tant est que tu sois à l'aise avec les variables des templates et les significations des boucles. Pour avoir plus de latitude quand tu codes, tu peux coder ta maquette complètement à part, et puis ensuite y ajouter les variables et boucles correspondantes, et ainsi, tu ne seras plus bridée par le codage "de base" de forumactif !
Après, peut-être que tu procèdes ainsi, mais j'ai eu cette impression, ceci dit je suis pas encore très à l'aise pour analyser en profondeur les codes d'autrui 8D

Je suis ravie que le forum t'aide à t'améliorer, en tout cas ! N'hésite pas à utiliser les sections "exercices" et "avis sur un code" à l'avenir, certains de nos codeurs pourront te donner des conseils plus ciblés

C'est effectivement comme ça que je code pour l'instant, j'avais un peu peur de supprimer des trucs utiles donc je n'avais touché qu'aux parties qui m'intéressait
merci pour tes explications

Bonjour bonjour, je viens demander un passage de niveau ^^ je pense avoir un peu progressé depuis la dernière fois :)

Niveau désiré: avancé +
Les notions de ce niveau:
- Comprendre comment s'organise un template de FA
- Maîtriser le template de FA codant les Catégories (index_box)
- Maîtriser la partie du template de FA codant pour le QEEL (index_body)
- Maîtriser la partie du template de FA codant pour l'affichage des sujets (viewtopic_body)
Les exercices recommandés: Modifier ces templates
Liens/code de 3 exercices:
Catégories :
CSS

Code:


/***********************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,700&display=swap');
.titre_categorie{
  width: 800px;
  height: 45px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615044731575402.png');
  padding-top: 50px;
  margin-top: 25px;
}

.tiret_cat{
  width: 350px;
  height: 1px;
  background: white;
  display: inline-block;
  margin-left: 25px;
}

.texte_titre_cat, .texte_titre_cat h2, .texte_titre_cat h1{
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: white;
  display: inline-block;
  position: absolute;
  width: auto;
  margin-left: 15px;
  margin-top: -8px;
  width: 300px;
}

.conteneur_categorie{
  height: 145px;
  width: 798px;
  background: #F5F5F5;
  border: 1px solid #D3D2D2;
  margin-top: 5px;
  font-family: 'Calibri';
}

.last_message_conteneur{
  width: 170px;
  height: 110px;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  vertical-align: top;
  font-size: 12px;
}

.nom_last_message{
  width: 158px;
  height: 78px;
  padding-left: 10px;
  padding-top: 3px;
  color: #4F5886;
  font-family: 'Merriweather', serif;
  margin-bottom: 3.5px;
  font-size: 12px;
  background: #F5F5F5;
  border: 1px solid #D3D2D2;
}

.nom_last_message a{
  color: #4F5886 !important;
  text-decoration: none !important;
  font-size: 12px;
}

.image_oldnew img{
  width: 170px;
  height: 25px;  
}

.conteneur_description_stats{
  width: 295px;
  height: 110px;
  display: inline-block;
  margin-left: 16px;
  vertical-align: top;
  margin-top: 5px;
}

.description_cat{
  height: 75px;
  width: 295px;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #7187C1;
  color: #666666;
  overflow: auto;
}

.stats_categorie{
  font-size: 12px;
  text-align: right;
  margin-top: 9px;
  width: 295px;
  height: 15px;
  color: #515A8A;
}

.image_de_fond{
  background: white;
  width: 260px;
  height: 90px;
  border: 10px solid #585F96;
  display: inline-block;
  margin-top: 5px;
  margin-left: 17px;
  position: absolute;
}

.image_de_fond:hover{
  -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */
  filter: grayscale(100%); /* Firefox */
}

.titre_forum{
  background: #F5F5F5;
  text-align: center;
  position: absolute;
  color: #4D5684;
  width: 100%;
  font-size: 18px;
  font-family: 'Merriweather', serif;
  top: 0;
  left: 0;
}

.titre_forum a{
  color: #4D5684 !important;
  text-decoration: none !important;
  font-size: 18px;
  font-family: 'Merriweather', serif;
}

.sous_forums_cat{
  font-size: 12px;
  height: 17px;
  width: 783px;
  margin-top: 4px;
  padding-top: 3px;
  padding-left: 15px;
  border-top: 1px solid #D3D2D2;
  color: #575E95;
}

.sous_forums_cat a{
  color: #575E95 !important;
  text-decoration: none !important;
}


HTML

Code:


<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="titre_categorie"><div class="tiret_cat"></div><div class="texte_titre_cat">{catrow.tablehead.L_FORUM}</div></div>
   <!-- END tablehead -->
  
   <!-- BEGIN forumrow -->
  
<div class="conteneur_categorie">
  <div class="last_message_conteneur">
    <div class="nom_last_message">
      {catrow.forumrow.LAST_POST}
    </div>
    <div class="image_oldnew">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="imgnewnownew" />
    </div>
  </div>
  <div class="conteneur_description_stats">
    <div class="description_cat">
      {catrow.forumrow.FORUM_DESC}
    </div>
    <div class="stats_categorie">
      {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
    </div>
  </div>
  <div class="image_de_fond">
    <img src="https://nsa40.casimages.com/img/2021/06/21/210621062617877381.png" />  
    <div class="titre_forum">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
  </div>
  <div class="sous_forums_cat">
    <span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
      <script type="text/javascript">
        jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,', ')).removeAttr('id');
      </script>
  </div>
</div>
    <!-- END forumrow -->
   <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->


QEEL

CSS

Code:



/**********************************/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,700&display=swap');
#next_part_qeel{
  width: 800px;
  height: 270px;
  margin-bottom: 10px;
}

#titre_qeel{
  width: 800px;
  height: 45px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615044731575402.png');
  padding-top: 50px;
}

#tiret_qeel{
  width: 580px;
  height: 1px;
  background: white;
  display: inline-block;
  margin-left: 25px;
}

#texte_titre_qeel{
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: white;
  display: inline-block;
  position: absolute;
  margin-left: 15px;
  margin-top: -15px;
}

#newbie_qeel{
  width: 748px;
  height: 133px;
  margin-top: 20px;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid #D3D2D2;
}

#img_newbie{
  border: 10px solid #5D639E;
  width: 200px;
  height: 90px;
  display: inline-block;
  margin-right: 30px;
}

#img_newbie img{
  width: 200px;
  height: 90px;
}

#avatar_dernier_membre img, #avatar_dernier_membre{
  width: 200px;
  height: 90px;
}  

#avatar_dernier_membre img {
    width: 200px;
    height: 90px;
    object-fit: cover;
}

#new_arrivant{
  display: inline-block;
  width: 493px;
  height: 110px;
  vertical-align: top;
}

#bienvenue_qeel{
  width: 495px;
  height: 40px;
  border-bottom: 1px solid #7187C1;
  margin-bottom: 10px;
  letter-spacing: 12px;
  font-size: 22px;
  font-family: 'Merriweather', serif;
  font-weight: bold;
  text-align: center;
  color: #7187C1;
  padding-top: 15px;
}

#pseudo_new_qeel{
  width: 460px;
  height: 25px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615044731575402.png');
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 5px;
}

#pseudo_new_qeel a{
  font-size: 16px !important;
  font-family: 'Merriweather', serif !important;
  text-decoration: none !important;
}

#conteneur_qeel{
  width: 800px;
  height: 280px;
  font-family: 'Calibri';
}

#nbr_membre_qeel{
  height: 40px;
  width: 390px;
  padding-top: 10px;
  background: #91A2CF;
  display: inline-block;
  font-size: 18px;
  font-family: 'Merriweather', serif;
  color: white;
  text-align: center;
}

#nbr_mess_qeel{
  height: 40px;
  width: 390px;
  padding-top: 10px;
  background: #506089;
  display: inline-block;
  margin-left: 15.5px;
  font-size: 18px;
  font-family: 'Merriweather', serif;
  color: white;
  text-align: center;
}

#second_conteneur_qeel{
  width: 798px;
  height: 205px;
  background: white;
  margin-top: 15px;
  border: 1px solid #D3D2D2;
  padding-top: 10px;
  padding-bottom: 10px;
}

#here_qeel{
  height: 155px;
  width: 350px;
  display: inline-block;
  margin-left: 5px;
  vertical-align:top;
  border-bottom: 15px solid #91A2CF;
}

#titre_here_qeel{
  height: 35apx;
  width: 350px;
  border-bottom: 2px solid #91A2CF;
  color: #5A609A;
  font-size: 22px;
  text-align: center;
  padding-top: 8px;
  font-family: 'Merriweather', serif;
  font-weight: bold;
}

#list_here_qeel{
  height: 80px;
  width: 330px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  font-size: 12px;
}

#clans_qeel{
  width: 285px;
  height: 170px;
  display: inline-block;
  margin-left: 4px;
  vertical-align:top;
}

#hours_qeel{
  height: 170px;
  width: 135px;
  border-left: 10px solid #91A2CF;
  display: inline-block;
  vertical-align:top;
}

#list_horus_qeel{
  width: 120px;
  height: 130px;
  margin-left: auto;
  text-align: justify;
  overflow: auto;
  font-size: 12px;
}

#list_horus_qeel a, #list_here_qeel a{
  text-decoration: none !important;
}

#titre_hours_qeel{
  height: 25px;
  width: 120px;
  background-image: url('https://nsa40.casimages.com/img/2021/06/15/210615102455573548.png');
  text-align: center;
  padding-top: 5px;
  margin-left: auto;
  margin-top: 10px;
  font-family: 'Merriweather', serif;
  color: white;
}

#birth_qeel{
  height: 23px;
  width: 799px;
  border-top: 1px solid #D3D2D2;
  text-align: center;
  margin-top: 13px;
  padding-top: 6px;
  font-family: 'Merriweather', serif;
  font-size: 12px;
  color: #D3D2D2;
}

.texte_birth_qeel{
  font-family: 'Merriweather', serif;
  font-size: 12px;
  color: #D3D2D2;  
}


HTML

Code:


<!-- BEGIN disable_viewonline -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&display=swap" rel="stylesheet">

<div id="next_part_qeel">
  <div id="titre_qeel">
    <div id="tiret_qeel"></div>
    <div id="texte_titre_qeel">les statistiques</div>
  </div>
  <div id="newbie_qeel">
    <div id="img_newbie"><span id="avatar_dernier_membre"></span></div>
    <div id="new_arrivant">
      <div id="bienvenue_qeel">bienvenue</div>
      <div id="pseudo_new_qeel"><span id="dernier_membre">{NEWEST_USER}</span></div>
    </div>
  </div>
</div>
  
<div id="conteneur_qeel">
  <div id="nbr_membre_qeel">{TOTAL_USERS}</div>
  <div id="nbr_mess_qeel">{TOTAL_POSTS}</div>
  <div id="second_conteneur_qeel">
    <div id="here_qeel">
      <div id="titre_here_qeel">Chatons en mouvement</div>
      <div id="list_here_qeel">{LOGGED_IN_USER_LIST}</div>      
    </div>
    <div id="clans_qeel">
       <div class="systeme_onglets">
 
  <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_terre">Territoire principalement souterrain, il est composé en extérieur d'une forêt légère et de grandes plaines rocheuses.
              <br />Leurs fourrures sont mi-longues, juste assez pour résister un peu au froid et ne pas s’écrouler sous la chaleur.</div>
            <div class="contenu_onglet" id="contenu_onglet_pluie">Larges terres humides et forestières parsemées de points d'eaux diverses, leur territoire empiète également sur une montagne.
              <br />Leurs poils, imperméables et mi-longs, leur offre une chaleur dès plus correct.</div>
            <div class="contenu_onglet" id="contenu_onglet_flammes">Étendues composées essentiellement de plaines sèches et de lieux rocheux, il y fait assez chaud.
              <br />Leurs fourrures sont assez courtes, mais raisonnablement.</div>
            <div class="contenu_onglet" id="contenu_onglet_nuages">Clan situé principalement dans une montagne, recouverte d'une forêt enneigée, encerclée de vastes landes tant herbeuses que rocheuses.
              <br />Leurs pelages sont assez épais afin de résister au froid de ces terres.</div>
            <div class="contenu_onglet" id="contenu_onglet_etoiles">Cinquième clan consistué de chats décédés. Celui-ci garde en son sein tous les félins ayant bravement servi leurs clans pendant des lunes et il leur accorde le repos éternel sans connaître la faim, la soif ou le froid. Ils peuvent communiquer avec les chats des clans lors de rêves.</div>
            <div class="contenu_onglet" id="contenu_onglet_solitaires">Il ne s'agit pas d'un clan, mais de chats solitaires, qui peuvent pour eux seuls et qui ne sont pas affectés à des clans. Ils vivent aux bordures des territoires et se débrouillent par eux mêmes.</div>
          </div>
         <div class="onglets">
            <div class="onglet_0 onglet" id="onglet_terre" onclick="javascript:change_onglet('terre');">clan de la terre</div>
            <div class="onglet_0 onglet" id="onglet_pluie" onclick="javascript:change_onglet('pluie');">clan de la pluie</div>
            <div class="onglet_0 onglet" id="onglet_flammes" onclick="javascript:change_onglet('flammes');">clan des flammes</div>
            <div class="onglet_0 onglet" id="onglet_nuages" onclick="javascript:change_onglet('nuages');">clan des nuages</div>
            <div class="onglet_0 onglet" id="onglet_etoiles" onclick="javascript:change_onglet('etoiles');">clan des étoiles</div>
            <div class="onglet_0 onglet" id="onglet_solitaires" onclick="javascript:change_onglet('solitaires');">solitaires
              </div>
  </div>
        </div>  
    </div>
    <div id="hours_qeel">
      <div id="list_horus_qeel"><table>{L_CONNECTED_MEMBERS}</table></div>
      <div id="titre_hours_qeel">ils sont passés</div>
    </div>
    <div id="birth_qeel">
      <table align="center" class="texte_birth_qeel" style="text-align: center; font-family: 'Merriweather', serif; font-size: 12px; color: #D3D2D2;">{L_WHOSBIRTHDAY_TODAY}</table>
    </div>
  </div>
</div>

<script>
  //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
//<!--
                var anc_onglet = 'terre';
                change_onglet(anc_onglet);
        //-->
</script>

<script type="text/javascript">
      document.getElementById('nbr_membre_qeel').innerHTML= document.getElementById('nbr_membre_qeel').innerHTML.replace(/Nous avons/,"");
      document.getElementById('nbr_membre_qeel').innerHTML= document.getElementById('nbr_membre_qeel').innerHTML.replace(/membres enregistrés/,"chats");
      document.getElementById('nbr_mess_qeel').innerHTML= document.getElementById('nbr_mess_qeel').innerHTML.replace(/Nos membres ont posté un total de/,"");
      document.getElementById('nbr_mess_qeel').innerHTML= document.getElementById('nbr_mess_qeel').innerHTML.replace(/messages/,"miaulements");
      document.getElementById('newbie').innerHTML= document.getElementById('newbie').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
    
      document.getElementById('list_here_qeel').innerHTML= document.getElementById('list_here_qeel').innerHTML.replace(/Utilisateurs enregistrés :/,"");
      </script>

<script type="text/javascript">
      document.getElementById('list_horus_qeel').innerHTML= document.getElementById('list_horus_qeel').innerHTML.replace(/Membres connectés au cours des 99 dernières heures :/,"");
      document.getElementById('birth_qeel').innerHTML= document.getElementById('birth_qeel').innerHTML.replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun chat ne fête son anniversaire aujourd'hui");
      document.getElementById('pseudo_new_qeel').innerHTML= document.getElementById('pseudo_new_qeel').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
      document.getElementById('birth_qeel').innerHTML= document.getElementById('birth_qeel').innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui :/,"Joyeux anniversaire à : ");
      document.getElementById('birth_qeel').innerHTML= document.getElementById('birth_qeel').innerHTML.replace(/Membres fêtant leur anniversaire dans les 7 prochains jours:/,"Quelques chats fêtent bientôt leur anniversaire, ne les oubliez pas : ");
    </script>
<!-- END disable_viewonline -->


Pour l'affichage de sujet, j'ai fait ceux sur ce forum : https://lescitadellesdegaia.forumactif.com/ (les catégories/PA/Footer/Widget/Nav sont aussi de moi) et pour le rendu des codes au dessus, ce sont ceux de ce forum : https://lgdcnocturnalterrors.forumsrpg.com/

Vos exercices répondent bien au niveau désiré ? Normalement oui ^^'

Merci d'avance !

Coucou @Gekigami o/
(désolée pour le temps de réponse ;;)

Au niveau de la syntaxe, il a quelques petites erreurs d'inattention, mais sinon je n'ai pas grand chose à redire ; côté html, tout est bien fermé, excepté une span et div dans le template viewtopic_body. Pour le CSS, je noterais juste qu'il ne faut pas oublier les polices génériques (et il y a aussi un piti letter-pacing: 2pt; qui traîne dans CSS profil, mais rien de grave).

Sur le papier, tu réponds aux critères requit pour avoir un niveau avancé ++;  tu es capable de comprendre les templates de FA, te repérer dedans, comprendre ce à quoi se réfère les boucles/variables, etc. Et j'ai noté quelques bouts de javascript qui me semblent tout à fait corrects et fonctionnels.

J'aurais tout de même attendu un peu plus de personnalisation pour le template viewtopic_body, en remplaçant les tableaux par quelque chose de plus moderne, comme le flex et grid, comme tu as pu le faire sur le template profile_view_body ainsi que les catégories de l'autre site. Pour que tout soit nickel chrome (je pinaille), il aurait aussi fallu mettre des largeurs (ou ne pas en mettre) là où il y en avait besoin pour que le code s'adapte en toutes circonstances. Sur mon forum test, il y a des gros décalages.

Enfin, concernant la partie javascript, j'aurais un peu plus de choses à dire. La syntaxe est très bien et le code fonctionne. Seulement je comprend pas trop pourquoi tu as recours au JS alors que tout est parfaitement faisable en utilisant les variables FA, du HTML et CSS?
Je parle par exemple de ton dernier code javascript du template viewtopic_body
Idem pour le template profile_view_body. Pourquoi écrire:

alors qu'il y a des variables dédiées:

Code:

<a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS}</a>
<a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
<a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a>

+ cette partie, qui aurait pu être réalisée avec du CSS:


En conclusion, je dirais que si on s'en réfère strictement aux critères de l'Epic'Guide, tu es niveau Avancé ++. Seulement, je ne peux que t'encourager à systématiquement plus optimiser tes codes, penser à l'adaptabilité, favoriser flex et grid aux tableaux et privilégier le HTML et le CSS avant le Javascript.

Bonjour @Sunhae, je te remercie pour ta réponse positive et pour le temps accordé à l'analyse de mon code. Tes remarques sont bien entendu prises en compte pour perfectionner mes futures créations
Pour le template viewtopic_body, je me suis effectivement contentée d'inverser les colonnes du tableau pour arriver au résultat souhaité plus rapidement. Tout refaire en flex/grid aurait sans doute été plus propre et m'aurait évité cette erreur d'optimisation que tu as bien fait de relever car étant un oubli de ma part, ayant gardé la structure initiale du template !
Pour ce qui est du template profile_view_body, je pense qu'il devait y avoir une raison quant à l'utilisation du JS sur ces variables, je vais revoir ça
Merci encore !

De rien Gekigami  

Hello @Izusa o/
Désolée du groooos retard, tout le staff est un peu occupé avec la rentrée

De ce que je peux constater, tes codes m'ont l'air tout à fait corrects. Il y a quelques coquilles dans le CSS (fautes de frappes, oubli des fonts par défaut) mais rien de grave. Juste une petite note: pour optimiser un peu ton CSS, tu peux raccourcir certaines propriétés, notamment padding et margin:
padding/margin: haut | droit | bas | gauche;

Par exemple avec padding, au lieu de:

Code:

padding-top: 5px;
padding-right: 10px;

tu peux écrire:

Code:

padding: 5px 10px 0 0;

Sur le papier tu rempli les critères pour avoir un niveau Avancé +, mais le problème c'est que si on prend en compte seulement les codes que tu as posté ici, ça ne rempli par les critères des niveaux d'avant. Un niveau Avancé + doit remplir les conditions pour être Intermédiaire ++ ("Savoir utiliser Flexbox ; Savoir utiliser les grilles CSS") et Avancé ("les sélecteurs"); et tu ne nous en donne aucun exemple ici. En général, ce que tu fais reste très convenu; par exemple, parfois tu aurais pu faire appel à des pseudo-élément comme ::before (e.g. la ligne blanche dans le titre des catégories du thème avec LGDC) et surtout utiliser d'autres propriétés pour disposer des éléments comme flex et grid, ce qui te permettrais de faire des affichages plus complexes. Et surtout, pour remplacer les tables que tu as pu utiliser sur le forum en lien, qui sont obsolètes.

Aussi, je n'ai pas pensé à le mentionner la dernière fois, mais essayez d'utiliser plus de balises sémantiques pour une meilleure accessibilité et lisibilité (j'avoue je les utilise peu aussi, mais je suis pas forcément un exemple)(faites ce que je dis pas ce que je fais, toussa koua)

Bref. Puisque tu as démontré que tu es capable de naviguer dans les templates et les modifier -à priori- sans problèmes, je pense faire un compromis et t'accorder un niveau Intermédiaire ++, mais je t'encourage du même coup à pousser un peu plus tes connaissances -notamment en CSS- ainsi qu'évidemment les mettre à profit pour remplir les conditions de tout les niveaux qui précède Avancé + (n'hésites pas à décortiquer des LS pour te donner des idées)

Niveau désiré: Avancé ++
Les notions de ce niveau:
► Pouvoir comprendre n'importe lequel des templates de FA car tu sais lire un templates, te repérer dedans, et via l'intuition des termes en anglais, comprendre ce à quoi se réfère les boucles/variables.
► toucher au JavaScript
Les exercices recommandés: ► Personnaliser un forum complet
Liens/code de 3 exercices: J'ai un lien de forum (qui est devenu un forum test). Je ne sais pas si c'est accepté mais je tente. Il est encore en construction (donc tout n'est pas encore refait) et je travaille sur un code JS que je n'arrive plus à dompter, oops. Mais le soucis est bientôt réglé.
J'ai également un fofo portfolio (un peu à l'abandon ces derniers temps j'avoue) où je n'ai pas tout changé parce que je ne voyais pas l'utilité.
Et enfin j'ai carrément un "site" ou du moins que les pages HTML avec le CSS actuellement et en local. Je n'ai pas les connaissances en PHP pour le moment mais ça ne serait tardé, j'ai mes livres cours qui m'attendent.
Le premier
Le forum portfolio

Vos exercices répondent bien au niveau désiré ? Euh peut être ?

Niveau désiré: Niveau débutant +
Les notions de ce niveau: Différencier le HTML du BBCode. Savoir comment s'écrit le HTML et le CSS et savoir à quoi ils servent. {ici}
Connaitre les principales balises HTML {ici}
Connaitre les différences entre les attributs id et class {ici}
Connaitre les différences existantes entre les balises span et div. {là}
Commencer à utiliser les propriétés et valeurs CSS les plus communes. {ceci}, {ici} et {là}.
Les exercices recommandés: coder une fiche de RP / une signature / une fiche de présentation simple de A à Z
Liens/code de 3 exercices: Je suis désolé, je ne comprends pas ce que je dois ajouter ici
Vos exercices répondent bien au niveau désiré ? Je veux apprendre à coder. J'ai très peu de connaissances à ce sujet (j'ai travaillé avec CSS et HTML mais je les ai simplement édités et parcourus)

Hello ! Je me permets une petite réponse :)

Dans "liens/code de 3 exercices" il s'agirait de 3 codes que tu aurais fait pour justifier de ton niveau ^^ Par exemple les exercices recommandés pour ton niveau serait de faire une fiche de RP, une signature et une présentation simple de A à Z. Si tu ne sais pas ce que c'est, tu peux trouver des exemples en libre service juste ici (attention, tu devras faire tes propres codes, avec ton propre visuel ^^)
Fiche de RP : https://www.epicode-entraide.com/t17427-oo-index-fiches-rp
Signature : https://www.epicode-entraide.com/t12101-oo-index-signatures
Présentation Simple : https://www.epicode-entraide.com/t12103-index-des-fiches-de-presentation

Pour le "vos exercices répondent bien au niveau désiré" c'est une auto-évaluation pour savoir si les notions de niveau te paraissent acquises avec les 3 codes que tu as fournis dans "liens/code de 3 exercices" ^^

Pour apprendre le HTML et le CSS, je te recommande la section tutoriel qui offre un large panel d'apprentissage :)
Tu as notamment la partie "Bases du codage" qui te permet de partir de 0 et d'apprendre à ton rythme :) (juste ici : https://www.epicode-entraide.com/t17435-oo-index-tutoriels ) Avec juste ici une introduction au codage : https://www.epicode-entraide.com/t9448-explication-introduction-au-codage

Amuses toi bien ! :)

Hello,

Pour le moment, l'Epic Guide est en cours de refonte, donc on n'accorde plus vraiment de niveaux dernièrement ^^ Ce qui ne t'empêche pas de t'entrainer en t'aidant des exercices existants, considérant que beaucoup d'entre eux ont été édités pour rajouter les compétences qu'ils permettent d'entrainer.