Dans la fenêtre d’impression, choisissez « Enregistrer en PDF » comme destination.

Réf. WEB-FND

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

Langages & Développement Logiciel

Durée

21 à 35 heures (3 à 5 jours) selon le format

Modalités

Présentiel, Classe à distance

Reconnaissance

Formation non certifiante (attestation de fin de formation)

Format de vente

Inter-entreprise ou Intra-entreprise

Délai d’accès

Inter : jusqu’à 5 jours ouvrés avant la session ; intra : en moyenne 15 jours ouvrés après l’acceptation du devis

Tarif intra

Sur devis

Pourquoi suivre cette formation

HTML5 et CSS3 sont les langages fondamentaux de la création Web. Cette formation vous transmet les méthodes pratiques pour concevoir des sites Responsive, structurés selon les normes W3C et accessibles sur tous les écrans.

À l’issue de cette formation, les participants seront capables de

Structurer une page web de manière sémantique selon les normes du W3C en HTML5
Styliser et mettre en page des éléments graphiques complexes en utilisant CSS3
Concevoir des interfaces adaptatives (Responsive) fluides grâce au Flexbox, CSS Grid et aux Media Queries
Intégrer des médias (images optimisées, vidéos, polices web) sans dégrader les performances
Assurer la compatibilité de l'affichage sur les principaux navigateurs du marché (Chrome, Firefox, Safari, Edge)

Formats proposés

ESSENTIELFondamentaux21 heures (3 jours)2 040 € HTpar participant (inter-entreprises)

ACTIONImmersion28 heures (4 jours)2 720 € HTpar participant (inter-entreprises)

IMPACTTerrain35 heures (5 jours) · dont une journée en décalé3 535 € HTpar participant (inter-entreprises)

Chaque format reprend le précédent et y ajoute des journées.

Public visé

Futurs développeurs front-end, webmasters, designers UI/UX, chargés de communication, chefs de projet web, ou toute personne souhaitant maîtriser la création de pages web.

Prérequis

Maîtriser l'environnement informatique Windows ou macOS (gestion des fichiers, utilisation d'un navigateur web). Aucun prérequis en programmation n'est demandé.

Prérequis techniques à distance

La classe virtuelle se tient sur Microsoft Teams : AMBIA fournit à chaque participant un compte pour la durée de la formation. En intra-entreprise, elle peut aussi se tenir sur l’outil que l’entreprise utilise déjà, par exemple Zoom ou Google Meet.

Le participant se connecte depuis un ordinateur équipé d’une caméra, d’un micro, d’un accès à internet et d’un navigateur à jour, dans un lieu calme. Si la formation le demande, le formateur donne accès à un poste de travail à distance, depuis le navigateur.

Pendant la formation, l’assistance technique répond à support@ambia-skills.fr.

Objectifs pédagogiques

Identifier le rôle respectif de HTML5, CSS3, et les spécifications du Responsive Design. Expliquer le fonctionnement du modèle de boîte CSS (margins, paddings, borders). Rédiger un code sémantique HTML5 et des règles de style CSS3 valides. Inspecter et corriger le code source d'une page à l'aide des outils de développement des navigateurs (DevTools). Tester la compatibilité et la réactivité d'un site sur différents terminaux physiques et virtuels. Réaliser une page web complète, esthétique et entièrement responsive de manière autonome.

Programme détaillé

Jour 1ESSENTIEL

Matin

Structure et Sémantique d'une page Web (HTML5)

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.

Après-midi

Introduction au Style et au Modèle de Boîte (CSS3)

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.

Jour 2ESSENTIEL

Matin

Mise en page moderne avec Flexbox

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.

Après-midi

Mise en page bidimensionnelle avec CSS Grid

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).

Jour 3ESSENTIEL

Matin

Principes et Outils du Responsive Design (Media Queries)

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.

Après-midi

Outils de validation, d'audit et intégration finale

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é.

Jour 4ACTION

Matin

De la structure HTML à l'action : intégrer une page complète à partir d'une maquette

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.

Après-midi

Éprouver son responsive et ses audits en simulation de mise en ligne

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.

Jour 5 · en décaléIMPACT

Matin

Audit du code HTML/CSS de l'entreprise et nettoyage de la dette technique

Analyser les feuilles de style CSS réelles de l'entreprise et rationaliser le code.

Diagnostic du codebase Web de l'entreprise. Suppression du CSS mort, refonte des sélecteurs complexes et mise en place d'une méthodologie de nommage propre (BEM).

Après-midi

Co-construction de la charte d'intégration et du Design System CSS

Formaliser une bibliothèque de composants CSS réutilisables par l'équipe.

Création du kit d'intégration d'entreprise. Création de la bibliothèque de composants UI (boutons, cartes, formulaires) et documentation des règles d'intégration.

Les ateliers et cas métier de ce programme pourront être adaptés par le consultant-formateur selon les besoins, le niveau et les prérequis des participants, pour favoriser l’atteinte des objectifs pédagogiques.

Méthodes et moyens pédagogiques

Méthodes mobilisées

Pédagogie active axée sur la manipulation permanente, démonstrations guidées, ateliers d'ancrage progressifs et corrections collectives pas-à-pas pour sécuriser les bases et installer durablement les bons automatismes.

Moyens techniques

Un poste informatique individuel par participant, éditeur de code moderne (Visual Studio Code), outils d'inspection web des navigateurs, accès aux espaces numériques AMBIA et mise à disposition des fichiers d'exercices d'application.

Moyens humains

Formation animée par un consultant-formateur expert, développeur web senior en activité et spécialiste des technologies front-end et des standards d'accessibilité numérique.

Modalités d’évaluation

Évaluation diagnostique

Questionnaire de positionnement technique adressé 15 jours avant la session pour évaluer les connaissances de base sur l'environnement web.

Évaluation formative

Exercices d'application progressifs et ateliers d'ancrage thématiques tout au long des trois jours.

Évaluation sommative

Questionnaire de validation des acquis sous forme de QCM en fin de formation et contrôle de la conformité du code du projet de synthèse de la page web réalisée.

Suivi

Feuilles de présence signées par demi-journée, en présentiel comme à distance.
Attestation de fin de formation remise à chaque stagiaire, mentionnant les objectifs, la nature, la durée et les résultats de l’évaluation.
Certificat de réalisation adressé au client ou au financeur.
Questionnaire de satisfaction remis à l’issue de la formation.

Délai d’accès

Inter-entreprises : L’inscription est possible jusqu’à 5 jours ouvrés avant le début de la session, sous réserve des places disponibles.

Intra-entreprise : La formation débute en moyenne 15 jours ouvrés après l’acceptation du devis.

Ce délai peut être adapté selon la disponibilité des sessions, le positionnement du stagiaire et, le cas échéant, l’instruction du dossier de prise en charge par le financeur.

Accessibilité handicap

Nos parcours sont adaptables aux personnes en situation de handicap. Contactez notre référent pour l'étude des aménagements.

Référent handicap : accessibilite@ambia-skills.fr. Aucune reconnaissance de la qualité de travailleur handicapé ni aucun justificatif médical n’est exigé.

Indicateurs de résultats

Indicateurs publiés à partir de 3 avis.

Mode de calcul : www.ambia-skills.fr/notre-approche#notes