HTML5 & CSS3 : maîtriser la création de pages web modernes et responsives

Module 1 — Introduction à HTML5 et CSS3

• Différences entre HTML et CSS
• Apports du HTML5 et du CSS3 par rapport aux versions précédentes
• Panorama des outils de développement disponibles
• Travaux pratiques : mise en place de l'environnement de développement

Module 2 — Principales balises HTML

• Structure d'un document HTML : <!DOCTYPE>, <html>, <head>, <body>
• Notions de balises et attributs
• Balises d'en-tête : <title> et <meta>
• Liaisons CSS et JavaScript : <link> et <script>
• Balises textuelles : titres, paragraphes, citations, <strong>, <em>, <mark>
• Liens <a>, images <img>, <figure>, <figcaption>, listes <ul> et <ol>
• Tableaux : <table>, <tr>, <th>, <td>
• Balises génériques <div> et <span>
• Balises sémantiques : <nav>, <section>, <article>, <aside>, <header>, <footer>
• Recommandations d'accessibilité WCAG/RGAA : attributs alt, scope...
• Travaux pratiques : création d'une page simple (CV en ligne, page de vente...)

Module 3 — Intégrer des médias

• Les iframes et leur utilisation
• Intégrer des vidéos et des contenus audio
• Accessibilité des médias : compatibilité, sous-titres, navigation au clavier
• Travaux pratiques : intégration de médias dans le projet fil rouge

Module 4 — Sélecteurs et propriétés CSS

• Les règles CSS et leur syntaxe
• Sélecteurs et pseudo-classes
• Définir des couleurs et propriétés de fond
• Propriétés communes : dimensions, bordures, marges internes et externes
• Propriétés texte : couleur, alignement, police, soulignement, gras, taille
• Unités px, em, rem, vw, vh
• Améliorations visuelles : ombres, dégradés, texte multicolonnes, coins arrondis
• Travaux pratiques : application des sélecteurs et propriétés CSS au projet

Module 5 — Positionnements CSS

• Positionnement statique et propriété display
• Positionnements relatif, absolu et fixe
• Les propriétés float et clear
• Le positionnement flexbox
• Le positionnement grid layout
• Travaux pratiques : intégration d'une maquette avec 2 colonnes, logo, menu et contenu

Module 6 — Responsive Design

• Dimensionnements par unités flexibles
• La notion de viewport
• Les media queries et la définition des points de rupture
• La notion de grille CSS
• Travaux pratiques : adaptation du site à toutes les tailles d'écran et démonstration de la grille Bootstrap

Module 7 — Formulaires HTML5

• Les formulaires et leurs champs : <form>, <input>, <textarea>, <select>, <option>
• Labels et liaisons aux champs associés
• Apports HTML5 : nouveaux types d'inputs et attributs de validation
• Validation côté HTML : types et attributs natifs
• Paramétrage de l'envoi : méthodes GET et POST, attribut action
• Recommandations de sécurité (OWASP, ANSSI) : méthode adéquate, type password, attribut pattern
• Recommandations d'accessibilité WCAG/RGAA : labels, attributs ARIA, fieldset et legend
• Travaux pratiques : intégration d'un formulaire de contact dans le projet

Module 8 — Animations CSS3

• Transformations CSS : rotations, translations, changement d'échelle, déformation
• Transitions et animations CSS
• Limiter les animations avec prefers-reduced-motion
• Travaux pratiques : mise en pratique des transformations, transitions et animations