Formation HTML/CSS

Formation HTML/CSS – Niveau 1 : créer et mettre en forme des pages web

Cette formation permet d’acquérir les fondamentaux du HTML et du CSS afin de créer, structurer et mettre en forme des pages web. Les participants apprennent à utiliser un HTML sémantique, à appliquer des styles CSS et à construire des mises en page adaptées aux différents formats d’écran. La formation privilégie la pratique afin de permettre aux participants de comprendre, écrire, modifier et corriger eux-mêmes du code HTML et CSS. L’utilisation de l’intelligence artificielle est également abordée comme outil d’assistance à la compréhension, à la création et au diagnostic du code.

Jour 1 – Comprendre le Web et créer ses premières pages HTML

• Comprendre le fonctionnement général d’un site web
• Comprendre la relation entre navigateur, serveur et fichiers web
• Identifier le rôle du HTML, du CSS et de JavaScript
• Comprendre la structure d’un document HTML
• Créer son premier fichier HTML
• Utiliser un éditeur de code
• Afficher et tester une page dans le navigateur
• Comprendre les balises, éléments et attributs

Structurer les contenus avec HTML

• Créer des titres et sous-titres
• Créer des paragraphes
• Mettre en valeur certains contenus
• Créer des listes ordonnées et non ordonnées
• Créer des liens internes et externes
• Créer des ancres
• Comprendre les chemins relatifs et absolus
• Organiser correctement ses fichiers et dossiers

Intégrer des images et médias

• Insérer une image
• Comprendre les principaux formats d’image
• Renseigner correctement l’attribut alt
• Comprendre les dimensions et proportions
• Créer une image cliquable
• Comprendre les principes des images responsives
• Intégrer des contenus multimédias lorsque cela est pertinent

Créer une structure HTML sémantique

• Comprendre l’intérêt du HTML sémantique
• Utiliser header, main, nav, section, article, aside et footer
• Structurer correctement les différentes zones d’une page
• Hiérarchiser les titres
• Comprendre l’impact de la structure sur l’accessibilité et le référencement
• Éviter les principales erreurs de structure HTML

Créer des tableaux et formulaires

• Créer un tableau de données simple
• Structurer lignes, colonnes et en-têtes
• Créer un formulaire HTML
• Utiliser les principaux types de champs
• Créer des labels
• Créer des listes déroulantes
• Ajouter des cases à cocher et boutons radio
• Créer un bouton d’envoi
• Comprendre les bonnes pratiques d’accessibilité des formulaires

Jour 2 – Mettre en forme les pages avec CSS

• Comprendre le rôle du CSS
• Découvrir la syntaxe CSS
• Lier une feuille de style à une page HTML
• Comprendre les sélecteurs
• Utiliser les sélecteurs de balise, classe et identifiant
• Comprendre les sélecteurs combinés
• Découvrir les pseudo-classes et pseudo-éléments
• Comprendre la cascade, l’héritage et la spécificité

Mettre en forme les textes et éléments graphiques

• Définir les couleurs
• Modifier les polices et tailles de texte
• Gérer graisse, style et alignement
• Définir l’interlignage et les espacements
• Utiliser des polices web
• Créer des arrière-plans
• Créer des bordures
• Ajouter des ombres simples
• Créer des effets au survol

Comprendre le modèle de boîte CSS

• Comprendre width et height
• Utiliser margin et padding
• Comprendre les bordures
• Utiliser box-sizing
• Comprendre le comportement des éléments block et inline
• Maîtriser les dimensions et espacements d’un élément

Positionner les éléments

• Comprendre le flux normal d’une page
• Utiliser les différentes valeurs de position
• Comprendre relative et absolute
• Utiliser fixed et sticky lorsque cela est pertinent
• Comprendre la superposition des éléments
• Utiliser z-index

Jour 3 – Flexbox, Responsive Design et création d’une page complète

• Comprendre les principes de Flexbox
• Créer un conteneur flexible
• Organiser les éléments horizontalement et verticalement
• Gérer alignements et espacements
• Modifier l’ordre des éléments
• Créer une navigation avec Flexbox
• Créer des colonnes et cartes responsives
• Identifier les situations adaptées à Flexbox

Découvrir CSS Grid

• Comprendre le principe de CSS Grid
• Créer une grille simple
• Définir lignes et colonnes
• Gérer les espacements
• Positionner des éléments dans la grille
• Comprendre les différences entre Grid et Flexbox

Créer des pages Responsive

• Comprendre l’approche Mobile First
• Utiliser le viewport
• Comprendre les unités relatives
• Créer des mises en page fluides
• Utiliser les Media Queries
• Adapter la navigation aux différentes tailles d’écran
• Adapter images et contenus
• Tester les principaux breakpoints
• Contrôler l’affichage sur smartphone, tablette et ordinateur

Utiliser les outils de développement du navigateur

• Inspecter une page web
• Identifier la structure HTML
• Identifier les règles CSS appliquées
• Modifier temporairement une propriété
• Identifier une règle CSS écrasée
• Tester différents formats d’écran
• Diagnostiquer les problèmes simples d’affichage

Utiliser l’intelligence artificielle comme assistant HTML/CSS

• Demander l’explication d’un fragment de code
• Utiliser l’IA pour rechercher une erreur simple
• Obtenir une proposition de correction
• Créer une première structure HTML à partir d’un besoin
• Obtenir des propositions de règles CSS
• Demander une adaptation responsive
• Contrôler la qualité et la pertinence du code généré
• Comprendre et tester le code avant de l’utiliser

Atelier pratique – Créer une page web responsive

• Définir la structure de la page
• Créer le document HTML
• Structurer les différentes zones avec des balises sémantiques
• Intégrer textes, liens et images
• Créer la feuille de style
• Définir l’identité visuelle
• Créer la mise en page avec Flexbox ou Grid
• Adapter la page aux différents écrans
• Tester et corriger les problèmes d’affichage
• Contrôler la qualité générale du code

Formation HTML/CSS – Niveau 2 : Responsive Design et CSS avancé

Cette formation s’adresse aux personnes maîtrisant déjà les fondamentaux du HTML et du CSS et souhaitant approfondir la création d’interfaces web modernes et responsives. Les participants développent leurs compétences en Flexbox, CSS Grid, Responsive Design, sélecteurs avancés, variables CSS, animations et organisation du code. Une attention particulière est portée à l’accessibilité, à la maintenabilité du CSS, aux outils de diagnostic et à l’adaptation des interfaces aux différents formats d’écran. L’intelligence artificielle est utilisée comme assistant pour analyser, expliquer, corriger et optimiser du code, tout en conservant la maîtrise des solutions proposées.

Jour 1 – CSS avancé et mises en page modernes

• Réviser les mécanismes essentiels de CSS
• Approfondir cascade, héritage et spécificité
• Comprendre l’ordre d’application des règles
• Identifier les conflits de styles
• Éviter l’utilisation excessive de !important
• Améliorer la lisibilité et l’organisation du code

Utiliser les sélecteurs avancés

• Utiliser les sélecteurs d’attributs
• Utiliser les combinateurs
• Approfondir les pseudo-classes
• Utiliser :first-child, :last-child et :nth-child()
• Découvrir :not(), :is() et :where()
• Comprendre les possibilités de :has() selon les besoins
• Utiliser ::before et ::after
• Créer des composants sans multiplier inutilement les classes

Approfondir Flexbox

• Comprendre précisément les axes principal et secondaire
• Gérer l’alignement des éléments
• Utiliser flex-grow, flex-shrink et flex-basis
• Gérer le retour à la ligne
• Créer des composants flexibles
• Créer des navigations responsives
• Créer des cartes et listes de contenus
• Résoudre les problèmes courants liés à Flexbox

Créer des mises en page avec CSS Grid

• Comprendre lignes, colonnes et cellules
• Créer des grilles explicites et implicites
• Utiliser fr, minmax() et repeat()
• Créer des colonnes adaptatives
• Utiliser auto-fit et auto-fill
• Positionner précisément les éléments
• Utiliser les zones de grille
• Créer des mises en page complexes sans multiplier les conteneurs
• Combiner Grid et Flexbox
• Choisir entre Grid et Flexbox selon la situation

Utiliser les variables CSS

• Comprendre le principe des propriétés personnalisées
• Créer des variables globales
• Réutiliser couleurs, espacements et dimensions
• Modifier des variables selon le contexte
• Créer une base simple de design system
• Faciliter la maintenance et l’évolution graphique d’un site

Jour 2 – Responsive avancé, animations, accessibilité et optimisation

• Approfondir l’approche Mobile First
• Créer des interfaces fluides
• Utiliser efficacement les unités relatives
• Utiliser rem, em, %, vw et vh selon les besoins
• Découvrir les unités liées au viewport moderne lorsque pertinentes
• Utiliser min(), max() et clamp()
• Créer des tailles de texte et espacements fluides
• Limiter le recours à des breakpoints arbitraires

Approfondir les Media Queries

• Définir des breakpoints à partir du contenu
• Adapter la mise en page
• Modifier navigation, typographies et espacements
• Adapter les images et médias
• Prendre en compte certaines préférences utilisateur
• Tester différents formats d’écran

Découvrir les Container Queries

• Comprendre la différence entre Media Queries et Container Queries
• Identifier les composants adaptés aux Container Queries
• Créer un conteneur
• Adapter un composant à l’espace réellement disponible
• Créer des composants plus réutilisables
• Combiner Media Queries et Container Queries lorsque cela est pertinent

Créer des transitions et animations CSS

• Créer des transitions fluides
• Choisir les propriétés pertinentes à animer
• Comprendre durée, délai et courbe d’accélération
• Utiliser transform
• Créer des animations avec @keyframes
• Définir durée, répétition et direction
• Créer des micro-interactions
• Éviter les animations inutiles ou gênantes
• Prendre en compte les préférences de réduction des animations

Améliorer les formulaires

• Structurer correctement les formulaires HTML
• Créer des styles cohérents pour les champs
• Gérer focus, hover et états d’erreur
• Créer des boutons accessibles
• Améliorer l’expérience sur mobile
• Conserver une navigation possible au clavier

Améliorer l’accessibilité HTML/CSS

• Utiliser un HTML sémantique
• Respecter la hiérarchie des titres
• Créer des contrastes suffisants
• Créer des états de focus visibles
• Ne pas transmettre une information uniquement par la couleur
• Améliorer la navigation au clavier
• Comprendre le rôle des attributs ARIA sans en faire un usage systématique
• Identifier les principales erreurs d’accessibilité dans une interface

Organiser et maintenir son CSS

• Structurer une feuille de style
• Créer des conventions de nommage cohérentes
• Limiter les duplications
• Créer des classes réutilisables
• Organiser variables, composants et utilitaires
• Comprendre les principes d’une architecture CSS maintenable
• Découvrir le rôle des préprocesseurs CSS sans en faire une dépendance
• Identifier quand Sass peut apporter une valeur ajoutée

Diagnostiquer avec les DevTools

• Inspecter précisément un élément
• Identifier les règles CSS actives et écrasées
• Comprendre les styles calculés
• Analyser le modèle de boîte
• Utiliser les outils dédiés à Flexbox et Grid
• Tester les modifications en temps réel
• Simuler différents formats d’écran
• Identifier l’origine d’un problème responsive

Utiliser l’intelligence artificielle pour assister son intégration

• Faire expliquer un code complexe
• Rechercher l’origine probable d’une erreur
• Demander plusieurs solutions à un problème de mise en page
• Transformer une structure en proposition responsive
• Optimiser ou simplifier un fragment CSS
• Identifier des répétitions dans une feuille de style
• Demander une analyse d’accessibilité d’un fragment de code
• Comparer la réponse de l’IA avec la documentation et le comportement réel du navigateur
• Tester et valider systématiquement le code proposé

Atelier pratique – Créer une interface web moderne et responsive

• Analyser une maquette ou un besoin
• Définir la structure HTML sémantique
• Organiser les composants
• Créer la mise en page avec Grid et Flexbox
• Créer les variables CSS principales
• Adapter l’interface aux différents écrans
• Utiliser les Media Queries et, lorsque pertinent, les Container Queries
• Créer les interactions et transitions utiles
• Contrôler l’accessibilité
• Tester l’interface avec les DevTools
• Corriger les problèmes d’affichage
• Optimiser et organiser le code final

Formation HTML/CSS – De l’initiation aux techniques avancées : créer des interfaces web modernes et responsive

Ce parcours complet permet d’apprendre progressivement à créer, structurer, mettre en forme et optimiser des pages web avec HTML et CSS. Les participants commencent par les fondamentaux du HTML sémantique et de la mise en forme CSS avant d’aborder les techniques modernes de Responsive Design, Flexbox, CSS Grid et les fonctionnalités CSS avancées. La formation privilégie la pratique avec de nombreux exercices et un projet fil rouge permettant de concevoir une interface web complète adaptée aux ordinateurs, tablettes et smartphones. L’intelligence artificielle est également utilisée comme outil d’assistance pour comprendre, expliquer, corriger et améliorer du code tout en conservant la capacité à analyser les solutions proposées.

Jour 1 – Comprendre HTML et structurer une page web

• Comprendre le fonctionnement général du Web
• Comprendre la relation entre navigateur, serveur et fichiers web
• Identifier les rôles respectifs de HTML, CSS et JavaScript
• Installer et prendre en main un éditeur de code
• Créer la structure d’un document HTML
• Comprendre les balises, éléments et attributs
• Créer titres, paragraphes et contenus textuels
• Créer des listes ordonnées et non ordonnées
• Créer des liens internes et externes
• Comprendre les chemins relatifs et absolus
• Organiser correctement les fichiers d’un projet

Créer une structure HTML sémantique

• Comprendre l’intérêt du HTML sémantique
• Utiliser header, nav, main, section, article, aside et footer
• Créer une hiérarchie logique des titres
• Structurer correctement le contenu d’une page
• Comprendre l’impact de la structure HTML sur l’accessibilité et le référencement
• Éviter les principales erreurs de balisage

Intégrer images et médias

• Ajouter des images dans une page
• Comprendre les principaux formats d’image
• Renseigner correctement les textes alternatifs
• Optimiser la taille et le poids des fichiers
• Créer des images cliquables
• Comprendre les principes des images responsives
• Intégrer des médias externes lorsque cela est pertinent

Créer des tableaux et formulaires

• Créer un tableau de données structuré
• Créer un formulaire HTML
• Utiliser les principaux types de champs
• Créer labels, listes déroulantes, boutons radio et cases à cocher
• Créer un bouton d’envoi
• Comprendre les attributs essentiels des formulaires
• Appliquer les premiers principes d’accessibilité

Jour 2 – Mettre en forme avec CSS

• Comprendre le rôle d’une feuille de style
• Lier un fichier CSS à une page HTML
• Comprendre la syntaxe d’une règle CSS
• Utiliser les sélecteurs de balise, classe et identifiant
• Comprendre les sélecteurs combinés
• Découvrir les pseudo-classes et pseudo-éléments
• Comprendre cascade, héritage et spécificité
• Identifier les conflits de styles

Créer une identité visuelle avec CSS

• Gérer les couleurs
• Modifier les polices et tailles de texte
• Gérer graisse, style, alignement et interlignage
• Utiliser des polices web
• Créer des arrière-plans
• Ajouter bordures et arrondis
• Créer des ombres
• Créer des effets de survol
• Structurer une identité graphique cohérente

Comprendre le modèle de boîte

• Comprendre width et height
• Utiliser margin et padding
• Gérer les bordures
• Utiliser box-sizing
• Comprendre les éléments block et inline
• Maîtriser les dimensions et espacements
• Identifier les débordements

Positionner les éléments

• Comprendre le flux normal d’une page
• Utiliser position relative et absolute
• Utiliser fixed et sticky lorsque cela est pertinent
• Comprendre les contextes de positionnement
• Gérer la superposition des éléments avec z-index

Jour 3 – Créer des mises en page responsives

• Comprendre les enjeux du Responsive Web Design
• Adopter une approche Mobile First
• Comprendre les unités fixes et relatives
• Utiliser %, rem, em, vw et vh selon les besoins
• Créer des contenus et images fluides
• Comprendre le viewport
• Tester une interface sur plusieurs tailles d’écran

Créer des mises en page avec Flexbox

• Comprendre le conteneur flex et les éléments flexibles
• Comprendre les axes principal et secondaire
• Créer des dispositions horizontales et verticales
• Gérer alignements et espacements
• Utiliser flex-grow, flex-shrink et flex-basis
• Gérer le retour à la ligne
• Créer une navigation responsive
• Créer des cartes et colonnes flexibles
• Identifier les cas d’usage adaptés à Flexbox

Utiliser les Media Queries

• Comprendre le rôle des Media Queries
• Définir les breakpoints selon le contenu
• Modifier les mises en page selon l’espace disponible
• Adapter les typographies et espacements
• Adapter la navigation
• Gérer les différents formats d’écran
• Éviter de multiplier inutilement les breakpoints

Découvrir CSS Grid

• Comprendre la logique bidimensionnelle de CSS Grid
• Créer une grille simple
• Définir lignes et colonnes
• Utiliser l’unité fr
• Gérer les espacements
• Positionner les éléments
• Créer des grilles adaptatives
• Comprendre quand utiliser Grid ou Flexbox

Jour 4 – CSS avancé et composants modernes

• Approfondir cascade et spécificité
• Utiliser les sélecteurs d’attributs
• Approfondir les pseudo-classes
• Utiliser :nth-child(), :not(), :is() et :where()
• Découvrir les possibilités de :has()
• Utiliser ::before et ::after
• Créer des composants réutilisables
• Réduire les répétitions dans les feuilles de style

Approfondir CSS Grid

• Créer des grilles explicites et implicites
• Utiliser repeat() et minmax()
• Utiliser auto-fit et auto-fill
• Créer des colonnes adaptatives
• Positionner précisément les éléments
• Créer des zones de grille
• Combiner Grid et Flexbox
• Créer des interfaces complexes sans multiplier les conteneurs inutiles

Utiliser les variables CSS

• Comprendre les propriétés personnalisées CSS
• Créer des variables globales
• Centraliser couleurs, espacements et dimensions
• Modifier des variables selon le contexte
• Créer les bases d’un design system
• Faciliter la maintenance graphique d’un site

Créer des interfaces fluides

• Utiliser min(), max() et clamp()
• Créer des typographies fluides
• Créer des espacements adaptatifs
• Limiter les valeurs fixes
• Créer des composants capables de s’adapter naturellement à l’espace disponible

Découvrir les Container Queries

• Comprendre la différence entre Media Queries et Container Queries
• Créer un contexte de conteneur
• Adapter un composant à la taille de son conteneur
• Créer des composants réutilisables dans plusieurs contextes
• Combiner Media Queries et Container Queries

Créer transitions et animations CSS

• Créer des transitions
• Définir durée et courbe d’accélération
• Utiliser transform
• Créer des animations avec @keyframes
• Créer des micro-interactions
• Limiter les animations inutiles
• Prendre en compte les préférences utilisateur concernant les animations

Jour 5 – Accessibilité, diagnostic et réalisation d’une interface complète

• Comprendre les principes essentiels de l’accessibilité web
• Utiliser correctement le HTML sémantique
• Respecter la hiérarchie des titres
• Créer des contrastes suffisants
• Créer des états de focus visibles
• Maintenir une navigation possible au clavier
• Renseigner les alternatives textuelles
• Ne pas transmettre une information uniquement par la couleur
• Comprendre le rôle des attributs ARIA lorsque cela est nécessaire

Créer des formulaires accessibles et responsives

• Structurer correctement les champs et labels
• Créer des styles cohérents
• Gérer focus, hover, erreur et validation
• Créer des boutons accessibles
• Adapter les formulaires aux écrans tactiles
• Optimiser l’expérience mobile

Organiser et maintenir son CSS

• Structurer les feuilles de style
• Utiliser des conventions de nommage cohérentes
• Créer des classes réutilisables
• Limiter les duplications
• Organiser variables, composants et utilitaires
• Faciliter la maintenance du projet
• Comprendre l’intérêt éventuel d’un préprocesseur comme Sass

Diagnostiquer une interface avec les DevTools

• Inspecter les éléments HTML
• Identifier les styles appliqués
• Comprendre les styles calculés
• Repérer les règles CSS écrasées
• Analyser le modèle de boîte
• Utiliser les outils Flexbox et Grid du navigateur
• Tester les modifications en temps réel
• Simuler différentes tailles d’écran
• Identifier l’origine d’un problème responsive

Utiliser l’intelligence artificielle comme assistant HTML/CSS

• Demander l’explication d’un fragment de code
• Identifier l’origine probable d’une erreur
• Obtenir plusieurs solutions à un problème de mise en page
• Créer une première proposition de structure HTML
• Proposer une adaptation responsive
• Simplifier ou réorganiser du CSS
• Identifier les répétitions
• Demander des pistes d’amélioration d’accessibilité
• Comparer les solutions proposées par l’IA avec le comportement réel du navigateur
• Comprendre et tester systématiquement le code avant utilisation

Projet fil rouge – Concevoir une interface web moderne et responsive

• Analyser un besoin ou une maquette
• Définir l’architecture des contenus
• Créer la structure HTML sémantique
• Créer l’identité visuelle en CSS
• Construire les composants
• Créer la mise en page avec Flexbox et Grid
• Créer une navigation adaptée aux différents écrans
• Utiliser des variables CSS
• Créer les adaptations responsives
• Ajouter des transitions ou micro-interactions pertinentes
• Contrôler l’accessibilité
• Tester avec les DevTools
• Corriger les problèmes d’affichage
• Optimiser l’organisation du code
• Présenter et expliquer les choix techniques réalisés