Informations pratiques

• Durée : 35h
• Niveau : Débutant
• Modalité : Visio

Objectifs pédagogiques

• Maîtriser la structure HTML5 sémantique et les bonnes pratiques
• Créer des mises en page CSS3 modernes et responsives
• Développer des sites web adaptatifs pour tous les écrans
• Optimiser les performances et l'accessibilité web
• Intégrer les techniques SEO de base

Programme de la formation

1. Introduction au HTML5 sémantique (8h)
   • Structure d'une page HTML5 : DOCTYPE, head, body, meta
   • Balises sémantiques : header, nav, main, section, article, aside, footer
   • Formulaires avancés : input types, validation native, accessibilité
   • Tableaux, listes et éléments multimédias (audio, vidéo, picture)
   • Bonnes pratiques d'accessibilité WCAG et rôles ARIA
2. CSS3 et mise en page moderne (10h)
   • Modèle de boîte, spécificité et cascade CSS
   • Flexbox : axes, alignement, distribution et cas d'usage courants
   • CSS Grid : colonnes, rangées, zones nommées et layouts complexes
   • Variables CSS (custom properties) et fonctions calc(), clamp(), min/max
   • Pseudo-classes, pseudo-éléments et sélecteurs avancés
   • Systèmes de couleurs : HSL, RGB, gradients linéaires et radiaux
3. Responsive Design et Mobile First (8h)
   • Approche Mobile First et progressive enhancement
   • Media queries : breakpoints, orientation, préférence de thème
   • Images responsives : srcset, sizes, balise picture et formats modernes (WebP, AVIF)
   • Unités relatives : em, rem, vw, vh, pourcentages et leur usage optimal
   • Typographie fluide avec clamp() et échelles typographiques
4. Animations et micro-interactions (5h)
   • Transitions CSS : propriétés, durées, fonctions de timing
   • Animations keyframes : création, itération, direction
   • Transform 2D/3D : translate, rotate, scale, perspective
   • Micro-interactions UX : hover, focus, feedback visuel
   • Performance des animations : GPU, will-change, requestAnimationFrame

Prérequis

Aucun prérequis technique. Connaissance de base de l'informatique suffisante.

Public visé

Débutants en développement web, personnes en reconversion, entrepreneurs, étudiants

Méthodes pédagogiques

Apports théoriques, démonstrations pratiques, ateliers en groupe, exercices individuels, support de cours

Évaluation

QCM, exercices pratiques, mise en situation professionnelle, étude de cas, projet final

Accessibilité

Formation accessible aux personnes en situation de handicap. Possibilités d'adaptation pédagogique et technique. Pour toute question concernant l'accessibilité, contactez notre référent handicap : Kelly Ohana - contact@visio-form.fr