3 jours
Perfectionnement / Avancé
Présentiel Classe à distance
AC
Partager
Accueil › Formations › Informatique › Langages et développement › Développeur Web HTML, CSS et JavaScript › HTML, CSS, Responsive - Création de pages Web
Validez les prérequis
Afin de vérifier que vous disposez bien des prérequis nécessaires à cette formation, nous vous invitons à réaliser ce test.
Temps estimé : 4 minutes.
Passer le testObjectifs de formation
A l'issue de cette formation, vous serez capable de :
- Décrire la structuration d'une page HTML 5
- Ajouter des styles CSS aux éléments d'une page
- Utiliser les blocs et les tableaux
- Créer des formulaires avec Web Forms 2
- Tester les nouveautés HTML 5 et CSS 3
- Exploiter les "media queries" pour s'adapter aux tailles d'écran
- Expliquer la philosophie des framemorks HTML / CSS pour le développement responsive.
Certification
ENI Créer et mettre en forme des pages Web (HTML5 et CSS3) (+ 180€)Programme de votre formation
-
#
M2I START AVANT VOTRE FORMATION
Contextualisation du projet de formation et prise en compte des besoins de chacun
- Positionnement initial de l’apprenant par rapport aux objectifs
- Définition des priorités et des objectifs personnels de l’apprenant
- Vidéos de mise en situation
- Accès au Chat interactif myM2i pour interagir avec les membres de son groupe
-
#
M2I LIVE VOTRE FORMATION ANIMÉE PAR NOTRE EXPERT ¹
Programme
Jour 1 - Matin
Le contexte du Web moderne
- Comprendre la diversité des terminaux : mobile, tablette, desktop, TV, liseuse
- Distinguer périphériques, OS et navigateurs
- Situer les standards du Web : HTML, CSS, JavaScript, evergreen browsers
Exemple de travaux pratiques (à titre indicatif)
- Explorer une page existante avec différents user agents et tailles d'écran
Structure d'une page HTML
- Déclarer un document HTML : doctype, encodage, langue
- Renseigner les meta essentielles : viewport, description, Open Graph, theme-color
- Comprendre la hiérarchie et l'imbrication des éléments
Exemple de travaux pratiques (à titre indicatif)
- Ecrire le squelette d'une page conforme avec ses meta essentielles
Balises sémantiques
- Structurer le contenu avec header, nav, main, section, article, aside, footer
- Utiliser les niveaux de titres (h1 à h6) avec cohérence
- Savoir quand utiliser div ou span, et quand préférer une balise sémantique
Exemple de travaux pratiques (à titre indicatif)
- Refondre une page constituée uniquement de div en HTML sémantique
Jour 1 - Après-midi
Texte, listes et liens
- Mettre en forme du texte : paragraphes, citations, code
- Structurer des listes : ordonnées, non ordonnées, de définitions
- Créer des liens internes et externes, gérer le focus et le ciblage (target, rel)
Exemple de travaux pratiques (à titre indicatif)
- Rédiger un article structuré avec listes, citations et navigation interne
Tableaux de données
- Construire un tableau de données : table, thead, tbody, th, td, caption
- Utiliser les tableaux uniquement pour des données tabulaires (jamais pour la mise en page)
- Améliorer l'accessibilité : scope, headers
Exemple de travaux pratiques (à titre indicatif)
- Présenter un planning ou un comparatif sous forme de tableau accessible
Médias
- Intégrer des images responsives : srcset, sizes, picture, attributs alt
- Intégrer audio et vidéo : track et sous-titres
- Afficher du SVG inline ou en image
Exemple de travaux pratiques (à titre indicatif)
- Enrichir une page avec image responsive, vidéo sous-titrée et icône SVG
Formulaires natifs
- Choisir le bon type de champ : text, email, url, tel, number, date, color, range
- Utiliser placeholder, datalist, fieldset et legend
- Valider côté client avec les attributs natifs : required, pattern, min / max
- Styliser les états : :user-valid, :user-invalid, :focus-visible
Exemple de travaux pratiques (à titre indicatif)
- Construire un formulaire de contact validé sans JavaScript
Jour 2 - Matin
Syntaxe et sélecteurs CSS
- Comprendre la syntaxe d'une règle CSS : sélecteur, propriété, valeur
- Maîtriser les sélecteurs essentiels : type, classe, id, descendant, enfant
- Exploiter les pseudo-classes courantes : :hover, :focus-visible, :first-child, :nth-child, :has()
- Regrouper avec :is() et :where()
Exemple de travaux pratiques (à titre indicatif)
- Styliser une navigation avec différents sélecteurs et pseudo-classes
Cascade, spécificité et héritage
- Comprendre la cascade : origine, ordre, spécificité
- Prévoir l'héritage des propriétés
- Lier les styles à une page : feuille externe, balise style, attribut style
Exemple de travaux pratiques (à titre indicatif)
- Résoudre des conflits de cascade dans une page existante
Couleurs, typographie et fonds
- Exprimer une couleur : noms, hex, rgb, hsl, oklch (introduction)
- Gérer la typographie : font-family, line-height, hiérarchie des tailles
- Appliquer des fonds, dégradés et bordures
Exemple de travaux pratiques (à titre indicatif)
- Appliquer une charte graphique cohérente à une page de présentation
Custom properties (variables CSS)
- Déclarer et utiliser des custom properties : --nom, var(), fallback
- Centraliser une charte avec les variables CSS
- Comprendre la portée et l'héritage des custom properties
Exemple de travaux pratiques (à titre indicatif)
- Refondre la charte de la TP précédente en custom properties
Le modèle de boîte
- Maîtriser le box model : content, padding, border, margin
- Choisir box-sizing pour des tailles prévisibles
- Distinguer éléments block, inline et inline-block : propriété display
Exemple de travaux pratiques (à titre indicatif)
- Construire une carte produit avec espacement et bordures maîtrisés
Jour 2 - Après-midi
Flexbox
- Aligner et distribuer en une dimension : flex-direction, justify-content, align-items
- Gérer l'espacement avec gap et le retour à la ligne avec flex-wrap
- Résoudre des patterns courants : barre de navigation, centrage, holy grail
Exemple de travaux pratiques (à titre indicatif)
- Reproduire un header complet avec logo, navigation et actions alignés
CSS Grid
- Composer une grille à deux dimensions : grid-template-columns, grid-template-rows
- Placer des éléments : grid-area, span
- Créer des grilles fluides : minmax(), auto-fit, auto-fill, fr, gap
Exemple de travaux pratiques (à titre indicatif)
- Réaliser une galerie d'articles fluide en CSS Grid
Positionnement
- Comprendre le flux normal
- Positionner ponctuellement : relative, absolute, fixed, sticky
- Limiter l'usage de float au wrap d'images
Exemple de travaux pratiques (à titre indicatif)
- Ajouter un menu sticky et un bouton fixe à une page
Jour 3 - Matin
Stratégie Mobile First
- Adopter une approche progressive : base mobile, surcharges au-dessus
- Eviter les pièges classiques : duplication, surcharges fragiles
Exemple de travaux pratiques (à titre indicatif)
- Convertir un site desktop-first en mobile-first
Media Queries modernes
- Utiliser la syntaxe range
- Détecter les préférences utilisateur : prefers-color-scheme, prefers-reduced-motion
- Gérer le viewport via la balise meta
Exemple de travaux pratiques (à titre indicatif)
- Ajouter un dark mode automatique et adapter les breakpoints
Unités fluides
- Choisir les unités selon le contexte : rem, em,%, vw, vh, dvh
- Composer des valeurs fluides avec clamp() pour la typographie et l'espacement
- Maîtriser aspect-ratio pour préserver les proportions
Exemple de travaux pratiques (à titre indicatif)
- Appliquer une typographie fluide à un article long
Container Queries (introduction)
- Adapter un composant à son conteneur plutôt qu'au viewport : @container
- Découvrir un cas d'usage simple
Exemple de travaux pratiques (à titre indicatif)
- Rendre une carte produit adaptive selon la largeur de son emplacement
Accessibilité numérique
- Comprendre le RGAA et les enjeux d'un site accessible
- S'appuyer sur la sémantique HTML pour l'accessibilité native
- Enrichir avec ARIA quand nécessaire : états et propriétés
- Soigner contrastes et focus
- Auditer une page avec axe DevTools ou Lighthouse
Exemple de travaux pratiques (à titre indicatif)
- Auditer et corriger l'accessibilité d'une page existante
Jour 3 - Après-midi
Frameworks CSS modernes
- Situer les frameworks dominants : Tailwind CSS (utility-first), Bootstrap (composants)
- Choisir selon le projet : démarrage rapide vs design custom
- Intégrer un framework dans une page existante
Exemple de travaux pratiques (à titre indicatif)
- Intégrer Tailwind CSS et reproduire un layout de référence
Outillage de qualité
- Utiliser les DevTools : inspecteur, responsive mode, computed styles, Grid / Flexbox debugger
- Mesurer la qualité avec Lighthouse : performance, accessibilité, SEO, bonnes pratiques
- Valider le HTML et le CSS avec les validateurs W3C
Exemple de travaux pratiques (à titre indicatif)
- Auditer une page avec Lighthouse et appliquer trois améliorations prioritaires
Bonnes pratiques de production
- Optimiser les images (formats modernes, dimensions adaptées, lazy loading)
- Minimiser les ressources et soigner le chargement
- Structurer un projet : fichiers, dossiers, conventions de nommage
Exemple de travaux pratiques (à titre indicatif)
- Finaliser un mini-site de présentation responsive, accessible et performant, avec audit Lighthouse à l'appui
Certification (en option)
- Prévoir l'achat de la certification en supplément
- L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
- La durée moyenne est de 1h00
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
-
#
M2I BOOST APRÈS VOTRE FORMATION
Réactivation et consolidation des acquis en situation de travail
- 30 jours d’accompagnement personnalisé sur myM2i inclus ²
- Ressources Boosters (Abonnement au M2i’Mag Soft Skills, formations offertes, invitations aux conférences d’actualité…)
- ¹ Les actions et les outils présentés dans ce programme le sont à titre indicatif et peuvent faire l’objet d'adaptation selon les niveaux, prérequis et besoins des apprenants. Les compétences clés de ce programme sont traitées à raison d'une compétence par demi-journée de formation.
- ² Sur myM2i, pendant 30 jours post-fin de formation, les apprenants disposent d’une messagerie sécurisée pour échanger, dans la limite de 4 sollicitations, avec leur formateur.
Modalités, méthodes et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (blended-learning, e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour certains cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2I, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation et/ou une certification (proposée en option)
Accessibilité de la formation
Le groupe M2I s'engage pour faciliter l'accessibilité de ses formations. Toutes nos formations sont accessibles aux personnes en situation de handicap : les détails de l'accueil des personnes sont consultables sur la page Politique Handicap.
Modalités et délais d’accès à la formation
Les formations M2I sont disponibles selon les modalités proposées sur la page programme. Les inscriptions sont possibles jusqu'à 48 heures ouvrées avant le début de la formation. Dans le cas d'une formation financée par le CPF, ce délai est porté à 12 jours ouvrés.
