HTML et CSS : créer ses premières pages web
Pour débutants complets : du premier fichier HTML au site qui s'adapte au téléphone
- Teacher : none yet
- Beginner
- 1 student
About this course
La formation pour créer ses premières pages web, sans aucune connaissance au départ. Partie HTML : structure d'une page, titres, textes et listes, liens et images, tableaux, balises sémantiques et formulaires. Partie CSS : couleurs, sélecteurs, mise en forme du texte, modèle de boîte, mise en page avec Flexbox et Grid, et responsive design pour le téléphone. Chaque notion suit le même plan : définition, syntaxe, exemples. Des exercices avec un aperçu en direct, un quiz par chapitre, et des devoirs corrigés par le professeur pour construire votre propre portfolio.
Syllabus · 71 lessons
HTML 1 · Découvrir le web, le HTML et le CSS
- Bienvenue dans la formation HTML et CSS · Texte free preview
- Comment fonctionne une page web ? · Texte
- Les balises HTML · Texte
- Les attributs · Texte
- Votre premier fichier HTML · Texte
- Exercice : votre première page · Code exercise
- Quiz : Découvrir le web, le HTML et le CSS · Quiz
HTML 2 · La structure d'une page HTML
- Le squelette d'une page HTML · Texte
- La balise head : charset, title et viewport · Texte
- Les commentaires et l'indentation · Texte
- Exercice : une page complète · Code exercise
- Quiz : La structure d'une page HTML · Quiz
HTML 3 · Les textes et les listes
- Les titres h1 à h6 · Texte
- Paragraphes, retours à la ligne et mise en valeur · Texte
- Les listes à puces et numérotées · Texte
- Les caractères spéciaux · Texte
- Exercice : une recette de cuisine · Code exercise
- Quiz : Les textes et les listes · Quiz
- Devoir 1 : le contenu de votre portfolio · Graded assignment
HTML 4 · Les liens et les images
- Les liens · Texte
- Chemins absolus et relatifs · Texte
- Les images · Texte
- Les figures et la légende · Texte
- Exercice : liens et image · Code exercise
- Quiz : Les liens et les images · Quiz
HTML 5 · Les tableaux et la structure sémantique
- Les tableaux · Texte
- Les balises sémantiques · Texte
- Les boîtes génériques div et span · Texte
- Exercice : un emploi du temps · Code exercise
- Exercice : la structure d'une page · Code exercise
- Quiz : Les tableaux et la structure sémantique · Quiz
- Devoir 2 : liens, images et structure · Graded assignment
HTML 6 · Les formulaires
- La balise form · Texte
- Les champs input et leurs étiquettes · Texte
- Zones de texte, listes déroulantes, cases et boutons · Texte
- Un formulaire de contact complet · Texte
- Exercice : un formulaire d'inscription · Code exercise
- Quiz : Les formulaires · Quiz
- Devoir 3 : le formulaire de contact · Graded assignment
CSS 1 · Premiers pas en CSS
- Qu'est-ce que le CSS ? · Texte
- Les trois façons d'ajouter du CSS · Texte
- Les couleurs · Texte
- Exercice : vos premières couleurs · Code exercise
- Quiz : Premiers pas en CSS · Quiz
CSS 2 · Les sélecteurs et le texte
- Les sélecteurs de base · Texte
- La cascade, l'héritage et la priorité · Texte
- Mettre en forme le texte · Texte
- Les unités de mesure · Texte
- Les pseudo-classes : hover et compagnie · Texte
- Exercice : sélecteurs et texte · Code exercise
- Quiz : Les sélecteurs et le texte · Quiz
CSS 3 · Le modèle de boîte
- Chaque élément est une boîte · Texte
- padding, margin et border · Texte
- width, height et box-sizing · Texte
- Les fonds et les ombres · Texte
- Exercice : de belles cartes · Code exercise
- Quiz : Le modèle de boîte · Quiz
- Devoir 4 : la mise en forme · Graded assignment
CSS 4 · La mise en page avec Flexbox
- block, inline et inline-block · Texte
- Flexbox : le conteneur flexible · Texte
- Aligner et répartir avec Flexbox · Texte
- Un mot sur CSS Grid · Texte
- Exercice : un menu et des cartes · Code exercise
- Quiz : La mise en page avec Flexbox · Quiz
CSS 5 · Le responsive : s'adapter au téléphone
- Qu'est-ce que le responsive design ? · Texte
- Les media queries · Texte
- Les variables CSS · Texte
- Récapitulatif et bonnes pratiques · Texte
- Exercice : une page qui s'adapte · Code exercise
- Quiz : Le responsive : s'adapter au téléphone · Quiz
- Devoir 5 : un portfolio responsive (projet final) · Graded assignment
Student reviews
No reviews yet.