Formation Création de pages Web Responsives : HTML5, CSS3, et intégration Web

Programme de la formation
Création de pages Web Responsives : HTML5, CSS3, et intégration Web

• Introduction au développement Web et environnement de travail

  - Comprendre les rôles HTML, CSS, JavaScript
  - Installer un éditeur de code (VS Code)
  - Utiliser les outils de développement navigateur
  - Structurer un projet Web simple

• Bases HTML5 - Structure et sémantique

  - Définir le DOCTYPE et la structure de base (head, body)
  - Utiliser les balises de texte (titres, paragraphes, listes)
  - Intégrer des liens hypertexte (a)
  - Insérer des images (img)

• HTML5 avancé - Contenu multimédia et tableaux

  - Intégrer des vidéos et audios (video, audio)
  - Créer des tableaux structurés (table, tr, td, th)
  - Comprendre les balises sémantiques (header, nav, main, footer, section, article, aside)
  - Valider le code HTML

• Introduction au CSS3 - Styliser sa page

  - Comprendre le rôle du CSS et ses syntaxes
  - Appliquer des styles en ligne, internes, externes
  - Sélectionner des éléments (balise, classe, ID)
  - Manipuler les couleurs et fonds (background)

• CSS3 - Modèle de boîte et positionnement

  - Comprendre le modèle de boîte (margin, border, padding, content)
  - Gérer l'affichage des éléments (block, inline, inline-block)
  - Utiliser les propriétés de positionnement (static, relative, absolute, fixed)
  - Découvrir la propriété float

• CSS3 - Typographie et gestion du texte

  - Choisir les polices (font-family, @font-face)
  - Maîtriser la taille et le poids des polices (font-size, font-weight)
  - Aligner et décorer le texte (text-align, text-decoration)
  - Gérer les interlignes et espacements (line-height, letter-spacing)

• CSS3 - Flexbox pour les mises en page

  - Comprendre les principes de Flexbox
  - Organiser les éléments sur un axe (justify-content, align-items)
  - Gérer les retours à la ligne (flex-wrap)
  - Ordonner et dimensionner les items (order, flex-grow, flex-shrink, flex-basis)

• CSS3 - Grid Layout pour les mises en page avancées

  - Introduire CSS Grid pour les mises en page 2D
  - Définir des lignes et colonnes (grid-template-rows, grid-template-columns)
  - Positionner des éléments dans la grille (grid-row, grid-column)
  - Créer des gabarits nommés (grid-template-areas)

• Responsive Web Design - Media Queries

  - Comprendre le concept de RWD (Mobile First)
  - Utiliser les @media queries (min-width, max-width)
  - Adapter les tailles de police et d'images
  - Tester sur différents appareils virtuels

• Responsive Web Design - Images et vidéos adaptatives

  - Gérer les images (img {max-width: 100%})
  - Utiliser l'attribut srcset et la balise picture
  - Redimensionner les vidéos intégrées (aspect-ratio)
  - Optimisation des performances pour le mobile

• Formulaires HTML5 et CSS3 - Interaction utilisateur

  - Créer des formulaires sémantiques (form, input, label, textarea, select)
  - Utiliser les nouveaux types d'input (email, url, date, number)
  - Styliser les formulaires avec CSS
  - Ajouter des attributs de validation (required, pattern)

• Conception et intégration d'une page complète

  - Intégrer un design (maquette)
  - Structurer un projet de A à Z (HTML)
  - Appliquer les styles (CSS)
  - Rendre la page responsive et accessible