HTML et CSS : créer sa première page web
Construire une page web structurée et mise en forme avec HTML5 et CSS3. Le point de départ incontournable pour tout développeur frontend.
Dernière mise à jour le 16/03/2026
Public visé
- Débutants souhaitant créer leur première page web de A à Z
- Designers ou graphistes souhaitant comprendre le code derrière leurs maquettes
- Marketeurs et communicants voulant gagner en autonomie sur le web
- Personnes en reconversion vers le développement frontend
- Toute personne souhaitant comprendre comment fonctionne une page web
Objectifs pédagogiques
- Comprendre la structure et le rôle d'un document HTML
- Utiliser les balises HTML5 sémantiques de manière appropriée
- Mettre en forme une page web avec CSS3 (couleurs, typographie, espacements)
- Maîtriser le box model et la mise en page avec Flexbox
- Créer une mise en page responsive adaptée aux mobiles avec les media queries
- Créer et styliser un formulaire web fonctionnel
- Déployer une page statique en ligne
Prérequis
- Aucun prérequis technique
- Savoir utiliser un ordinateur et un navigateur web
- Une sensibilité visuelle est un plus mais pas obligatoire
Programme détaillé
- Comment fonctionne un navigateur ?
- Différence entre HTML, CSS et JavaScript
- Structure d'un document HTML : <!DOCTYPE>, <head>, <body>
- Premier fichier HTML dans VS Code
Module 2 – Les balises essentielles (2h)
- Titres, paragraphes, listes, liens, images
- Balises sémantiques HTML5 : <header>, <nav>, <main>, <section>, <article>, <footer>
- Attributs essentiels : href, src, alt, class, id
- Bonnes pratiques d'accessibilité de base
Module 3 – Formulaires web (1h30)
- Structure d'un formulaire : <form>, <input>, <label>
- Types d'inputs : text, email, password, checkbox, radio, select
- Bouton de soumission et attributs de validation HTML5
Module 4 – Exercice pratique Jour 1 (2h)
- Création d'une page de présentation personnelle complète en HTML pur
- Revue et correction en groupe
Jour 2 (7h) – CSS3 : styliser et mettre en page
Module 5 – Introduction au CSS (1h30)
- Lier une feuille de style à un HTML
- Sélecteurs : balise, classe, id, combinaisons
- Propriétés fondamentales : couleur, fond, typographie, bordures
- Cascade et spécificité
Module 6 – Box model et espacements (1h30)
- margin, padding, border, width, height
- box-sizing: border-box
- Display : block, inline, inline-block
Module 7 – Flexbox et mise en page (2h)
- Conteneur flex : display: flex, flex-direction, justify-content, align-items
- Éléments flex : flex, order, align-self
- Construire une navbar, une grille de cartes, un footer
Module 8 – Responsive design (1h)
- Notion de mobile-first
- Media queries : @media (max-width: …)
- Adapter une mise en page au mobile
Module 9 – Déploiement et exercice final (1h)
- Déployer une page statique (GitHub Pages ou Netlify)
- Mini-projet : page web complète et responsive (présentation, section services, formulaire de contact)
- Retour formateur
Compétences visées
- Structurer une page web avec HTML5 sémantique et accessible
- Styliser et mettre en page avec CSS3 de manière autonome
- Utiliser Flexbox pour construire des layouts modernes et flexibles
- Rendre une page web responsive (mobile-first)
- Déployer et mettre en ligne une page statique
Modalités et méthodes pédagogiques
Modalités d'évaluation
- En cours de formation : exercices pratiques corrigés à chaque module, mises en situation progressives
- En fin de formation : réalisation d'une page web complète, responsive et déployée, évaluée par le formateur
- Questionnaire d'auto-évaluation des acquis en fin de parcours
Critères d'évaluation
- Exactitude sémantique du HTML produit (balises appropriées, structure logique)
- Qualité du CSS : lisibilité, organisation, absence de redondances
- Maîtrise de Flexbox pour la mise en page
- Rendu responsive fonctionnel sur mobile et desktop
- Autonomie dans la réalisation et le déploiement de la page finale
Modalités de validation
Moyens pédagogiques et techniques
- Support de cours numérique mis à disposition des apprenants
- Environnement de développement : VS Code + navigateur Chrome + DevTools
- Exercices pratiques progressifs avec corrigés pour chaque module
- Accès à un dépôt de ressources, fichiers de départ et exemples de code
- Pour le distanciel : visioconférence (Microsoft Teams ou équivalent), partage d'écran, chat en direct
- Accès à la plateforme pédagogique LaPolaris (supports, ressources, émargement)
Accessibilité aux personnes en situation de handicap
Suivi et accompagnement
- Feuilles d'émargement signées par demi-journée (présentiel) ou émargement numérique (distanciel)
- Traçabilité des activités pédagogiques réalisées
- Attestation d'assiduité délivrée en fin de formation
- Suivi individuel de la progression via les exercices et la page projet finale
Conditions d'accès
Délais d'accès
Autres formations en Fondamentaux
Git et GitHub : gestion de versions pour débutants
Apprenez à versionner votre code, collaborer sur GitHub et travailler en équipe avec Git. Formation essentielle avant tout parcours de développement.
Algorithmique et logique de programmation
Comprendre les bases de la pensée algorithmique avant d'apprendre un langage. Variables, conditions, boucles, fonctions : les fondations de tout développeur.
Python pour débutants : premiers pas en programmation
Découvrez la programmation avec Python, le langage idéal pour les débutants. Syntaxe claire, exercices pratiques, projets concrets.