Programmation

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

  • Professeur : aucun pour le moment
  • Débutant
  • 1 étudiant

À propos de ce cours

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.

Programme · 71 leçons

HTML 1 · Découvrir le web, le HTML et le CSS

  • Bienvenue dans la formation HTML et CSS · Texte aperçu gratuit
  • Comment fonctionne une page web ? · Texte
  • Les balises HTML · Texte
  • Les attributs · Texte
  • Votre premier fichier HTML · Texte
  • Exercice : votre première page · Exercice de code
  • 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 · Exercice de code
  • 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 · Exercice de code
  • Quiz : Les textes et les listes · Quiz
  • Devoir 1 : le contenu de votre portfolio · Devoir noté

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 · Exercice de code
  • 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 · Exercice de code
  • Exercice : la structure d'une page · Exercice de code
  • Quiz : Les tableaux et la structure sémantique · Quiz
  • Devoir 2 : liens, images et structure · Devoir noté

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 · Exercice de code
  • Quiz : Les formulaires · Quiz
  • Devoir 3 : le formulaire de contact · Devoir noté

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 · Exercice de code
  • 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 · Exercice de code
  • 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 · Exercice de code
  • Quiz : Le modèle de boîte · Quiz
  • Devoir 4 : la mise en forme · Devoir noté

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 · Exercice de code
  • 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 · Exercice de code
  • Quiz : Le responsive : s'adapter au téléphone · Quiz
  • Devoir 5 : un portfolio responsive (projet final) · Devoir noté

Avis des étudiants

Aucun avis pour le moment.