HTML & CSS : développement web front-end

Niveau : Débutant — premiers pas en programmation web Public visé : Tout public souhaitant les compétences de développement web front-end : reconversion, salariés, indépendants, étudiants Modalité : Présentiel, classe virtuelle ou blended-learning (FOAD tutorée) Objectifs pédagogiques • Structurer une page web avec les balises HTML appropriées (texte, listes, liens, tableaux, médias, formulaires) • Mettre en forme une page avec CSS : polices, couleurs, espacements, modèle de boîte, bordures • Maîtriser le positionnement des éléments (display, position, float, Flexbox, CSS Grid) • Créer des mises en page responsives adaptées à tous les supports • Intégrer et sécuriser un formulaire web • Créer des transitions, animations et transformations CSS Programme détaillé Jour 1 — Introduction et fondamentaux HTML • Définition et usage du HTML/CSS ; évolution des langages web ; installation VS Code • Éléments, balises et attributs HTML ; structure minimale d'une page valide • Titres, paragraphes, listes, liens, envoi de mails et téléchargement de fichiers en HTML • Compatibilité, support et validation du code HTML et CSS Jour 2 — Bases du CSS et mise en forme • Sélecteurs et propriétés CSS ; cascade et héritage ; éléments block et inline • Polices, couleurs, taille des interlignes, espaces ; propriétés de texte • Exercices pratiques après chaque notion Jour 3 — Modèles de boîtes, positionnement, tableaux et médias • Modèle de boîte : Width, Height, Padding, Bordures, Margin, Box Sizing • Display, Position, Float ; conflits et bonnes pratiques • Tableaux HTML : structure et mise en forme • Intégration de médias : images, audio, vidéo, iFrame Jour 4 — Effets visuels, formulaires, animations, Flexbox • Fonds, dégradés, ombres ; sélecteurs CSS avancés (attributs, pseudo-classes, pseudo-éléments) • Ateliers : menu horizontal sticky, menu déroulant • Formulaires : éléments, attributs, sécurité — Projet fil rouge : site restaurant • Transitions, animations, transformations CSS ; introduction à Flexbox Jour 5 — Responsive design, sémantique, CSS Grid et CSS moderne • Responsive design : meta viewport, media queries, images responsives — Atelier : menu responsive • Balises sémantiques HTML — Atelier : site CV • CSS Grid : création de grille, positionnement, alignement — Atelier : mise en page 3 colonnes • CSS moderne : variables, fonctions, imbrication (nesting) — Projet fil rouge final • Bilan de la formation et plan de progression individuel Évaluation • Évaluation diagnostique en début de formation • Exercices pratiques après chaque notion ; projets fil rouge progressifs • Bilan individuel et plan de progression ; attestation de fin de formation