Description de la formation
Que vais-je apprendre ?
Pré-requis
- Introduction du module 1
- Brève histoire du Web et évolution du HTML & CSS
-
Questionnaire 1 : Brève histoire du Web et évolution du HTML & CSS
0:05:00
- Le rôle du W3C et du WHATWG
-
Questionnaire 2 : Le rôle du W3C et du WHATWG
0:05:00
- L’évolution des navigateurs et leur compatibilité
-
Questionnaire 3 : L’évolution des navigateurs et leur compatibilité
0:05:00
- Les outils de développement intégrés aux navigateurs
-
Questionnaire 4 : Les outils de développement des navigateurs
0:05:00
- Résultats attendus aux questionnaires
- Exercice – Module 1 : Introduction au Web et aux standards
- Introduction du module 2
- Séparer contenu (HTML) et mise en forme (CSS)
-
Questionnaire 1 : Séparer contenu (HTML) et mise en forme (CSS)
0:05:00
- Respecter une structure sémantique
-
Questionnaire 2 : Respecter une structure sémantique
0:05:00
- Organisation et optimisation du code et des fichiers
-
Questionnaire 3 : Organisation et optimisation du code et des fichiers
0:05:00
- Valider son code (W3C, accessibilité, SEO)
-
Questionnaire : Valider son code (W3C, accessibilité, SEO)
0:05:00
- Résultats attendus aux questionnaires
- Exercice guidé : Créer une page simple avec HTML et CSS séparés
- Exercice 1 – Module 2 : HTML5 - Structure et éléments fondamentaux
- Exercice 2 - Module 2 : Tester la validation d’une page avec le validateur W3C
- Introduction du module 3
- Structure générale d’une page : (<!DOCTYPE html>, <html>, <head>, <body>)
- Téléchargez le mémo Structure générale d’une page HTML5
-
Questionnaire 1 : Structure générale d’une page HTML5
0:05:00
- Les conteneurs sémantiques : (<header>, <nav>, <section>, <article>, <aside>, <footer>)
- Téléchargez le mémo Les conteneurs sémantiques HTML5
-
Questionnaire 2 : Les conteneurs sémantiques
0:05:00
- Les conteneurs de texte : titres, paragraphes, citations, listes, adresses, texte préformaté
-
Questionnaire 3 : Les conteneurs de texte en HTML5
0:05:00
- Mise en forme sémantique : emphase, gras, italique, indice/exposant, souligné, barré
- Téléchargez le Mémo Mise en forme sémantique du texte en HTML5
-
Questionnaire 4 : Mise en forme sémantique du texte en HTML5
0:05:00
- Exercice 1 - Module 3 : Page d’article de blog
- Exercice 2 - Module 3 : Page type “journal”
- Les liens : internes, externes, téléchargement, messagerie
- Exercice guidé : Créer des liens internes et externes
- Exercice guidé : Lien d’envoi d’email
-
Questionnaire 1 : Les liens : internes, externes, téléchargement, messagerie
0:05:00
- Liens en image et attributs rel, target
-
Questionnaire 2 : Liens en image et attributs rel, target
0:05:00
- Éléments interactifs HTML5 : `<details>`, `<dialog>`, `<meter>`, `<progress>`
-
Questionnaire 3 : Éléments interactifs HTML5 : `<details>`, `<dialog>`, `<meter>`, `<progress>`
0:05:00
- Exercice 1 - Module 4 : Créer un menu de navigation avec des liens internes et externes.
- Exercice 2 - Module 4 : Ajouter un bouton qui ouvre une boîte de dialogue <dialog>.
- Tableaux : structure (<table>, <tr>, <td>, <th>), fusion de cellules, colonnes
-
Questionnaire 1 : Tableaux : structure (<table>, <tr>, <td>, <th>), fusion de cellules, colonnes
0:05:00
- Images : formats (JPG, PNG, SVG, WebP), optimisation et attributs (alt, title)
-
Questionnaire 2 : Images : formats (JPG, PNG, SVG, WebP), optimisation et attributs (alt, title)
0:05:00
- Balises : <figure> et <figcaption>
-
Questionnaire 3 : Balises : <figure> et <figcaption>
0:05:00
- Exercice 1 - Module 5 : Tableaux et images
- Exercice 2 - Module 5 : Tableaux et images
- Structure <form>, <label>, <input>
-
Questionnaire 1 : Structure <form>, <label>, <input>
0:05:00
- Champs texte, listes déroulantes, cases à cocher, boutons radio
-
Questionnaire 2 : Champs texte, listes déroulantes, cases à cocher, boutons radio
0:05:00
- Champs HTML5 : email, date, number, color, range
-
Questionnaire 3 : Champs HTML5 : email, date, number, color, range
0:05:00
- Aides à la saisie : placeholder, required, pattern
-
Questionnaire 4 : Aides à la saisie : placeholder, required, pattern
0:05:00
- Exercice 1 - Module 6 : Créer un formulaire de contact avec nom, email, sujet et message.
- Exercice 2 - Module 6 : Ajouter une validation HTML5 avec required et pattern.
- Vidéo : <video> avec contrôles et sous-titres
-
Questionnaire 1 : Vidéo : <video> avec contrôles et sous-titres
0:05:00
- Audio : <audio> avec lecteur intégré
-
Questionnaire 2 : Audio : <audio> avec lecteur intégré
0:05:00
- Microdata et Schema.org
-
Questionnaire 3 : Microdata et Schema.org
0:05:00
- Exercice 1 - Module 7 : Ajouter une vidéo dans une page avec sous-titres .vtt
- Exercice 2 - Module 7 : Intégrer un lecteur audio avec plusieurs formats (mp3, ogg)
- Le rôle des feuilles de style
-
Questionnaire 1 : Le rôle des feuilles de style
0:05:00
- Intégration : inline, interne, externe
-
Questionnaire 2 : Intégration : inline, interne, externe
0:05:00
- Structure d’une règle CSS
-
Questionnaire 3 : Structure d’une règle CSS
0:05:00
- Unités (px, em, rem, %, vh/vw)
-
Questionnaire 4 : Unités (px, em, rem, %, vh/vw)
0:05:00
- Couleurs (hex, RGB, HSL)
-
Questionnaire 5 : Couleurs (hex, RGB, HSL)
0:05:00
- Exercice 1 - Module 8 : Créer un fichier CSS externe et appliquer un style global à une page
- Exercice 2 - Module 8 : Changer la couleur de fond, la police et la taille du texte
- Sélecteurs simples, combinés, pseudo-classes et pseudo-éléments
-
Questionnaire 1 : Sélecteurs simples, combinés, pseudo-classes et pseudo-éléments
0:05:00
- Polices (@font-face, Google Fonts)
-
Questionnaire 2 : Polices (@font-face, Google Fonts)
0:05:00
- Taille, graisse, interlignage, espacement
-
Questionnaire 3 : Taille, graisse, interlignage, espacement
0:05:00
- Transformations de texte
-
Questionnaire 4 : Transformations de texte
0:05:00
- Exercice 1 - Module 9 : Appliquer une police Google Fonts à un site
- Exercice 2 - Module 9 : Créer une liste stylisée avec :hover sur les liens
- Marges, bordures, paddings
-
Questionnaire 1 : Marges, bordures, paddings
0:05:00
- Largeur et hauteur des éléments
-
Questionnaire 2 : Largeur et hauteur des éléments
0:05:00
- Arrière-plans, dégradés, coins arrondis, ombres portées
-
Questionnaire 3 : Arrière-plans, dégradés, coins arrondis, ombres portées
0:05:00
- Exercice guidé : Créer une carte avec fond, coins arrondis et ombre portée
- Exercice 1 - Module 10 : Créer une carte de profil avec image, texte et encadré stylisé
- Exercice 2 - Module 10 : Jouer avec marges/paddings pour comprendre le box model.
- Positionnement : static, relative, absolute, fixed, sticky
-
Questionnaire 1 : Positionnement : static, relative, absolute, fixed, sticky
0:05:00
- Flottement et superposition
-
Questionnaire 2 : Flottement et superposition
0:05:00
- Exercice guidé : Flottement et superposition d’éléments
- Flexbox (ligne, colonne, alignement)
-
Questionnaire 3 : Flexbox (ligne, colonne, alignement)
0:05:00
- Grid Layout (mise en page complexe)
-
Questionnaire 4 : Grid Layout (mise en page complexe)
0:05:00
- Exercice 1 - Module 11 : Créer une galerie d’images avec Flexbox
- Exercice 2 - Module 11 : Créer une grille de produits avec CSS Grid
- Notion de responsive et mobile-first
-
Questionnaire 1 : Notion de responsive et mobile-first
0:05:00
- Media queries et breakpoints
-
Questionnaire 2 : Media queries et breakpoints
0:05:00
- Bonnes pratiques pour mobile et tablette
-
Questionnaire 3 : Bonnes pratiques pour mobile et tablette
0:05:00
- Exercice 1 - Module 12 : Adapter une page de blog pour mobile avec media queries
- Exercice 2 - Module 12 : Créer une mise en page responsive d’accueil (desktop → mobile)
- Transformations (rotation, scale, skew)
-
Questionnaire 1 : Transformations (rotation, scale, skew)
0:05:00
- Transitions (hover)
-
Questionnaire 2 : Transitions (hover)
0:05:00
- Animations avec @keyframes
-
Questionnaire 3 : Animations avec @keyframes
0:05:00
- Masques, filtres et styles pour impression
-
Questionnaire 4 : Masques, filtres et styles pour impression
0:05:00
- Exercice 1 - Module 13 : Créer un bouton animé avec transition au survol
- Exercice 2 - Module 13 : Faire une bannière avec texte animé en fondu
- Création d’un mini-site (ex : portfolio, site vitrine, blog)
-
Questionnaire 1 : Création d’un mini-site (ex : portfolio, site vitrine, blog)
0:05:00
- Intégration de formulaires, tableaux, images et multimédia
-
Questionnaire 2 : Intégration de formulaires, tableaux, images et multimédia
0:05:00
- Mise en page responsive avec Flexbox et Grid
-
Questionnaire 3 : Mise en page responsive avec Flexbox et Grid
0:05:00
- Validation du code et test sur plusieurs navigateurs
-
Questionnaire 4 : Validation du code et test sur plusieurs navigateurs
0:05:00
- Exercice final - Module 14 : Réaliser un site web complet de 3 pages (Accueil, À propos, Contact)
0 €
Vidéos
95
Questionnaires de positionnement
52
Niveau de compétence
Les fondamentaux
