Epicode

Vous voulez apprendre à coder pour Forumactif ? Vous ne savez pas par quel bout commencer, et les cours disponibles sur internet sont beaucoup trop orientés site web pour vous parler ? Pour vous aider, on vous propose un guide des étapes à franchir pour progresser dans les méandres nébuleux du codage orienté Forumactif.

Pour éviter de vous perdre dans les détails spécifiques au développement web en général, l'Epic'Guide se concentre sur l'ordre "logique" d'approche du codage sur Forumactif, et les notions nécessaires à avoir pour s'en sortir. Inutile d'aller lire un tutoriel complet sur le combinateur de voisins directs — qué ? — quand vous en êtes encore à essayer de différencier un élément div d'un span.

Vous trouverez plus bas dans ce sujet le détail des différents niveaux et des compétences que nous estimons nécessaires à acquérir à chaque étape. Le guide vous proposera également des pistes d'entrainement pour mettre ces compétences en pratique. Vous n'allez quand même pas coder un template complet quand l'objectif est juste de réussir à dompter les mystères de flexbox, tout de même.

La pratique est l'élément clef de votre apprentissage. Après une lecture studieuse de un ou plusieurs tutoriels, il vous faudra encore digérer les nouvelles informations et vous assurer que vous avez bien compris les notions que vous étudiez.

Une méthode est d'essayer d'expliquer ces notions à votre entourage. " Ce que l'on conçoit bien s'énonce clairement, et les mots pour le dire arrivent aisément ", disait un certain Nicolas Boileau. En d'autres termes, si vous ne parvenez pas à utiliser vos propres mots pour expliquer cette notion, c'est qu'elle n'est pas encore tout à fait claire pour vous.

Alternativement, vous pouvez mettre cette nouvelle connaissance en pratique, en vous essayant à des exercices ou à des projets personnels. Dégainez donc un éditeur de code tel que VSCode, ou bien un éditeur de code en ligne tel que Codepen ou JSBin et foncez !

Une fois vos expériences faites, vous pourrez demander des retours via le forum des Avis sur vos codes, et si vous tombez sur un os particulièrement corriace, le forum des problèmes avec un code est toujours là pour venir poser vos questions. Il n'y a pas de questions stupides, on est tous passés par là.

Parce qu'on espère que vous allez gravir les échelons en apprendre davantage chaque jour, on s'est dit qu'ajouter vos niveaux dans les profils pourrait être motivant. Par conséquent, une fois que vous pensez maîtriser un niveau de l'Epic'Guide, vous pouvez demander à être évalué, en allant consulter le sujet de validation des niveaux de l'Epic'Guide. Idéalement, ayez quelques créations sous le coude à nous montrer pour pouvoir nous épater, et admirer vos propres progrès.

C'est le niveau débutant ! Lorsque vous progresserez au fil de vos apprentissages, vous franchirez probablement quelques étapes clés qui vous permettront d'aller plus loin dans vos personnalisations de Forumactif. Pour vous guider dans ce long périple, nous avons essayé de lister les compétences à acquérir petit à petit jusqu'à pouvoir vous envoler vers l'infini et l'au delà.

Cette liste n'est bien sûr pas exhaustive, et a été pensée avec le codage Forumactif en tête. Pour le reste, la suite est entre vos mains !

• Niveau Débutant +


• Niveau Débutant ++


• Niveau Intermédiaire


• Niveau Intermédiaire +


• Niveau Intermédiaire ++


• Niveau Avancé


• Niveau Avancé +


• Niveau Avancé ++

Objectifs : Acquérir les premières bases du codage nécessaires pour au moins comprendre ce qui se passe quand on lit un LS ou un tutoriel. Vous n'en êtes pas encore au stade de l'écriture d'un code de A à Z, mais vous saurez potentiellement personnaliser quelques détails d'un code simple.

Notions :

• Comprendre ce qu'est le HTML et acquérir le vocabulaire et les notions de base : écriture des balises sans les croiser, le cas des balises obsolètes, les commentaires HTML


• Connaître les balises <div> et <span> et leurs différences


• Connaître les balises strong, b, em, i, br, img, a


• Connaître l'attribut style pour mettre du CSS dans le HTML


• Comprendre ce qu'est le CSS et acquérir le vocabulaire et les notions de base (déclaration CSS, propriété et valeur, les commentaires CSS)


• Connaître les principales propriétés et valeurs CSS (color, font-family, font-size, border, background-color, width, height...)

S'exercer :

• Personnaliser soi-même des LS simples (changer les couleurs, images, texte, etc)

Objectifs : Consolider les bases CSS & HTML, suffisamment pour faire des codes simples soi-même pour personnaliser un message RP par exemple.

Notions :

• Connaître les principales balises HTML et les attributs les plus fréquents (href, src, style, alt, class...)


• Connaître les principales propriétés CSS (et savoir la différence entre margin et padding)


• Comprendre le concept d'élément "inline" et d'élément "block"


• Savoir séparer CSS du HTML, faire la différence entre les attributs style, id et class


• Connaître les limites et possibilités de la personnalisation d'un message sur Forumactif (les sauts de ligne)


• Savoir où se rendre dans le panneau d'administration de ForumActif pour suivre les instructions d'un LS


• Savoir où chercher des informations quand on ne connait pas une balise ou une propriété (le MDN, entre autres)

S'exercer :

• Coder à partir de zéro une fiche RP simple sans effets particuliers


• Réussir à installer (et personnaliser ?) un LS complexe qui nécessite de passer par le panneau d'administration

Objectifs : Connaitre les méthodes de positionnement et d'agencement des informations, et savoir dans quel contexte les utiliser.

Notions :

• Connaitre la notion de flux


• Connaitre les utilisations basiques de la propriété display (block, inline, none, inline-block)


• Connaitre les notions de position relative et absolue et dans quel contexte les utiliser


• Connaitre la notion de float et dans quel contexte s'en servir


• Connaitre les bases de flexbox


• Savoir utiliser les tableaux HTML (et le fait qu'il ne faut plus s'en servir pour agencer du contenu dans le code moderne)

S'exercer :

• Positionner des éléments (images, textes, etc) côte à côte en utilisant alternativement inline-block, le positionnement relatif et absolu, les flottants, et flexbox.


• Fixer un élément en bas à droite d'un bloc de contenu. L'élément ne doit pas bouger de son coin même si le bloc de contenu change de dimensions.


• Les tableaux : Coder un tableau de classement des membres du mois

Objectifs : Acquérir une autonomie dans la réalisation de codes simples (mises en page RP) et commencer à étudier et comprendre des codes plus complexes (fiches personnages, fiches pub)

Notions :

• Connaitre les bases de flexbox pour placer des blocs côte à côte (display:flex;, flex-direction et flex-wrap au minimum)


• Connaitre les bases de grid pour placer des blocs sous forme de "grille" à x colonnes et y lignes (display:grid; et grid-template-colums:repeat(x, 1fr); au minimum)


• Savoir manipuler des images HTML et images de fond de façon avancée, et en particulier gérer leurs proportions avec object-fit, max-width, background-size, etc.


• Savoir créer une ancre


• Savoir créer des effets simples au survol (via :hover)


• Connaître les propriétés personnalisées (variables CSS) et savoir les utiliser

S'exercer :

• Créer une fiche RP avec des éléments côte à côte via les bases de flexbox et de grid

Objectifs : Développer une méthodologie (savoir utiliser ses connaissances à bon escient, prendre en compte la sémantique, etc.) et acquérir les bases des templates de Forumactif

Notions :

• Savoir coder de façon sémantique au lieu de n'utiliser que des <div> et <span> (utiliser les balises de titre <h1>, <h2> & co pour coder un titre, etc.)


• Par extension du précédent, ne plus "inventer" de balises.


• Savoir combiner les sélecteurs CSS en utilisant les sélecteurs plus avancés >, +, ~, voire les sélecteurs d'attributs.


• Connaître les bases des templates de Forumactif, notamment le concept de variables et de boucles


• Savoir installer, utiliser et personnaliser un code trouvé sur un site de ressources, même sans avoir toutes les compétences pour le comprendre : effets d'animation en CSS, javascript type onglets, ajout de sets d'icones et de polices personnalisées, etc.


• Commencer, si ce n'est pas déjà le cas, à s'affranchir du "pixel perfect". Utiliser le moins de dimensions fixes possibles, s'intéresser aux unités relatives.

S'exercer :

• Créer un effet d'infobulle personnalisé


• Coder une page d'accueil simple en limitant les sélecteurs de classes


• Coder un QEEL simple en limitant les sélecteurs de classes

Objectifs : Premiers pas vers une complète autonomie en matière de codage Forumactif. Consolidation des acquis, traque des bugs, épuration du code, création d'effets spéciaux.

Notions :

• Connaître et comprendre le principe d'héritage en CSS (le "Cascading") pour l'optimiser davantage encore


• Savoir ce que sont les pseudo-classes et pseudo-éléments (et leur différence) et en faire usage pour éviter de multiplier les classes (:nth-child(), :nth-of-type(), :is( et :has()...) ou les éléments vides (::before, ::after)


• Savoir utiliser l'inspecteur d'éléments du navigateur afin de trouver la source d'un bug et le corriger


• Commencer à s'intéresser au codage responsive


• Savoir utiliser les transformations (propriété transform et ses valeurs)


• Savoir faire des effets d'animation (transition, @keyframes)


• Comprendre la logique de fonctionnement des templates souvent personnalisés (overall_header, index_box, index_body, viewforum_body, topics_list_box, viewtopic_body)


• Approfondir ses connaissances en matières de fonctions CSS telles que clamp(), calc(), linear-gradient(), path(), opacity() : elles sont très nombreuses et vous n'avez pas besoin de toutes les connaitre, mais savoir qu'elles existent devrait élargir vos horizons ! (documentation MDN )

S'exercer :

• Coder un template hors index en optimisant son CSS


• Coder une fiche complexe avec des animations et transformations au survol

Objectifs : Acquérir une autonomie dans la personnalisation avancée de FA, en sachant modifier les templates peu importe leur version ; savoir utiliser un code JS, idéalement savoir le lire.

Notions :

• Savoir utiliser flexbox de façon plus avancée (flex-basis, flex-shrink, flex-grow, order et les diverses propriétés d'alignement)


• Savoir utiliser grid de façon plus avancée (grid-template-areas, grid-area, grid-column, grid-row et les propriétés d'alignement)


• Approfondir la compréhension des boucles "conditionnelles" de Forumactif (la relation entre les boucles et les options de FA, par exemple l'affichage des points de réputation)


• Être capable de complètement recoder un template simple sans se baser sur des codes existants


• Savoir manipuler la barre de navigation et la toolbar de Forumactif (remarque : la version AwesomeBB les gère différemment, mais si déjà vous gérez la version pré-awesomeBB c'est très bien)


• Commencer à s'intéresser au codage responsive


• Savoir utiliser un code Javascript, voire effectuer des modifications mineures (idéalement, savoir le lire)


• Connaissance avancée du panneau d'administration (réglages afférents au profil, aux modes d'affichage des catégories, à la feuille de personnage, etc).

S'exercer :

• Coder le template viewtopic_body


• Coder un élément en y appliquant la couleur du groupe auquel appartient le membre

Objectifs : Vers l'infini et au-delà

Notions :

• Savoir où chercher l'information pour appréhender des notions qu'on ne connaît pas/régler des bugs → donc avoir l'habitude de lire la documentation.


• Notions en JS : connaître la syntaxe, la structure du programme et comprendre un code JS ; idéalement, connaître les notions de variable et type de données (nombres, chaînes de caractères, opérateurs booléens)


• Savoir dépanner une tierce personne (ce qui se comprend bien s'énonce clairement)


• Savoir coder et personnaliser la majorité des templates Forumactif


• Savoir contourner les limitations de Forumactif avec du Javascript


• Coder sur un environnement de développement (tel que Visual Studio Code) plutôt qu'à même Forumactif


• Tendre vers des codes accessibles


• Liste non exhaustive, the sky is the limit comme disent les anglophones !

S'exercer :

• Coder un thème complet


• Proposer des LS et/ou tutoriels