Formation HTML CSS - Créer Pages Web Responsive Mixte : présentiel / à distance
Dernière mise à jour : 06/02/2026
✓ Vous comprendrez la structure et la syntaxe du html5<br>
✓ Vous serez autonome sur les propriétés css3 pour la mise en forme<br>
✓ Vous créerez des pages web responsives adaptées à tous les écrans<br>
✓ Vous utiliserez flexbox et grid pour la mise en pa
✓ Vous serez autonome sur les propriétés css3 pour la mise en forme<br>
✓ Vous créerez des pages web responsives adaptées à tous les écrans<br>
✓ Vous utiliserez flexbox et grid pour la mise en pa
Description
Module 1 : Fondamentaux du HTML5
Durée : 5hObjectif opérationnel : À l'issue de ce module, vous maîtriserez la structure et les balises HTML5.
Contenu :
- Fonctionnement du web : navigateur, serveur, HTTP
- Structure d'un document HTML5 : doctype, head, body
- Balises sémantiques : header, nav, main, article, section, footer
- Texte et typographie : titres, paragraphes, listes
- Liens et navigation : balise a, ancres
- Images et médias : img, figure, video, audio
- Formulaires : input, select, textarea, validation
Mise en pratique : Création de la structure HTML d'un site vitrine
Livrable : Template HTML5 de base
Module 2 : Mise en forme avec CSS3
Durée : 5hObjectif opérationnel : À l'issue de ce module, vous saurez styliser vos pages avec CSS3.
Contenu :
- Syntaxe CSS : sélecteurs, propriétés, valeurs
- Cascade, héritage et spécificité
- Modèle de boîte : margin, padding, border
- Typographie web : polices, tailles, couleurs
- Couleurs et dégradés
- Arrière-plans et bordures
- Pseudo-classes et pseudo-éléments
Mise en pratique : Mise en forme complète du site vitrine
Livrable : Feuille de style CSS réutilisable
Module 3 : Mise en page moderne : Flexbox et Grid
Durée : 5hObjectif opérationnel : À l'issue de ce module, vous maîtriserez les techniques modernes de mise en page.
Contenu :
- Flexbox : concepts, axes, propriétés container et items
- Alignement et distribution avec Flexbox
- CSS Grid : lignes, colonnes, zones
- Positionnement des éléments dans la grille
- Combiner Flexbox et Grid
- Positionnement : relative, absolute, fixed, sticky
Mise en pratique : Création de layouts complexes avec Flexbox et Grid
Livrable : Bibliothèque de layouts réutilisables
Module 4 : Responsive Web Design
Durée : 4hObjectif opérationnel : À l'issue de ce module, vous créerez des sites adaptés à tous les écrans.
Contenu :
- Principes du responsive design
- Media queries : syntaxe et breakpoints
- Approche mobile-first
- Images responsives : srcset, picture
- Unités relatives : em, rem, vw, vh, %
- Tester le responsive : outils de développement
Mise en pratique : Rendre le site vitrine responsive
Livrable : Feuille de style responsive
Module 5 : Bonnes pratiques et optimisation
Durée : 2hObjectif opérationnel : Appliquer les bonnes pratiques de qualité, accessibilité et SEO.
Contenu :
- Accessibilité web (WCAG) : principes et techniques
- SEO on-page : balises meta, structure, sémantique
- Performance : optimisation des images, minification
- Validation du code : W3C validator
- Organisation du code et conventions de nommage (BEM)
- Outils de développement et debugging
- Évaluation des acquis et plan d'action
Mise en pratique : Audit et optimisation du site créé
Livrable : Check-list qualité web et site finalisé
Objectifs de la formation
- Comprendre la structure et la syntaxe du HTML5
- Maîtriser les propriétés CSS3 pour la mise en forme
- Créer des pages web responsives adaptées à tous les écrans
- Utiliser Flexbox et Grid pour la mise en page
- Appliquer les bonnes pratiques d'accessibilité et de SEO
Public visé
Profils concernés :
Professionnels souhaitant développer leurs compétences dans ce domaine, managers, collaborateurs, consultants, toute personne concernée par cette thématique dans son activité.
Cette formation s'adresse à vous si :
Professionnels souhaitant développer leurs compétences dans ce domaine, managers, collaborateurs, consultants, toute personne concernée par cette thématique dans son activité.
Cette formation s'adresse à vous si :
- Vous souhaitez acquérir de nouvelles compétences
- Vous devez répondre à des exigences professionnelles
- Vous voulez évoluer dans votre fonction
- Vous cherchez à améliorer vos pratiques
Prérequis
Maîtriser l'utilisation d'un ordinateur. Une première approche du code est recommandée pour les formations intermédiaires.
Modalités pédagogiques
Pédagogie active alternant apports méthodologiques et exercices pratiques.
Études de cas et mises en situation. Échanges et retours d'expérience. Support de cours fourni.
Études de cas et mises en situation. Échanges et retours d'expérience. Support de cours fourni.
Moyens et supports pédagogiques
Salle de formation équipée. Support de cours. Matériel pédagogique adapté.
Modalités d'évaluation et de suivi
• Évaluation des acquis (exercices, quiz)
• Mise en situation pratique
• Évaluation de satisfaction
• Attestation de fin de formation
• Mise en situation pratique
• Évaluation de satisfaction
• Attestation de fin de formation
Informations sur l'admission
Inscription jusqu'à 14 jours avant le début. Délai : 2 à 4 semaines.
Informations sur l'accessibilité
Formation accessible aux PSH. Contact référent handicap : referent.handicap@akademiaformation.com