Une série de 25 exercices sur HTML et CSS (niveau basique) pour renforcer vos
compétences :
Exercices HTML
Exercice 1 : Structure HTML de base
Crée une page HTML avec la structure de base :
<!DOCTYPE html>
<html>, <head>, <body>
Ajoute un titre dans <title> et un en-tête <h1> dans le <body>.
Exercice 2 : Paragraphe et texte
Crée une page HTML avec :
Un en-tête <h1>.
Trois paragraphes <p> avec des textes différents.
Exercice 3 : Liens hypertextes
Crée une page HTML avec :
Un lien vers Google en utilisant la balise <a>.
Un lien qui s'ouvre dans une nouvelle fenêtre (target="_blank").
Exercice 4 : Listes ordonnées et non ordonnées
Crée une liste ordonnée <ol> de 5 fruits.
Crée une liste non ordonnée <ul> de 5 légumes.
Exercice 5 : Images
Ajoute une image en utilisant la balise <img>.
Utilise une image locale et une image provenant d'une URL.
Ajoute un texte alternatif (alt) à chaque image.
1
Exercice 6 : Tableau simple
Crée un tableau <table> avec :
3 colonnes : Nom, Prénom, Âge.
3 lignes de données.
Une bordure autour du tableau.
Exercice 7 : Formulaire simple
Crée un formulaire avec :
Un champ texte pour le nom.
Un champ email.
Un champ mot de passe.
Un bouton de validation.
Exercice 8 : Champs de formulaire avancés
Crée un formulaire avec :
Une case à cocher.
Un bouton radio.
Une liste déroulante avec 3 options.
Exercice 9 : Balises sémantiques
Crée une page HTML avec les balises :
<header>, <nav>, <section>, <article>, <footer>.
Exercice 10 : Audio et Vidéo
Intègre une vidéo locale dans une page HTML.
Ajoute un fichier audio avec la balise <audio>.
2
Exercices CSS
Exercice 11 : Style de base avec CSS
Change la couleur du texte de la page en bleu.
Change la couleur de fond en gris clair.
Exercice 12 : Styliser un texte
Crée une classe CSS qui :
Modifie la taille de la police.
Modifie la couleur du texte.
Change la police (font-family).
Exercice 13 : Styliser une liste
Change le style des puces d'une liste non ordonnée (list-style-type).
Change la couleur du texte de la liste.
Exercice 14 : Bordures
Crée une div <div> avec une bordure :
Bordure de 2px solide.
Bordure de couleur rouge.
Exercice 15 : Marges et paddings
Crée une boîte <div> avec :
Une marge extérieure de 20px.
Un rembourrage intérieur de 10px.
Exercice 16 : Flexbox simple
Crée une section contenant 3 div.
Utilise Flexbox pour aligner les div horizontalement.
3
Exercice 17 : Alignement vertical et horizontal
Crée une div de 300px x 300px.
Centre le texte horizontalement et verticalement.
Exercice 18 : Boutons stylisés
Crée un bouton <button> avec :
Une couleur de fond verte.
Une couleur au survol différente.
Un arrondi des bords.
Exercice 19 : Pseudo-classes
Crée un lien <a> avec :
Une couleur différente quand il est visité.
Une couleur différente au survol (:hover).
Exercice 20 : Animation simple
Crée une boîte <div> avec une animation CSS :
Change la couleur de fond sur 2 secondes.
Exercices HTML + CSS
Exercice 21 : Carte de profil
Crée une carte de profil avec :
Une photo de profil.
Un nom en <h2>.
Une description en <p>.
Stylise le tout avec CSS.
4
Exercice 22 : Grille CSS (CSS Grid)
Crée une grille de 3 colonnes et 2 lignes.
Ajoute un contenu dans chaque cellule.
Exercice 23 : Menu de navigation
Crée une barre de navigation avec :
4 éléments de menu.
Un effet de survol avec changement de couleur.
Exercice 24 : Formulaire stylisé
Crée un formulaire avec :
Champ texte, email et mot de passe.
Bouton stylisé avec une couleur de fond.
Effet au survol.
Exercice 25 : Page complète
Crée une page HTML complète avec :
Un en-tête (<header>) avec un titre.
Une barre de navigation (<nav>).
Un contenu principal (<section>) avec texte et images.
Un pied de page (<footer>).
Stylise le tout avec CSS.
