Formation : HTML et CSS : Les bases du web

Comprendre comment fonctionne le web et installer ses outils de travail.

• Comprendre le fonctionnement du web : navigateur, serveur, adresse (URL), nom de domaine et hébergement
• Situer le rôle de HTML, de CSS et de JavaScript dans une page web
• Prendre en main un éditeur de code (Visual Studio Code) et un serveur de test local
• Organiser les dossiers et nommer les fichiers d’un projet web
• Utiliser les outils de développement du navigateur pour inspecter une page

Écrire ses premières pages avec les balises essentielles.

• Comprendre la structure d’un document HTML (doctype, head, body, encodage, langue, balise viewport)
• Utiliser balises, attributs et imbrication ; écrire du code propre et indenté
• Structurer le texte : titres, paragraphes, listes, mises en valeur
• Créer des liens internes, externes et des ancres ; comprendre les chemins relatifs et absolus
• Insérer des images : formats, poids, texte alternatif

Structurer une page de façon claire et accessible.

• Utiliser les balises sémantiques : header, nav, main, section, article, aside, footer
• Construire un plan de page cohérent avec une hiérarchie de titres logique
• Utiliser figure et figcaption, div et span à bon escient
• Créer des tableaux de données accessibles
• Intégrer de l’audio, de la vidéo et des contenus externes (cartes, vidéos en ligne)

Créer des formulaires clairs et accessibles.

• Créer un formulaire : champs de texte, choix multiples, listes déroulantes, zone de texte, boutons
• Associer chaque champ à son libellé et regrouper les champs
• Utiliser les types de champs HTML5 (e-mail, nombre, date…)
• Utiliser la validation native du navigateur (champs obligatoires, formats)
• Comprendre le rôle du serveur dans le traitement d’un formulaire

Mettre en forme une page avec les règles CSS.

• Relier du CSS à une page HTML (feuille de style externe) et comprendre la syntaxe d’une règle
• Utiliser les sélecteurs : balise, classe, identifiant, descendants, pseudo-classes
• Comprendre la cascade, l’héritage et la spécificité pour résoudre les conflits de styles
• Utiliser les unités (px, %, rem, vw) et les couleurs (hexadécimal, RGB, HSL)
• Mettre en forme le texte, les polices web, les arrière-plans et les bordures

Comprendre comment le navigateur calcule la taille et la position des éléments.

• Comprendre le modèle de boîte : contenu, marge intérieure, bordure, marge extérieure
• Maîtriser les propriétés box-sizing, width, height et overflow
• Distinguer les éléments de type bloc et en ligne (propriété display)
• Utiliser le positionnement : relative, absolute, fixed, sticky et z-index
• Centrer et aligner des éléments avec les marges

Créer des mises en page souples sur un axe.

• Comprendre le principe du conteneur flex et des axes principal et secondaire
• Aligner et répartir des éléments (justify-content, align-items, gap)
• Gérer le retour à la ligne et la taille des éléments (flex-wrap, flex-grow, flex-shrink, flex-basis)
• Réaliser une barre de navigation, une rangée de cartes et un centrage parfait

Créer des mises en page en deux dimensions.

• Définir une grille : colonnes, lignes, unité fr, espacement
• Placer les éléments dans la grille, y compris avec des zones nommées
• Créer des grilles adaptatives avec auto-fit et minmax
• Choisir entre Flexbox et Grid selon le besoin

Adapter un site aux mobiles, aux tablettes et aux ordinateurs.

• Comprendre l’approche mobile first et le rôle de la balise viewport
• Utiliser les media queries et choisir ses points de rupture
• Rendre les images adaptatives (max-width, srcset, picture) et utiliser des unités fluides (clamp)
• Créer un menu de navigation adapté au mobile
• Tester un site sur différentes tailles d’écran avec les outils de développement

Soigner le rendu et la qualité du code.

• Ajouter des effets : survol (hover), focus, transitions, ombres et dégradés
• Utiliser les variables CSS pour centraliser couleurs et espacements
• Respecter les contrastes et rendre le focus clavier visible
• Utiliser des icônes en SVG
• Organiser et commenter son CSS ; adopter une convention de nommage

Finaliser, valider et publier un site web, puis évaluation des acquis.

• Valider son code HTML et CSS avec les outils de validation
• Optimiser le poids des images et vérifier les performances de base
• Mettre un site statique en ligne (hébergement, transfert de fichiers)
• Projet final : finaliser un site vitrine responsive de plusieurs pages à partir d’un brief
• Évaluation des acquis selon une grille de critères et bilan de la formation