Développement Web Moderne : Maîtrisez HTML5 & CSS par la Pratique

Aperçu du cours et configuration de l’environnement de développement.

• 1. Bienvenue dans le cours
• 2. Comment fonctionne le web
• 3. Le rôle de HTML, CSS et JavaScript
• 4. VS Code & Environnement
• 5. Documentation Premium

Concepts et éléments fondamentaux de HTML.

• 1. Introduction à la section
• 2. Créer et ouvrir des fichiers HTML
• 3. Balises et attributs HTML
• 4. Structure d’un document
• 5. Live Server & Prettier
• 6. Configuration des fichiers sandbox
• 7. Balises meta & moteurs de recherche
• 8. Titres, paragraphes & emphase du texte
• 9. Introduction aux outils de développement du navigateur
• 10. Listes
• 11. Balises de lien (Anchor)
• 12. Images
• 13. Éléments block vs inline
• 14. Sauts de ligne, lignes horizontales & entités
• 15. Divs & spans
• 16. Classes & IDs
• 17. Éléments sémantiques
• 18. Crash course Emmet
• 19. Raccourcis clavier
• 20. Défi HTML: Grille tarifaire

Création et gestion des formulaires et des médias en HTML.

• 1. Introduction à la section
• 2. Balises de formulaire & champs de saisie
• 3. Champs de texte
• 4. Attributs des champs
• 5. Listes déroulantes & textarea
• 6. Cases à cocher & boutons radio
• 7. Autres types de champs
• 8. Datalist
• 9. Défi HTML: Formulaire

Éléments HTML avancés et leurs utilisations.

• 1. Introduction à la section
• 2. Élément audio
• 3. Élément vidéo
• 4. Image map
• 5. Tableaux
• 6. Iframes
• 7. Attributs globaux
• 8. Éléments SVG
• 9. Popover & détails
• 10. Progression & compteur (meter)

Introduction à CSS et au style des pages web.

• 1. Introduction à la section
• 2. Mise en place du CSS
• 3. Sélecteurs de base
• 4. Polices en CSS
• 5. Propriétés de police & de texte
• 6. Couleurs en CSS
• 7. Spécificité CSS
• 8. Arrière-plans
• 9. Style des liens
• 10. Bibliothèque Font Awesome
• 11. Défi CSS: Bases

Comprendre comment les éléments HTML sont dimensionnés, espacés et positionnés à l’aide de CSS.

• 1. Introduction à la section
• 2. Explication du modèle de boîte
• 3. Dimensions et débordement
• 4. Padding (espacement interne)
• 5. Marges
• 6. Sélecteur universel et réinitialisation CSS
• 7. Bordures
• 8. Propriété display
• 9. Propriété position
• 10. Ombres portées (box-shadow)
• 11. Mini-projet : formulaire freelance
• 12. Mini-projet : cartes de chaussures

Apprendre à créer des mises en page flexibles avec le module Flexbox de CSS.

• 1. Introduction à la section
• 2. Qu'est-ce que Flexbox ?
• 3. Bases de Flexbox - Conteneurs et éléments
• 4. Aligner et justifier les éléments
• 5. Propriétés flexibles et dimensionnement dynamique
• 6. Ordre des éléments Flex
• 7. Défi de mise en page Flexbox
• 8. Mini-projet : carte de tarification

Rendre les sites adaptables à tous les types d’écrans avec le design responsive.

• 1. Introduction à la section
• 2. Qu'est-ce que le design responsive ?
• 3. Conteneurs flexibles et pourcentages
• 4. Unités rem et em
• 5. Unités vh et vw
• 6. Media Queries
• 7. Grille de tarification responsive
• 8. Mise en page flexible responsive
• 9. Container Queries
• 10. Unités de conteneur

Créer un formulaire interactif dans une landing page avec CSS responsive.

• 1. Introduction au projet
• 2. Mise en place et HTML
• 3. CSS de base et style
• 4. Contenu principal et alignement Flex
• 5. Styles internes
• 6. Mise en page mobile et media queries

Découverte de propriétés CSS utiles et projets interactifs.

• 1. Introduction à la section
• 2. Propriétés personnalisées
• 3. Préfixes vendeurs
• 4. Filtres
• 5. Mini-projet : défilement fluide
• 6. Navigation collante et style au défilement
• 7. Fonction calc()
• 8. Imbrication (nesting)

Construire un site complet et esthétique avec CSS moderne.

• 1. Introduction au projet
• 2. Mise en place et CSS de base
• 3. En-tête et navigation
• 4. Texte principal (hero)
• 5. Propriétés personnalisées
• 6. Section galerie
• 7. Pied de page
• 8. Page À propos
• 9. Page Contact
• 10. Effet Lightbox sur image

Introduction à Git, GitHub et au déploiement de sites web sur Netlify.

• 1. Introduction à la section
• 2. Introduction à Git et GitHub
• 3. Générer des clés SSH
• 4. Flux de travail Git et commandes
• 5. Déployer un site sur Netlify
• 6. Soumission de formulaire de contact
• 7. Configurer un nom de domaine

Assurer l'accessibilité de votre site à tous les utilisateurs.

• 1. Introduction à la section
• 2. Qu’est-ce que l’accessibilité web ?
• 3. Extension Skilltide pour l’accessibilité
• 4. Tests avec lecteur d’écran
• 5. Attribut role
• 6. Attributs ARIA
• 7. Aria-expanded et éléments dynamiques

Utiliser les sélecteurs CSS avancés pour un style plus précis.

• 1. Introduction à la section
• 2. Sélecteurs d’attributs
• 3. Combinateurs enfant et frère
• 4. Pseudo-éléments
• 5. Pseudo-classes : first-child, last-child, nth-child
• 6. Pseudo-classes : first-of-type, last-of-type, nth-of-type
• 7. :before et :after (pseudo-éléments)
• 8. Superposition d’image avec :before
• 9. Sélecteurs is(), where() et has()
• 10. Styliser les formulaires
• 11. Défi sur les sélecteurs

Apprendre à créer des mises en page complexes avec CSS Grid.

• 1. Introduction à la section
• 2. Vue d'ensemble de CSS Grid
• 3. Colonnes de grille et espacement
• 4. repeat() et minmax()
• 5. Lignes de grille
• 6. Défi Grid 1
• 7. Alignement et justification
• 8. repeat() avec autofill et autofit
• 9. Positionnement et extension des éléments
• 10. Lignes de grille nommées
• 11. Défi Grid 2
• 12. CSS Grid et media queries
• 13. Zones de gabarit de grille
• 14. Refactorisation de la grille créative Lumina

Apprendre à animer les interfaces avec CSS et un peu de JavaScript.

• 1. Introduction à la section
• 2. Vue d'ensemble des transitions
• 3. Créer des transitions
• 4. La propriété transform
• 5. Centrage absolu avec transform/translate
• 6. Transitions 3D
• 7. Introduction à JavaScript & CSS
• 8. Menu hamburger
• 9. Keyframes - Partie 1
• 10. Keyframes - Partie 2 (Animation CSS Loader)
• 11. Cube rotatif 3D
• 12. Mini-projet de site de présentation

Construire une interface complète étape par étape.

• 1. Introduction au projet
• 2. Mise en place du projet
• 3. Navigation desktop
• 4. Navigation mobile
• 5. Section hero
• 6. SVG Hero et media queries
• 7. Section apprendre
• 8. Section chapitres
• 9. Section résumé

Finaliser et déployer le projet avec accessibilité et formulaire.

• 1. Section infos
• 2. Section points clés
• 3. Détails & auteur
• 4. Section statistiques
• 5. Section newsletter
• 6. Pied de page & icônes sociales
• 7. Page de contact
• 8. Ajouter l'accessibilité
• 9. Déploiement sur Vercel & connexion à Formspree

Développement d’un site structuré avec la méthodologie BEM.

• 1. Introduction au projet
• 2. Explication de la méthodologie BEM
• 3. Mise en place du projet
• 4. Barre de navigation & menu desktop
• 5. Bouton hamburger & menu mobile
• 6. Section hero
• 7. Arrière-plan de la navbar au scroll
• 8. Section témoignages
• 9. Section fonctionnalités & grille
• 10. Disposition mobile des fonctionnalités

Finaliser le projet Leno avec animations et pages additionnelles.

• 1. Section aperçu
• 2. Bouton lecture animé
• 3. Fenêtre modale vidéo
• 4. Zone de détails & icônes
• 5. Section captures d'écran
• 6. Section téléchargement
• 7. Pied de page
• 8. Créer la page de détails
• 9. Cartes de tarification
• 10. Fonctionnalités détaillées