HTML, CSS & Responsive - Les fondamentaux du développement Web

Objectif : Comprendre le protocole HTTP et le cycle de vie d'une page web. Découvrir la structure de base d'un fichier HTML. Utiliser les balises sémantiques pour structurer un contenu de manière propre.

• Le fonctionnement du Web : serveurs, clients, requêtes HTTP et navigateurs.
• Anatomie d'un fichier HTML5 : la déclaration doctype, les balises <html>, <head> et <body>.
• Rôle et syntaxe des balises sémantiques modernes (<header>, <nav>, <main>, <section>, <article>, <footer>).
• Structuration du texte : titres (<h1> à <h6>), paragraphes (<p>), listes ordonnées et non ordonnées.
• Insertion sécurisée de liens hypertextes et d'images (attributs href, src et texte alternatif alt).

Atelier pratique : Prise en main de l'éditeur Visual Studio Code, configuration des extensions de développement et écriture du squelette d'une page web.

Cas métier : Création d'une page de profil professionnel structurée avec titres, paragraphes, listes ordonnées et intégration de liens hypertextes d'évitement.

Compétence acquise : Être capable de produire une structure web HTML5 sémantiquement correcte et lisible.

Livrable : Squelette de page HTML5 propre, validé par le W3C.

Objectif : Associer une feuille de style CSS à un document HTML. Appréhender les sélecteurs de base et les règles de priorité (cascade). Maîtriser le modèle de boîte (margins, paddings, borders, sizing).

• Syntaxe de base du CSS : sélecteurs, propriétés et valeurs.
• Intégration du CSS : feuilles de style externes, internes et styles en ligne (à proscrire).
• Les sélecteurs de base (balise, classe, identifiant) et l'effet de cascade (priorité des règles).
• Le modèle de boîte (Box Model) : contrôle des marges internes (padding), bordures (border) et marges externes (margin).
• Gestion des couleurs (HEX, RGB, HSL) et mise en forme de la typographie (polices système et Google Fonts).

Atelier pratique : Découverte des propriétés de typographie, de couleurs et mise en forme de boîtes.

Cas métier : Stylisation d'une carte de présentation produit (card) avec bordures arrondies, ombres portées et transitions au survol de la souris.

Compétence acquise : Savoir habiller graphiquement des structures HTML de manière uniforme et esthétique.

Livrable : Composant graphique stylisé et interactif au format web.

Objectif : Comprendre les principes des systèmes de mise en page unidirectionnels. Maîtriser les concepts d'axe principal et d'axe secondaire. Aligner et distribuer des éléments de façon dynamique dans l'espace.

• Le modèle de boîte flexible : concept du conteneur (flex container) et des éléments enfants (flex items).
• L'orientation de la grille flexible : flex-direction (row, column, row-reverse, column-reverse).
• Alignement sur l'axe principal avec justify-content (start, center, space-between, space-around, space-evenly).
• Alignement sur l'axe secondaire avec align-items et align-self.
• Gestion du passage à la ligne des éléments enfants avec flex-wrap et dimensionnement proportionnel (flex-grow, flex-shrink, flex-basis).

Atelier pratique : Manipulation des propriétés d'alignement et de distribution spatiale avec Flexbox.

Cas métier : Conception complète d'un menu d'en-tête (navigation navbar) adaptatif avec logo aligné à gauche et liens répartis à droite.

Compétence acquise : Être capable d'organiser des éléments d'interface de manière ordonnée et dynamique.

Livrable : Barre de navigation d'entreprise réutilisable et flexible.

Objectif : Maîtriser la mise en page sur deux dimensions (lignes et colonnes simultanées). Définir des zones de grille explicites et implanter des éléments à des positions précises. Concevoir des grilles complexes et fluides sans outils tiers.

• Concept du conteneur de grille (display : grid) et de l'anatomie de grille (lignes, colonnes, cellules, pistes).
• Définition explicite des pistes : grid-template-columns et grid-template-rows.
• Utilisation de l'unité flexible de fraction (fr) et de la fonction de répétition repeat().
• Espacement entre les cellules de grille avec la propriété gap.
• Positionnement des éléments enfants par coordonnées (grid-column, grid-row) et par zones nommées (grid-template-areas).

Atelier pratique : Utilisation des fractions, de la fonction de répétition et des zones de gabarit nommées.

Cas métier : Réalisation d'une mise en page de type portail d'actualités (header, barre latérale d'outils, zone de contenu principal et footer).

Compétence acquise : Être capable de découper l'espace d'une interface web selon des grilles robustes et modernes.

Livrable : Gabarit de page structurel complet (Grid template).

Objectif : Comprendre le concept de Responsive Web Design et la notion de viewport. Identifier les différents points de rupture (breakpoints) en fonction des terminaux. Utiliser les Media Queries pour surcharger les règles CSS existantes.

• L'importance du responsive dans l'indexation mobile et l'expérience utilisateur.
• Déclaration de la balise <meta name="viewport"> et son impact sur l'affichage mobile.
• Syntaxe des directives médias : @media screen and (min-width : ...) et @media screen and (max-width : ...).
• Détermination intelligente des points de rupture standards (smartphones, tablettes, ordinateurs de bureau).
• Unités relatives adaptées au responsive (pourcentages %, em, rem, vw, vh).

Atelier pratique : Écriture et structuration des blocs médias adaptatifs dans la feuille de style.

Cas métier : Adaptation d'une galerie de photos et de textes pour qu'elle s'affiche sur une seule colonne sur mobile et sur 3 colonnes sur grand écran.

Compétence acquise : Savoir rendre n'importe quelle interface web compatible et fluide sur tout type de terminal.

Livrable : Feuille de style CSS responsive optimisée.

Objectif : Valider la conformité de son code à l'aide des outils en ligne (W3C Validators). Utiliser les outils d'inspection des navigateurs (Chrome/Firefox DevTools) pour analyser la mise en page. Assembler toutes les notions apprises au cours des 3 jours dans un projet web complet.

• Utilisation du validateur officiel du W3C pour corriger les erreurs de syntaxe HTML et CSS.
• Exploration des DevTools du navigateur : inspection des boîtes, débogage du Flexbox/Grid et émulation d'appareils mobiles.
• Analyse des indicateurs de performance et d'accessibilité avec l'outil d'audit automatique Lighthouse.
• Optimisation des ressources : compression d'images (format WebP) et gestion du chargement des polices.

Atelier pratique : Session collective d'inspection, de chasse aux bugs et d'optimisation de l'affichage sur une page témoin.

Cas métier : Assemblage d'un site web de type « Landing Page » de présentation de produit complet, structuré, stylisé, responsive et validé techniquement.

Compétence acquise : Être capable de livrer un site web fini, optimisé, fonctionnel et conforme aux normes modernes du Web.

Livrable : Un site web de type « Landing Page » autonome, entièrement responsive et validé.

Objectif : Réutiliser en autonomie le HTML sémantique, les sélecteurs, le modèle de boîte, Flexbox et Grid des journées ESSENTIEL pour intégrer une page réelle.

• Réactiver les acquis des journées ESSENTIEL : rappel visuel et quiz sur les balises sémantiques, la cascade, le modèle de boîte, Flexbox et Grid.
• Passer d'une maquette graphique à une page structurée et mise en page : découpage en zones, choix entre Flexbox et Grid.

Atelier pratique : Entraînement en binômes : relire le code d'un autre binôme et repérer les balises non sémantiques, les styles en ligne et les mises en page bricolées, avec correction croisée.

Cas métier : Le tableau de bord d'une application interne (cas fil rouge) - À partir d'une maquette, les participants intègrent la page complète : structure HTML sémantique, mise en page générale en Grid, composants alignés en Flexbox, puis présentent leur intégration au groupe.

Compétence acquise : Savoir intégrer en autonomie une page web complète, propre et sémantique.

Livrable : La page intégrée (HTML et CSS), construite avec les modèles des journées ESSENTIEL.

Objectif : Mettre à l'épreuve l'adaptation aux écrans, la validation du code et les audits de performance et d'accessibilité avant la mise en ligne.

• Retour sur le viewport, les media queries, les unités relatives, le validateur W3C, les DevTools et Lighthouse vus les jours précédents.
• Adapter la page à tous les écrans, puis la vérifier et l'améliorer avec les outils d'audit.

Atelier pratique : Exercice guidé : tester la page sur plusieurs tailles d'écran avec les DevTools, corriger les ruptures de mise en page et comparer les solutions entre participants.

Cas métier : La mise en ligne de la page (cas fil rouge) - Chaque participant rend la page du matin adaptée au mobile, la valide avec le W3C, corrige les points relevés par Lighthouse (performance, accessibilité, images, polices) et présente ses scores avant et après au groupe et au formateur.

Compétence acquise : Savoir livrer une page responsive, valide et optimisée.

Livrable : La page finalisée et son rapport d'audit, issus de la méthode des journées ESSENTIEL.