Apprendre le développement Web debutant

# Avant de commencer ## À qui s'adresse ce livre Ce livre s'adresse à celles et ceux qui n'ont jamais écrit une ligne de code. Aucun prérequis : pas de diplôme en informatique, pas de matériel puissant, pas d'anglais avancé. Un ordinateur, une connexion internet même modeste, et de la régularité suffisent. À la fin de ce livre, vous saurez construire une page web complète, la styliser, la rendre interactive, et la mettre en ligne à une adresse que vous pourrez partager. ## Comment lire ce livre Le web s'apprend en tapant du code, pas en lisant du code. Chaque chapitre suit le même rythme : - une explication courte du concept ; - des exemples que vous recopiez à la main (ne faites pas de copier-coller, la mémoire passe par les doigts) ; - un exercice à faire avant de passer à la suite. Un projet fil rouge traverse le livre : le site d'une petite structure locale — une boutique, une association, un atelier de couture. Vous le construisez morceau par morceau. **Conseil de rythme** : une heure par jour pendant six semaines vaut infiniment mieux que huit heures un dimanche. Le cerveau consolide entre les sessions, pas pendant. ## Les trois langages du web Une page web repose sur trois langages qui ont chacun un rôle distinct. La comparaison classique est celle d'une maison : | Langage | Rôle | Analogie | |---|---|---| | HTML | Le contenu et sa structure | Les murs, les portes, les pièces | | CSS | L'apparence | La peinture, le carrelage, la décoration | | JavaScript | Le comportement | L'électricité, l'interrupteur, la porte automatique | On les apprend dans cet ordre, et c'est aussi l'ordre de ce livre. Un site peut exister avec du HTML seul. Il sera laid, mais il fonctionnera. Sans HTML, en revanche, le CSS et le JavaScript n'ont rien sur quoi s'appliquer. # Comprendre comment fonctionne le web ## Le principe client-serveur Quand vous tapez une adresse dans votre navigateur, un dialogue en deux temps se déclenche. Votre navigateur — le **client** — envoie une demande. Un ordinateur distant allumé en permanence — le **serveur** — reçoit cette demande et renvoie une réponse : des fichiers HTML, CSS, JavaScript, des images. C'est aussi simple que cela. Tout le reste n'est que variation sur ce thème. Le client demande, le serveur répond, le navigateur affiche. ## Le rôle du nom de domaine Les ordinateurs sur internet ne se reconnaissent pas par des noms mais par des numéros, appelés adresses IP : `102.16.44.7`, par exemple. Retenir des numéros est pénible, alors on a inventé les noms de domaine. Quand vous tapez `boutique-fatou.com`, votre navigateur interroge d'abord un annuaire mondial appelé **DNS** (Domain Name System) qui répond : « ce nom correspond à l'adresse 102.16.44.7 ». Le navigateur contacte alors cette adresse. Un nom de domaine se loue, généralement à l'année, auprès d'un registraire. Le serveur qui héberge les fichiers, lui, se loue séparément — ou s'obtient gratuitement, comme nous le verrons au dernier chapitre. ## HTTP et HTTPS Le langage de ce dialogue s'appelle **HTTP** (HyperText Transfer Protocol). La demande du client contient une méthode, principalement : - `GET` : donne-moi cette page ; - `POST` : voici des données que je t'envoie (un formulaire rempli, par exemple). Le serveur répond avec un code de statut. Les plus courants : | Code | Signification | |---|---| | 200 | Tout va bien, voici la page | | 301 | La page a déménagé définitivement | | 404 | Cette page n'existe pas | | 500 | Le serveur a planté | Le fameux « erreur 404 » n'est rien d'autre qu'un serveur qui vous dit poliment qu'il n'a pas trouvé ce que vous demandiez. **HTTPS** est la version chiffrée de HTTP. Les données circulent brouillées entre le client et le serveur, ce qui empêche un tiers de les lire au passage. Aujourd'hui c'est le standard obligatoire : un site en HTTP simple est signalé comme « non sécurisé » par tous les navigateurs. ## Front-end et back-end Vous entendrez constamment ces deux mots. Le **front-end** est tout ce qui s'exécute dans le navigateur de la personne : le HTML, le CSS, le JavaScript de la page. C'est ce que vous voyez et manipulez. C'est l'objet de ce livre. Le **back-end** est ce qui s'exécute sur le serveur : la logique métier, la base de données, l'authentification. On l'écrit en PHP, Python, Node.js, Java, et bien d'autres langages. Un **développeur full stack** est simplement quelqu'un qui pratique les deux. Beaucoup de sites utiles n'ont pas de back-end du tout : une page de présentation, un portfolio, une vitrine de restaurant avec le menu et le numéro de téléphone. Ne croyez pas qu'il faille tout apprendre avant de livrer quelque chose d'utile. ## Ce qu'est vraiment un site web Un site web, dans sa forme la plus simple, est un dossier contenant des fichiers. ``` mon-site/ ├── index.html ├── style.css ├── script.js └── images/ └── logo.png ``` Ce dossier, posé sur un serveur, devient un site accessible au monde entier. Il n'y a pas de magie cachée. Quand vous aurez terminé ce livre, vous saurez fabriquer chacun de ces fichiers. > **À retenir** — Le navigateur demande, le serveur répond, le navigateur affiche. Un site est un dossier de fichiers. Le DNS traduit les noms en adresses. HTTPS chiffre l'échange. # Installer son environnement de travail ## De quoi avez-vous besoin Trois choses seulement, toutes gratuites : 1. un **navigateur moderne** — Firefox ou Chrome ; 2. un **éditeur de code** — Visual Studio Code ; 3. un **dossier de travail** bien rangé sur votre ordinateur. Rien d'autre pour l'instant. Pas de framework, pas de terminal compliqué, pas d'abonnement. ## Installer Visual Studio Code Visual Studio Code (souvent abrégé « VS Code ») est un éditeur gratuit édité par Microsoft, devenu le standard de la profession. Téléchargez-le depuis `code.visualstudio.com` et installez-le normalement. Une fois ouvert, installez trois extensions. Cliquez sur l'icône des extensions dans la barre latérale gauche (quatre carrés) puis cherchez : - **Live Server** — recharge automatiquement votre page dans le navigateur à chaque enregistrement. Indispensable ; - **Prettier** — remet votre code en forme proprement d'un raccourci clavier ; - **French Language Pack**, si vous préférez l'interface en français. ## Créer son premier dossier de projet Créez un dossier `projets-web` dans vos documents, puis à l'intérieur un dossier `boutique`. Ouvrez ce dossier depuis VS Code : menu `Fichier > Ouvrir le dossier`. Quelques règles de nommage qui vous éviteront des heures de frustration : - **jamais d'espaces** dans les noms de fichiers : écrivez `ma-page.html`, pas `ma page.html` ; - **jamais d'accents ni de caractères spéciaux** : `resume.html`, pas `résumé.html` ; - **tout en minuscules** : sur un serveur Linux, `Index.html` et `index.html` sont deux fichiers différents ; - le tiret `-` comme séparateur, c'est la convention. Le fichier d'accueil s'appelle **toujours** `index.html`. C'est le fichier que le serveur sert par défaut quand on demande un dossier. ## Votre première page Dans VS Code, créez un fichier `index.html` et tapez ceci — à la main : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma première page</title> </head> <body> <h1>Bonjour le monde</h1> <p>Ma première page web, écrite par moi.</p> </body> </html> ``` Enregistrez avec `Ctrl+S`. Faites un clic droit dans le fichier, puis `Open with Live Server`. Votre navigateur s'ouvre et affiche votre page. Vous venez de créer un site web. Techniquement, il ne manque plus que l'hébergement pour que le monde entier puisse le voir. ## Les outils de développement du navigateur Appuyez sur `F12` dans votre navigateur. Un panneau s'ouvre : ce sont les **DevTools**, votre instrument de travail le plus important après l'éditeur. Deux onglets à connaître dès maintenant : - **Éléments** (ou *Elements*) : affiche le HTML de la page tel que le navigateur l'a compris, et le CSS appliqué à chaque élément. Vous pouvez y modifier les valeurs en direct pour tester une idée — les modifications disparaissent au rechargement ; - **Console** : affiche les erreurs JavaScript et les messages que vous y envoyez. Quand quelque chose ne marche pas, c'est le premier endroit à regarder. Prenez l'habitude dès aujourd'hui d'ouvrir la console. Un développeur qui ne lit pas ses erreurs travaille les yeux fermés. > **Exercice 2.1** — Créez le dossier `boutique`, le fichier `index.html`, recopiez la page ci-dessus, changez le titre et le texte pour parler d'une boutique de votre choix. Ouvrez les DevTools et repérez votre balise `<h1>` dans l'onglet Éléments. # HTML : structurer le contenu ## L'anatomie d'une balise HTML signifie *HyperText Markup Language* : un langage de **balisage**. On ne « programme » pas en HTML, on décrit ce qu'est chaque morceau de contenu. ```html <p>Ceci est un paragraphe.</p> ``` Trois parties : la balise ouvrante `<p>`, le contenu, la balise fermante `</p>`. L'ensemble s'appelle un **élément**. Certaines balises n'ont pas de contenu et donc pas de fermeture. On les dit **auto-fermantes** : ```html <img src="logo.png" alt="Logo de la boutique"> <br> <hr> ``` Les balises peuvent porter des **attributs**, qui donnent des informations supplémentaires. Dans `<img src="logo.png">`, `src` est l'attribut et `"logo.png"` sa valeur. Enfin, les éléments s'**imbriquent** les uns dans les autres, comme des boîtes : ```html <p>Un paragraphe avec un mot en <strong>gras</strong> dedans.</p> ``` L'ordre de fermeture compte. On ferme toujours l'élément le plus intérieur en premier. Ceci est faux et provoquera des affichages étranges : ```html <p>Texte en <strong>gras</p></strong> ``` ## Le squelette d'un document Toute page commence par cette structure : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Boutique Fatou — Tissus et couture</title> <meta name="description" content="Vente de tissus et service de couture sur mesure."> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> ``` Détaillons ce qui compte : - `<!DOCTYPE html>` indique au navigateur d'utiliser les règles HTML modernes ; - `lang="fr"` annonce la langue du contenu. C'est important pour les lecteurs d'écran et pour les moteurs de recherche ; - `<meta charset="UTF-8">` permet d'afficher correctement les accents. Sans cette ligne, « café » devient « café » ; - la balise `viewport` est indispensable pour que le site s'affiche correctement sur téléphone. Nous y reviendrons ; - `<title>` est le texte affiché dans l'onglet du navigateur et dans les résultats Google ; - la `description` est le petit texte affiché sous le lien dans les résultats de recherche. Le `<head>` contient les informations *sur* la page. Le `<body>` contient la page elle-même. Rien de ce qui est dans `<head>` n'est visible directement. ## Les balises de texte ```html <h1>Titre principal de la page</h1> <h2>Grande section</h2> <h3>Sous-section</h3> <p>Un paragraphe de texte courant.</p> <strong>Important</strong> et <em>mis en valeur</em>. <blockquote>Une citation d'un client satisfait.</blockquote> ``` Trois règles à respecter : 1. **Un seul `<h1>` par page.** C'est le titre du contenu principal. 2. **Ne sautez pas de niveaux.** Un `<h3>` vient après un `<h2>`, jamais directement après un `<h1>`. 3. **Ne choisissez jamais un niveau de titre pour sa taille.** Si votre `<h2>` est trop gros, on le réduira en CSS. Les titres décrivent une hiérarchie, pas une apparence. Cette hiérarchie n'est pas de la coquetterie : les personnes aveugles naviguent une page en sautant de titre en titre, et Google l'utilise pour comprendre votre contenu. ## Les listes ```html <ul> <li>Wax</li> <li>Bazin</li> <li>Basin riche</li> </ul> <ol> <li>Choisir le tissu</li> <li>Prendre les mesures</li> <li>Récupérer la commande</li> </ol> ``` `<ul>` pour une liste non ordonnée (l'ordre n'a pas d'importance), `<ol>` quand l'ordre compte. Dans les deux cas, chaque élément est un `<li>`. ## Les liens ```html <a href="contact.html">Nous contacter</a> <a href="https://exemple.com">Un site externe</a> <a href="tel:+221770000000">Appeler</a> <a href="mailto:contact@exemple.com">Envoyer un email</a> ``` Le lien vers un numéro de téléphone est particulièrement utile : sur mobile, il lance directement l'appel. Un mot sur les **chemins**. Si votre fichier est dans le même dossier, écrivez simplement son nom : `contact.html`. S'il est dans un sous-dossier : `pages/contact.html`. Pour remonter d'un dossier : `../index.html`. Un dernier point souvent négligé : le texte du lien doit décrire la destination. « Cliquez ici » ne dit rien à quelqu'un qui parcourt la liste des liens d'une page. ## Les images ```html <img src="images/wax-bleu.jpg" alt="Pagne wax bleu à motifs géométriques" width="600"> ``` L'attribut `alt` décrit l'image. Il est lu à voix haute par les lecteurs d'écran et s'affiche si l'image ne charge pas. Ce n'est pas optionnel : une image sans `alt` est une image invisible pour une partie de vos visiteurs. Si l'image est purement décorative, laissez l'attribut vide : `alt=""`. Cela indique au lecteur d'écran de l'ignorer, ce qui est différent de l'oublier. **Optimisez toujours vos images avant de les mettre en ligne.** Une photo sortie d'un téléphone pèse souvent 4 Mo ; sur une connexion mobile lente, elle ruinera votre site. Redimensionnez-la à 1200 pixels de large maximum et compressez-la avec un outil comme Squoosh ou TinyPNG. Visez moins de 200 Ko par image. ## Les balises sémantiques Autrefois, tout le monde utilisait `<div>` pour tout. HTML5 a introduit des balises qui **disent ce qu'elles contiennent** : ```html <body> <header> <h1>Boutique Fatou</h1> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="produits.html">Produits</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <main> <section> <h2>Nos tissus</h2> <article> <h3>Wax hollandais</h3> <p>Description du produit.</p> </article> </section> </main> <footer> <p>© 2026 Boutique Fatou — Dakar</p> </footer> </body> ``` | Balise | Usage | |---|---| | `<header>` | En-tête de la page ou d'une section | | `<nav>` | Menu de navigation | | `<main>` | Contenu principal, une seule fois par page | | `<section>` | Regroupement thématique | | `<article>` | Contenu autonome, qui aurait du sens seul | | `<aside>` | Contenu latéral, complémentaire | | `<footer>` | Pied de page | Visuellement, ces balises ne changent rien. Mais elles rendent votre code lisible, votre site accessible et mieux compris par les moteurs de recherche. `<div>` reste utile, mais seulement quand aucune balise sémantique ne convient. > **Exercice 3.1** — Construisez la page d'accueil de votre boutique avec un `<header>` contenant le nom et un menu de trois liens, un `<main>` avec deux sections, et un `<footer>`. Ajoutez au moins une image avec un `alt` correct. # HTML : formulaires et tableaux ## Un formulaire simple Les formulaires sont la porte d'entrée des données utilisateur. ```html <form action="/envoyer" method="POST"> <label for="nom">Votre nom</label> <input type="text" id="nom" name="nom" required> <label for="email">Votre email</label> <input type="email" id="email" name="email" required> <label for="message">Votre message</label> <textarea id="message" name="message" rows="5"></textarea> <button type="submit">Envoyer</button> </form> ``` Deux points essentiels. **Le lien `label` / `input`.** L'attribut `for` du label doit correspondre exactement à l'`id` de l'input. Ce lien permet de cliquer sur le texte pour activer le champ — ce qui est précieux sur mobile — et permet aux lecteurs d'écran d'annoncer le bon libellé. **L'attribut `name`.** C'est sous ce nom que la donnée sera transmise au serveur. Un champ sans `name` n'envoie rien. ## Les types de champs Le bon `type` déclenche le bon clavier sur téléphone et une validation automatique du navigateur. ```html <input type="text"> <input type="email"> <input type="tel"> <input type="number"> <input type="date"> <input type="password"> <input type="checkbox"> <input type="radio"> <input type="file"> ``` Pour une liste déroulante : ```html <label for="tissu">Type de tissu</label> <select id="tissu" name="tissu"> <option value="">— Choisir —</option> <option value="wax">Wax</option> <option value="bazin">Bazin</option> </select> ``` Quelques attributs utiles : `required` rend le champ obligatoire, `placeholder` affiche un exemple grisé, `minlength` et `maxlength` limitent la longueur, `disabled` désactive le champ. Attention : `placeholder` n'est **pas** un remplacement du `label`. Le texte disparaît dès que l'utilisateur tape, et il devient impossible de se rappeler ce qu'on est en train de remplir. ## Ce que le formulaire ne fait pas Un formulaire HTML seul ne peut pas envoyer un email. Il transmet des données à une adresse indiquée dans `action`, où un programme côté serveur doit les traiter. Pour un site statique, deux solutions simples : un service comme Formspree ou Netlify Forms, qui reçoit les données et vous les transfère par email, ou plus tard votre propre back-end. Et une règle qui ne souffre aucune exception : **la validation côté navigateur ne protège rien**. `required` et `type="email"` améliorent le confort de saisie, mais n'importe qui peut les contourner en dix secondes. Toute donnée doit être revérifiée côté serveur. ## Les tableaux Les tableaux servent à présenter des **données tabulaires** — un tarif, un planning, un bilan. Ils ne servent jamais à faire de la mise en page. ```html <table> <caption>Tarifs de confection</caption> <thead> <tr> <th>Vêtement</th> <th>Délai</th> <th>Prix</th> </tr> </thead> <tbody> <tr> <td>Chemise homme</td> <td>3 jours</td> <td>8 000 F</td> </tr> <tr> <td>Robe</td> <td>5 jours</td> <td>15 000 F</td> </tr> </tbody> </table> ``` `<th>` désigne une cellule d'en-tête, `<td>` une cellule de données, `<tr>` une ligne. Le `<caption>` donne un titre au tableau. > **Exercice 4.1** — Ajoutez à votre site une page `contact.html` avec un formulaire (nom, email, téléphone, message) et une page `tarifs.html` avec un tableau de quatre lignes. # CSS : donner une apparence ## Comment écrire du CSS Le CSS s'écrit dans un fichier séparé, lié depuis le `<head>` : ```html <link rel="stylesheet" href="style.css"> ``` Une règle CSS a toujours la même forme : ```css p { color: #333333; font-size: 16px; } ``` `p` est le **sélecteur** (quels éléments sont visés), et entre accolades viennent les **déclarations**, chacune composée d'une propriété et d'une valeur, terminée par un point-virgule. ## Les sélecteurs ```css p { } /* tous les paragraphes */ .carte { } /* tous les éléments de classe "carte" */ #menu { } /* l'élément d'id "menu" */ nav a { } /* les liens à l'intérieur d'un nav */ .carte:hover { } /* une carte survolée par la souris */ ``` La **classe** est votre outil principal. Elle se pose en HTML et se réutilise autant de fois qu'on veut : ```html <article class="carte">…</article> <article class="carte">…</article> ``` ```css .carte { padding: 16px; border: 1px solid #ddd; } ``` L'**id** doit être unique dans la page. Réservez-le à l'identification d'un élément précis, pas au style. ## Les couleurs Trois notations, toutes équivalentes : ```css color: red; /* nom */ color: #0B3D2E; /* hexadécimal */ color: rgb(11, 61, 46); /* rouge, vert, bleu */ color: rgba(11, 61, 46, 0.5); /* avec transparence */ ``` L'hexadécimal est le plus courant dans la profession. `#0B3D2E` se lit : 0B de rouge, 3D de vert, 2E de bleu, chaque valeur allant de 00 à FF. Une astuce pour ne plus répéter vos couleurs partout, les **variables CSS** : ```css :root { --vert: #0B3D2E; --or: #C9A227; --texte: #2B2B2B; } .bouton { background-color: var(--vert); color: var(--or); } ``` Changez la valeur en haut du fichier, tout le site suit. ## Le modèle de boîte C'est le concept le plus important du CSS, et celui qui cause le plus de confusion au début. **Chaque élément HTML est une boîte rectangulaire** composée de quatre couches, de l'intérieur vers l'extérieur : - le **contenu** — le texte, l'image ; - le **padding** — l'espace intérieur, entre le contenu et la bordure ; - la **border** — la bordure ; - le **margin** — l'espace extérieur, qui sépare cet élément des autres. ```css .carte { width: 300px; padding: 20px; border: 2px solid var(--or); margin: 16px; } ``` Piège classique : par défaut, `width: 300px` désigne la largeur du **contenu seul**. En ajoutant 20px de padding de chaque côté et 2px de bordure, la boîte occupe en réalité 344px. Ce comportement rend tout calcul pénible. La solution tient en trois lignes, à mettre en tête de chaque projet : ```css *, *::before, *::after { box-sizing: border-box; } ``` Désormais `width: 300px` signifie « 300px au total, padding et bordure compris ». C'est ce que tout le monde fait. ## Le texte ```css body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: #2B2B2B; } h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; } ``` Trois conseils qui séparent une page amateur d'une page soignée : 1. **Ne descendez jamais sous 16px** pour le texte courant. C'est la limite de confort de lecture, et sur iPhone un champ de saisie sous 16px déclenche un zoom automatique désagréable. 2. **`line-height: 1.6`** pour les paragraphes. Un texte trop serré est fatigant ; c'est le réglage le plus rentable du CSS. 3. **Limitez la largeur des lignes** à environ 65 caractères avec `max-width: 65ch`. Un texte qui traverse un écran de 27 pouces est illisible. L'unité `rem` vaut la taille de police de base du navigateur, généralement 16px. Utiliser `rem` plutôt que `px` respecte les préférences des personnes qui ont augmenté la taille du texte dans leurs réglages. > **Exercice 5.1** — Créez `style.css`, liez-le à votre page, définissez trois variables de couleur, appliquez `box-sizing: border-box`, et stylisez votre `<header>` avec un fond coloré, du padding et une bordure basse dorée. # CSS : mise en page et responsive ## Le flux normal Par défaut, les éléments se placent selon deux comportements. Les éléments **bloc** (`div`, `p`, `h1`, `section`) prennent toute la largeur disponible et s'empilent verticalement. Les éléments **en ligne** (`span`, `a`, `strong`) ne prennent que la place de leur contenu et se suivent horizontalement. On peut changer ce comportement avec la propriété `display`, mais la plupart du temps on utilise plutôt Flexbox ou Grid. ## Flexbox : aligner sur une ligne Flexbox organise des éléments sur **un axe**, horizontal ou vertical. C'est l'outil des barres de navigation, des rangées de boutons, des cartes alignées. On l'active sur le **conteneur** : ```css .menu { display: flex; gap: 24px; justify-content: space-between; align-items: center; } ``` Les propriétés à connaître : | Propriété | Effet | |---|---| | `flex-direction` | `row` (défaut) ou `column` | | `justify-content` | Répartition sur l'axe principal | | `align-items` | Alignement sur l'axe perpendiculaire | | `gap` | Espace entre les éléments | | `flex-wrap: wrap` | Autorise le passage à la ligne | Pour `justify-content`, les valeurs utiles sont `flex-start`, `center`, `space-between` (premier à gauche, dernier à droite, espace réparti au milieu) et `space-around`. L'exemple classique d'un en-tête avec le logo à gauche et le menu à droite : ```css header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; } ``` ## Grid : organiser en grille Grid travaille sur **deux axes** simultanément. C'est l'outil des galeries, des tableaux de bord, des mises en page complexes. ```css .galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } ``` `1fr` signifie « une part de l'espace disponible ». Trois colonnes de `1fr` se partagent la largeur en trois parts égales. Une formule particulièrement utile crée une grille qui s'adapte toute seule au nombre d'éléments et à la largeur de l'écran, sans écrire une seule media query : ```css .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } ``` Traduction : « fais autant de colonnes que possible, chacune d'au moins 250px, en se partageant l'espace restant ». Sur mobile, une colonne ; sur tablette, deux ; sur grand écran, quatre ou cinq. **Quand utiliser lequel ?** Flexbox pour une ligne ou une colonne d'éléments dont la taille dépend du contenu. Grid pour une structure en deux dimensions définie à l'avance. En pratique, on les mélange : une page en Grid, dont chaque carte est en Flex. ## Le responsive Un site responsive s'adapte à la taille de l'écran. Trois ingrédients. **Un.** La balise viewport dans le `<head>`, sans laquelle rien ne fonctionnera sur mobile : ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` **Deux.** Des tailles souples plutôt que fixes. Évitez `width: 800px`, préférez : ```css .conteneur { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; } ``` Ce bloc de quatre lignes est le conteneur centré universel : pleine largeur sur mobile, plafonné à 1100px sur grand écran, centré, avec une marge de sécurité sur les côtés. **Trois.** Les media queries pour les ajustements restants : ```css /* styles mobile par défaut */ .grille { display: grid; grid-template-columns: 1fr; } /* à partir de 768px de large */ @media (min-width: 768px) { .grille { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .grille { grid-template-columns: repeat(3, 1fr); } } ``` Notez l'ordre : on écrit d'abord les styles pour mobile, puis on enrichit pour les écrans plus larges avec `min-width`. Cette approche s'appelle **mobile first**. Elle n'est pas qu'une mode : en Afrique de l'Ouest comme ailleurs, la majorité du trafic web se fait sur téléphone. Concevoir pour le petit écran d'abord évite de bricoler ensuite. Testez systématiquement : dans les DevTools, l'icône de téléphone (`Ctrl+Shift+M`) simule différentes tailles d'écran. ## Rendre les images souples Une seule règle à mettre dans tous vos projets : ```css img { max-width: 100%; height: auto; display: block; } ``` L'image ne dépassera jamais de son conteneur et gardera ses proportions. > **Exercice 6.1** — Transformez la section « Nos produits » de votre site en grille responsive : une colonne sur mobile, deux à partir de 768px, trois à partir de 1024px. Alignez votre menu avec Flexbox. # JavaScript : les fondamentaux ## À quoi sert JavaScript HTML structure, CSS habille, JavaScript **agit**. C'est lui qui fait apparaître un menu au clic, qui vérifie un formulaire, qui calcule un total, qui va chercher des données sur un serveur sans recharger la page. JavaScript s'écrit dans un fichier séparé, chargé juste avant la fermeture du `<body>` : ```html <script src="script.js"></script> </body> </html> ``` Pourquoi à la fin ? Parce que le navigateur lit la page de haut en bas. Placé en fin de document, votre script s'exécute quand le HTML existe déjà et peut donc le manipuler. ## Variables ```javascript const nom = "Fatou"; let total = 0; ``` `const` déclare une valeur qui ne sera pas réassignée. `let` déclare une valeur qui changera. Vous croiserez `var` dans du code ancien : ne l'utilisez plus. La règle de travail : **utilisez `const` par défaut**, et passez à `let` seulement quand vous avez besoin de réassigner. Votre code devient plus prévisible. ## Les types de données ```javascript const texte = "Bonjour"; // string const prix = 8000; // number const disponible = true; // boolean const vide = null; // null : absence volontaire let inconnu; // undefined : jamais défini const tissus = ["wax", "bazin"]; // array : liste const client = { // object : fiche nom: "Fatou Diop", ville: "Thiès", commandes: 3 }; ``` On accède aux données ainsi : ```javascript tissus[0]; // "wax" — les index commencent à 0 tissus.length; // 2 client.nom; // "Fatou Diop" client.ville; // "Thiès" ``` Retenez que **le premier élément d'un tableau porte l'index 0**. C'est la source d'erreur numéro un des débutants. ## Les chaînes de caractères Les *template literals*, écrits avec des accents graves, permettent d'insérer des variables directement : ```javascript const nom = "Fatou"; const message = `Bonjour ${nom}, vous avez ${client.commandes} commandes.`; ``` C'est plus lisible que la concaténation avec `+`, et cela gère les retours à la ligne. ## Conditions ```javascript const stock = 3; if (stock === 0) { console.log("Rupture de stock"); } else if (stock < 5) { console.log("Stock faible"); } else { console.log("En stock"); } ``` **Utilisez toujours `===` et jamais `==`.** Le double égal compare après conversion de type, ce qui produit des résultats absurdes : `"5" == 5` est vrai, alors que `"5" === 5` est faux. Le triple égal compare la valeur *et* le type. C'est celui que vous voulez. Les opérateurs de comparaison : `===` égal, `!==` différent, `>`, `<`, `>=`, `<=`. Les opérateurs logiques : `&&` (et), `||` (ou), `!` (non). ## Boucles ```javascript const tissus = ["wax", "bazin", "lin"]; for (const tissu of tissus) { console.log(tissu); } tissus.forEach(function (tissu) { console.log(tissu); }); ``` `for...of` est la forme la plus lisible pour parcourir une liste. Vous rencontrerez aussi la forme classique `for (let i = 0; i < tissus.length; i++)`, utile quand vous avez besoin de l'index. ## Fonctions Une fonction est un bloc de code nommé, qu'on peut appeler autant de fois qu'on veut. ```javascript function calculerTotal(prix, quantite) { return prix * quantite; } const total = calculerTotal(8000, 3); // 24000 ``` La syntaxe moderne, dite **fonction fléchée**, fait la même chose plus brièvement : ```javascript const calculerTotal = (prix, quantite) => prix * quantite; ``` Les deux coexistent dans le code professionnel. Commencez par la forme `function`, qui est plus explicite, et adoptez les flèches quand elles vous paraîtront naturelles. Deux principes de bonne fonction : elle fait **une seule chose**, et son nom dit **ce qu'elle fait**. `calculerTotal` est un bon nom ; `traiter` n'en est pas un. ## La console, votre alliée ```javascript console.log("Valeur de total :", total); ``` Quand quelque chose ne marche pas, n'essayez pas de deviner : affichez les valeurs. `console.log` à l'entrée d'une fonction, `console.log` sur la variable suspecte. Vous verrez immédiatement où la réalité s'écarte de ce que vous imaginiez. > **Exercice 7.1** — Créez un tableau de cinq produits (objets avec `nom` et `prix`). Écrivez une fonction qui calcule le prix total, et une autre qui retourne le produit le plus cher. Affichez les résultats dans la console. # JavaScript : le DOM et les événements ## Qu'est-ce que le DOM Quand le navigateur lit votre HTML, il en construit une représentation en mémoire, sous forme d'arbre : le **DOM** (Document Object Model). JavaScript peut lire et modifier cet arbre, et toute modification s'affiche instantanément à l'écran. Comprenez bien : vous ne modifiez pas le fichier HTML sur le disque, seulement sa représentation vivante dans le navigateur. Un rechargement de page remet tout à zéro. ## Sélectionner des éléments ```javascript const titre = document.querySelector("h1"); const menu = document.querySelector("#menu"); const cartes = document.querySelectorAll(".carte"); ``` `querySelector` retourne le **premier** élément correspondant au sélecteur CSS. `querySelectorAll` retourne **tous** les éléments, sous forme de liste à parcourir. La syntaxe des sélecteurs est exactement celle du CSS : `.classe`, `#id`, `nav a`. Une chose de moins à apprendre. ## Modifier des éléments ```javascript const titre = document.querySelector("h1"); titre.textContent = "Nouveau titre"; // change le texte titre.classList.add("actif"); // ajoute une classe titre.classList.remove("actif"); // retire une classe titre.classList.toggle("actif"); // ajoute ou retire titre.style.color = "#C9A227"; // style en ligne ``` Un conseil qui vous servira longtemps : **préférez manipuler les classes plutôt que les styles directement**. Définissez l'apparence en CSS, et laissez JavaScript se contenter d'ajouter ou retirer une classe. Le code reste rangé, chaque langage à sa place. ```css .menu { display: none; } .menu.ouvert { display: block; } ``` ```javascript menu.classList.toggle("ouvert"); ``` ## Écouter des événements Un événement est une action : un clic, une saisie, un envoi de formulaire, un défilement. ```javascript const bouton = document.querySelector("#ouvrir-menu"); const menu = document.querySelector("#menu"); bouton.addEventListener("click", function () { menu.classList.toggle("ouvert"); }); ``` `addEventListener` prend deux arguments : le nom de l'événement, et la fonction à exécuter quand il se produit. Les événements les plus courants : `click`, `input` (à chaque frappe dans un champ), `change`, `submit` (envoi de formulaire), `keydown`, `mouseover`. ## Un cas concret : valider un formulaire ```javascript const formulaire = document.querySelector("#contact"); const champEmail = document.querySelector("#email"); const erreur = document.querySelector("#erreur"); formulaire.addEventListener("submit", function (evenement) { evenement.preventDefault(); if (!champEmail.value.includes("@")) { erreur.textContent = "Merci d'entrer un email valide."; return; } erreur.textContent = ""; console.log("Formulaire valide, envoi en cours…"); }); ``` Deux nouveautés ici. `evenement.preventDefault()` empêche le comportement par défaut du navigateur — dans le cas d'un formulaire, le rechargement de la page. Sans cette ligne, votre code s'exécuterait puis la page se rechargerait immédiatement. `champEmail.value` lit ce que l'utilisateur a tapé dans le champ. C'est toujours une chaîne de caractères, même dans un champ de type `number` : pensez à convertir avec `Number()` si vous devez calculer. ## Créer des éléments ```javascript const liste = document.querySelector("#produits"); const produits = ["Wax", "Bazin", "Lin"]; produits.forEach(function (produit) { const element = document.createElement("li"); element.textContent = produit; liste.appendChild(element); }); ``` C'est le principe de tout affichage dynamique : des données d'un côté, une boucle qui fabrique le HTML correspondant de l'autre. Les frameworks comme React automatisent ce travail, mais ils font exactement cela en dessous. > **Exercice 8.1** — Ajoutez à votre site un menu qui s'ouvre et se ferme au clic sur mobile, et une validation du formulaire de contact qui affiche un message d'erreur si le nom fait moins de trois caractères. # Projet complet : le site de la boutique Ce chapitre assemble tout ce qui précède en un site fonctionnel. Recopiez-le, faites-le tourner, puis modifiez-le pour qu'il corresponde à votre propre projet. ## La structure des fichiers ``` boutique/ ├── index.html ├── contact.html ├── style.css ├── script.js └── images/ └── wax.jpg ``` ## Le HTML ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Boutique Fatou — Tissus et couture à Dakar</title> <meta name="description" content="Vente de tissus wax et bazin, confection sur mesure."> <link rel="stylesheet" href="style.css"> </head> <body> <header class="entete"> <div class="conteneur entete__inner"> <a class="logo" href="index.html">Boutique Fatou</a> <button class="burger" id="burger" aria-label="Ouvrir le menu">☰</button> <nav class="nav" id="nav"> <a href="index.html">Accueil</a> <a href="#produits">Produits</a> <a href="contact.html">Contact</a> </nav> </div> </header> <main> <section class="hero"> <div class="conteneur"> <h1>Tissus choisis, confection sur mesure</h1> <p>Wax, bazin et lin sélectionnés avec soin. Livraison à Dakar sous 48 h.</p> <a class="bouton" href="contact.html">Commander</a> </div> </section> <section id="produits" class="conteneur section"> <h2>Nos produits</h2> <div class="grille" id="grille-produits"></div> </section> </main> <footer class="pied"> <div class="conteneur"> <p>© 2026 Boutique Fatou — Dakar, Sénégal</p> </div> </footer> <script src="script.js"></script> </body> </html> ``` Remarquez `aria-label` sur le bouton du menu : son contenu est un simple caractère, incompréhensible pour un lecteur d'écran. L'attribut fournit le libellé manquant. ## Le CSS ```css :root { --vert: #0B3D2E; --or: #C9A227; --texte: #2B2B2B; --fond: #FBFAF7; --gris: #E6E3DC; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--texte); background: var(--fond); } img { max-width: 100%; height: auto; display: block; } .conteneur { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* En-tête */ .entete { background: var(--vert); border-bottom: 3px solid var(--or); } .entete__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .logo { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: 0.02em; } .nav { display: none; } .nav.ouvert { display: block; } .nav a { display: block; color: #fff; text-decoration: none; padding: 8px 0; } .nav a:hover { color: var(--or); } .burger { background: none; border: 1px solid var(--or); color: var(--or); font-size: 1.2rem; padding: 4px 10px; cursor: pointer; } /* Hero */ .hero { background: var(--vert); color: #fff; padding: 64px 0; } .hero h1 { font-size: 2rem; margin: 0 0 12px; max-width: 18ch; } .hero p { max-width: 55ch; opacity: 0.9; } .bouton { display: inline-block; margin-top: 20px; background: var(--or); color: var(--vert); font-weight: 700; text-decoration: none; padding: 12px 24px; border-radius: 4px; } .bouton:hover { background: #d9b53c; } /* Grille de produits */ .section { padding: 48px 20px; } .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .carte { background: #fff; border: 1px solid var(--gris); border-top: 3px solid var(--or); padding: 20px; } .carte h3 { margin: 0 0 6px; color: var(--vert); } .carte .prix { font-weight: 700; } /* Pied de page */ .pied { background: var(--vert); color: #fff; padding: 24px 0; font-size: 0.9rem; } /* À partir de la tablette */ @media (min-width: 768px) { .burger { display: none; } .nav { display: flex; gap: 28px; } .hero h1 { font-size: 2.75rem; } } ``` ## Le JavaScript ```javascript // 1. Menu mobile const burger = document.querySelector("#burger"); const nav = document.querySelector("#nav"); burger.addEventListener("click", function () { nav.classList.toggle("ouvert"); }); // 2. Données des produits const produits = [ { nom: "Wax hollandais", prix: 12000, description: "Pagne 6 yards, motifs classiques." }, { nom: "Bazin riche", prix: 25000, description: "Qualité getzner, teinture à la main." }, { nom: "Lin naturel", prix: 9000, description: "Léger, idéal pour la saison chaude." }, { nom: "Voile brodé", prix: 15000, description: "Broderie fine, pour les grandes occasions." } ]; // 3. Affichage de la grille const grille = document.querySelector("#grille-produits"); function formaterPrix(montant) { return montant.toLocaleString("fr-FR") + " F CFA"; } function afficherProduits(liste) { grille.innerHTML = ""; liste.forEach(function (produit) { const carte = document.createElement("article"); carte.className = "carte"; carte.innerHTML = ` <h3>${produit.nom}</h3> <p>${produit.description}</p> <p class="prix">${formaterPrix(produit.prix)}</p> `; grille.appendChild(carte); }); } afficherProduits(produits); ``` ## Ce que ce code vous apprend Trois idées structurantes se cachent dans ces quelques lignes. **Les données sont séparées de l'affichage.** Le tableau `produits` d'un côté, la fonction `afficherProduits` de l'autre. Pour ajouter un produit, vous touchez aux données, pas au HTML. C'est le principe fondateur de tous les frameworks modernes. **Le CSS gère l'apparence, le JavaScript gère l'état.** Le menu s'ouvre parce qu'une classe change, pas parce que JavaScript bricole des styles. **Le mobile est le cas par défaut.** Le menu est caché et le titre est petit dans le CSS de base ; la media query n'intervient qu'à partir de 768px pour enrichir. > **Exercice 9.1** — Adaptez ce site à votre propre projet : changez les couleurs, les contenus, les produits. Puis ajoutez une fonction de filtrage : deux boutons « Moins de 15 000 F » et « Tous » qui rappellent `afficherProduits` avec une liste filtrée. # Mettre son site en ligne ## Le principe Votre dossier est prêt sur votre ordinateur. Pour qu'il devienne un site accessible, il faut le copier sur un serveur connecté en permanence et lui associer une adresse. Pour un site fait de fichiers HTML, CSS et JavaScript — ce qu'on appelle un **site statique** — cet hébergement est gratuit chez plusieurs fournisseurs, avec HTTPS inclus. ## Les options gratuites | Service | Points forts | |---|---| | **Netlify** | Glisser-déposer du dossier, mise en ligne en 30 secondes, formulaires inclus | | **Vercel** | Très rapide, excellent avec Git | | **GitHub Pages** | Gratuit et lié à votre dépôt de code | | **Cloudflare Pages** | Réseau mondial performant | Pour un premier déploiement, Netlify est le plus direct : créez un compte, allez sur la zone de dépôt, glissez-y votre dossier `boutique`. Quelques secondes plus tard, votre site est en ligne à une adresse du type `boutique-fatou.netlify.app`. ## Ajouter votre propre nom de domaine Un domaine coûte généralement entre 6 000 et 15 000 F CFA par an. Vous l'achetez chez un registraire (Namecheap, OVH, Gandi, ou un revendeur local pour un `.sn`), puis vous le pointez vers votre hébergeur en modifiant deux enregistrements DNS depuis leur interface. Chaque hébergeur documente précisément la manipulation. Comptez quelques heures avant que le changement soit visible partout dans le monde. ## Git et GitHub, en deux mots Git enregistre l'historique de votre code : chaque modification devient un point de sauvegarde auquel vous pouvez revenir. GitHub héberge ce code en ligne. Les quelques commandes qui couvrent 90 % de l'usage quotidien : ```bash git init # démarrer le suivi d'un projet git add . # préparer tous les fichiers modifiés git commit -m "Ajout du menu" # enregistrer un point de sauvegarde git push # envoyer sur GitHub ``` Deux raisons de vous y mettre tôt, même seul sur vos projets : vous ne perdrez plus jamais de travail, et votre profil GitHub deviendra votre portfolio le plus convaincant auprès d'un employeur ou d'un client. ## La liste de vérification avant de publier Passez cette liste avant chaque mise en ligne : - [ ] `<title>` et `<meta description>` remplis sur chaque page ; - [ ] la balise `viewport` présente ; - [ ] toutes les images ont un `alt` et pèsent moins de 200 Ko ; - [ ] le site testé sur un vrai téléphone, pas seulement dans le simulateur ; - [ ] tous les liens du menu fonctionnent ; - [ ] aucune erreur rouge dans la console ; - [ ] les contrastes sont lisibles en plein soleil ; - [ ] une favicon est en place ; - [ ] le site charge en moins de trois secondes sur connexion mobile. Ce dernier point est décisif. Testez avec l'outil PageSpeed Insights de Google, gratuit. Un site lourd fait fuir les visiteurs bien avant qu'ils aient lu votre première phrase. # Bien travailler : accessibilité, référencement, hygiène de code ## L'accessibilité Un site accessible est un site utilisable par tous, y compris par les personnes malvoyantes, malentendantes ou à mobilité réduite. Ce n'est pas une option à ajouter à la fin, c'est une manière d'écrire son HTML dès le départ. Les cinq gestes qui font l'essentiel du travail : 1. **Utiliser les bonnes balises.** Un bouton est un `<button>`, pas un `<div>` sur lequel on a collé un `onclick`. Le vrai bouton est automatiquement focusable au clavier et annoncé correctement. 2. **Décrire les images** avec des `alt` utiles. 3. **Lier chaque `label` à son champ**. 4. **Vérifier les contrastes.** Le texte doit avoir un rapport de contraste d'au moins 4,5:1 avec son fond. L'outil « Contrast Checker » de WebAIM le calcule en un instant. 5. **Naviguer au clavier.** Parcourez votre site avec la seule touche `Tab` : chaque élément interactif doit être atteignable, et l'élément actif doit être visible. Une remarque qui vaut d'être dite : ces cinq gestes améliorent l'expérience de *tout le monde*, pas seulement des personnes handicapées. Un bon contraste sert aussi à celui qui consulte son téléphone en plein soleil. ## Le référencement naturel Le SEO est un métier à part entière, mais les fondations tiennent en quelques points : - un `<title>` unique et descriptif par page, de 50 à 60 caractères ; - une `meta description` de 150 caractères environ, qui donne envie de cliquer ; - **un seul `<h1>`** par page, contenant le sujet réel ; - des URL lisibles : `/tissus-wax` plutôt que `/page?id=42` ; - un site rapide et responsive — Google en tient explicitement compte ; - des textes de liens explicites. Aucune astuce ne remplace un contenu utile et un site rapide. Méfiez-vous de toute personne qui vous promet la première place Google contre paiement. ## Écrire du code lisible Vous relirez votre propre code dans six mois sans en avoir le moindre souvenir. Écrivez pour cette personne future. - **Indentez systématiquement.** Deux espaces par niveau, ou laissez Prettier le faire. - **Nommez explicitement.** `prixTotal` plutôt que `pt`, `boutonEnvoyer` plutôt que `btn2`. - **Commentez le pourquoi, pas le quoi.** `// on force le recalcul sinon Safari ne redessine pas` est utile ; `// boucle sur les produits` ne l'est pas. - **Une fonction, une responsabilité.** - **Supprimez le code mort.** Ne gardez pas trente lignes commentées « au cas où » : Git s'en souvient pour vous. ## Comment résoudre un problème seul Vous passerez plus de temps à corriger qu'à écrire. C'est normal, c'est le métier. Voici une méthode qui fonctionne : 1. **Lisez le message d'erreur en entier.** Il contient le fichier et la ligne. La plupart des débutants ne le lisent pas. 2. **Vérifiez les évidences** : fichier enregistré ? chemin correct ? faute de frappe dans le nom de la classe ? majuscule oubliée ? 3. **Isolez.** Commentez la moitié du code. Si le problème disparaît, il est dans cette moitié. Recommencez. 4. **Affichez les valeurs** avec `console.log` là où vous supposez que tout va bien. 5. **Cherchez le message d'erreur** tel quel, en anglais, sur un moteur de recherche. Quelqu'un l'a déjà eu. 6. **Expliquez le problème à voix haute**, à un collègue ou à un objet. La moitié du temps, vous trouvez la réponse en formulant la question. L'IA peut vous aider, mais utilisez-la comme un professeur, pas comme un distributeur. Demandez-lui d'expliquer une erreur plutôt que de réécrire votre fichier. Le code qu'on n'a pas compris devient une dette qu'on paiera au triple le jour où il cassera. # Et après ? ## Ce que vous savez faire maintenant Structurer une page en HTML sémantique, la styliser et la rendre responsive en CSS, la rendre interactive en JavaScript, la mettre en ligne. C'est déjà suffisant pour livrer un site vitrine à un client réel. Ne sous-estimez pas ce niveau. Une part considérable des besoins réels — commerces, associations, artisans, professions libérales — s'arrête exactement là. ## Le chemin d'après Un ordre qui a fait ses preuves : 1. **Consolidez les bases.** Construisez trois ou quatre sites complets par vous-même, sans tutoriel. C'est l'étape que tout le monde veut sauter, et celle qui fait la différence. 2. **Git et GitHub** pour de bon, avec les branches. 3. **JavaScript avancé** : les méthodes de tableaux (`map`, `filter`, `reduce`), le code asynchrone (`fetch`, `async/await`), la consommation d'API. 4. **Un framework front-end.** React est le plus demandé sur le marché. Vue est plus doux à l'apprentissage. Ne les abordez qu'après avoir été à l'aise en JavaScript pur, sans quoi vous apprendrez des recettes sans comprendre la cuisine. 5. **Le back-end** : Node.js, PHP avec Laravel, ou Python. Ou un service comme Supabase ou Firebase, qui vous donne base de données et authentification sans écrire de serveur. 6. **Les bases de données** : SQL, la modélisation, les relations. ## Construire un portfolio Trois projets bien finis valent mieux que dix ébauches. Pour chacun : un site en ligne, un dépôt GitHub propre, et un fichier `README` qui explique le problème résolu, les choix techniques et ce que vous en avez appris. Cherchez de vrais utilisateurs. Proposez un site à une association de votre quartier, à un commerçant, à un artisan. Un projet avec des utilisateurs réels vous apprendra plus que dix exercices, et il fera une bien meilleure impression en entretien. ## Un dernier mot Le sentiment de ne rien comprendre pendant les premières semaines est universel. Il ne signale pas un manque d'aptitude, seulement que vous apprenez quelque chose de neuf. Les développeurs expérimentés cherchent encore sur internet plusieurs fois par jour ; ils ont simplement appris à chercher mieux. Une heure par jour, un projet à la fois, du code écrit à la main. Ça suffit. # Annexes ## Glossaire **API** — Interface permettant à un programme de dialoguer avec un autre, souvent pour récupérer des données. **Back-end** — Partie d'une application qui s'exécute sur le serveur. **Balise** — Marqueur HTML délimitant un élément, par exemple `<p>`. **Cache** — Stockage temporaire des fichiers par le navigateur pour accélérer les visites suivantes. **CDN** — Réseau de serveurs répartis dans le monde qui livrent les fichiers depuis le point le plus proche du visiteur. **Class** — Attribut HTML permettant de cibler plusieurs éléments en CSS. **DOM** — Représentation en mémoire de la page, manipulable en JavaScript. **Framework** — Ensemble d'outils et de conventions accélérant le développement (React, Laravel, Vue). **Front-end** — Partie d'une application qui s'exécute dans le navigateur. **Git** — Système de gestion de versions du code. **Hébergement** — Service qui stocke les fichiers d'un site et les rend accessibles. **JSON** — Format d'échange de données textuel, très proche des objets JavaScript. **Media query** — Règle CSS appliquée selon la taille de l'écran. **Responsive** — Se dit d'un site qui s'adapte à toutes les tailles d'écran. **Sémantique** — Usage de balises qui décrivent le sens du contenu. **Site statique** — Site composé de fichiers servis tels quels, sans traitement serveur. **UI / UX** — Interface utilisateur / expérience utilisateur. **Viewport** — Zone d'affichage visible du navigateur. ## Aide-mémoire CSS ```css /* Conteneur centré */ .conteneur { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* Centrer parfaitement */ .centre { display: flex; justify-content: center; align-items: center; } /* Grille auto-adaptative */ .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } /* Réinitialisation utile */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; display: block; } /* Transition douce */ .bouton { transition: background-color 0.2s ease; } /* Ombre discrète */ .carte { box-shadow: 0 1px 3px rgba(0,0,0,0.08); } ``` ## Aide-mémoire JavaScript ```javascript // Sélection document.querySelector(".classe"); document.querySelectorAll(".classe"); // Modification element.textContent = "texte"; element.classList.toggle("actif"); element.setAttribute("src", "image.jpg"); // Événements element.addEventListener("click", fonction); // Tableaux liste.forEach(fn); // parcourir liste.map(fn); // transformer liste.filter(fn); // filtrer liste.find(fn); // trouver le premier // Récupérer des données distantes fetch("https://api.exemple.com/produits") .then(function (reponse) { return reponse.json(); }) .then(function (donnees) { console.log(donnees); }); ``` ## Ressources pour continuer **Documentation de référence** - MDN Web Docs (`developer.mozilla.org/fr`) — la référence, en français, pour HTML, CSS et JavaScript. À consulter quotidiennement. - web.dev — les bonnes pratiques de performance et d'accessibilité, par Google. **Apprendre en pratiquant** - freeCodeCamp — parcours complet et gratuit, avec exercices. - The Odin Project — cursus exigeant, orienté projets. - Flexbox Froggy et Grid Garden — deux jeux pour maîtriser Flexbox et Grid en une heure chacun. - Frontend Mentor — maquettes réelles à reproduire, du plus simple au plus complexe. **Outils du quotidien** - Squoosh, TinyPNG — compression d'images. - Google Fonts — polices libres. - Coolors — génération de palettes de couleurs. - WebAIM Contrast Checker — vérification des contrastes. - PageSpeed Insights — mesure de performance. - Can I Use — compatibilité des fonctionnalités selon les navigateurs. **Trouver de l'aide** - Stack Overflow — la question a probablement déjà été posée. - Les communautés locales de développeurs, en présentiel ou sur les réseaux. Le réseau se construit avant d'en avoir besoin.