Le programme détaillé

Monstera, chapitre par chapitre

Apprivoiser des compagnons et les entraîner avec du code.

HTMLCSSJavaScript

159 leçons · environ 10 h · 17 chapitres

Une vallée où chaque compagnon a un nom — jusqu'au jour où les Effaceurs les volent, avec les couleurs et les panneaux. Pixel, le petit dragon, demande de l'aide à votre enfant : tout ce qu'il écrira en HTML et en CSS réapparaîtra pour de vrai dans la vallée.

Chaque chapitre dure entre 30 et 45 minutes, mission de fin comprise, et s'ouvre quand le précédent est terminé. L'ordre n'est pas décoratif : chaque notion s'appuie sur celles d'avant.

1. 1

   Le panneau effacé

   7 leçons · 29 min

   Les toutes premières balises, et ce qu'elles font : <h1> pour le titre, <h2> pour un sous-titre, <p> pour un paragraphe, <ul> et <li> pour une liste, <img> pour une image, <a> pour un lien, <button> pour un bouton, <strong> et <em> pour insister, <div> pour grouper.

2. 2

   Les mots de la page

   9 leçons · 34 min

   Le texte dans le détail : <h2> pour un sous-titre, <br> pour couper une ligne, <blockquote> pour citer quelqu'un, <small> pour une mention, <hr> pour séparer deux moments, <code> pour du code, <time> pour une date.

3. 3

   Les listes et les liens

   9 leçons · 38 min

   Les listes numérotées <ol>, les listes imbriquées, le menu <nav>, l'attribut target qui ouvre le lien dans une autre page, les ancres qui font descendre dans la page, et le lexique <dl> avec ses termes <dt> et leurs définitions <dd>.

4. 4

   Les images et les tableaux

   9 leçons · 39 min

   L'image avec src, alt et width ; <figure> et <figcaption> pour la légender ; puis le tableau : <table>, ses lignes <tr>, ses cases <td>, ses en-têtes <th>, sa légende <caption>, et colspan pour une case qui en vaut deux.

5. 5

   Les boîtes et les formulaires

   11 leçons · 38 min

   Les boîtes <div> et <span>, les repères d'une page — <header>, <footer>, <section>, <article>, <aside> — puis le formulaire : <form>, <label>, <input>, <textarea>, <select> et ses <option>, et les cases à cocher.

6. 6

   La vallée grise

   5 leçons · 27 min

   Le CSS commence : une règle, un sélecteur, une propriété. color et background pour la couleur, width et height pour la taille, border-radius pour arrondir un coin.

7. 7

   Le texte et ses polices

   10 leçons · 36 min

   Tout ce qui touche au texte : font-size, font-family, font-weight, font-style, text-align, text-decoration, line-height, letter-spacing, text-transform — et les classes et identifiants, pour viser un élément précis plutôt que tous.

8. 8

   La boîte et ses marges

   10 leçons · 38 min

   Le modèle de boîte, celui qui explique pourquoi une mise en page déborde : padding à l'intérieur, border autour, margin dehors, les côtés séparés, les pourcentages, le centrage, et box-sizing.

9. 9

   La mise en page

   11 leçons · 38 min

   Placer les éléments les uns par rapport aux autres : display (inline-block, none, flex, grid), flex-direction, justify-content, align-items, gap, position, et grid-template-columns.

10. 10

    Les effets et le mouvement

    10 leçons · 38 min

    Ce qui donne du relief : dégradés, box-shadow, text-shadow, opacity, l'état :hover quand la souris passe, puis transition, transform et @keyframes pour que ça bouge.

11. 11

    Les valeurs

    9 leçons · 38 min

    Le JavaScript commence par les valeurs : let et const, les nombres, les chaînes, la concaténation, les gabarits, les booléens, typeof — et querySelector avec textContent, pour écrire dans la page.

12. 12

    Décider et répéter

    9 leçons · 39 min

    Décider et répéter : if et else, les comparaisons, && et ||, puis les boucles for et while.

13. 13

    Ranger et réutiliser

    10 leçons · 38 min

    Ranger plusieurs choses ensemble : les tableaux, length, les index, push, forEach, filter, map ; puis les objets, et les tableaux d'objets.

14. 14

    Les fonctions et les objets

    9 leçons · 39 min

    Fabriquer ses propres outils : function, les paramètres, return, les fonctions fléchées, les méthodes et this.

15. 15

    Chercher, compter, comparer

    11 leçons · 38 min

    Aucune syntaxe nouvelle ici : la démarche. Parcourir une liste pour en tirer une réponse — le plus grand, le plus petit, combien, à quelle place, la somme, la moyenne — et deux exercices où l'on lit un code pour dire ce qu'il affichera, sans l'exécuter.

16. 16

    Répéter dans le répéter

    10 leçons · 37 min

    La boucle dans la boucle : les paires, une table, le plus grand de chaque groupe, comparer deux à deux, trier, inverser, retirer les doublons. Et deux codes qui tournent mal, à réparer.

17. 17

    Toucher la page

    10 leçons · 38 min

    Toucher la page pendant qu'elle s'affiche : querySelector pour attraper un élément, addEventListener pour écouter un clic ou une frappe, textContent, style, classList, value, et setTimeout pour faire attendre.