Devoir à la Maison : Maîtrise de la Mise en Page avec HTML et CSS

Objectif
Améliorer votre compréhension et votre compétence dans l'utilisation des différentes propriétés de
display en HTML et CSS à travers la création d'une page web structurée.

Instructions
Partie 1 : Structure de la Page
1. Créez un fichier HTML (index.html) et un fichier CSS (styles.css).
2. Structurez votre page web avec des éléments de base : en-tête (header), corps principal
(main), et pied de page (Footer).

Partie 2 : Display: Block et Inline-Block

1. Dans l'en-tête et le pied de page, utilisez display: block pour structurer les éléments.
2. Ajoutez une barre de navigation ou une liste d'éléments dans le corps principal en utilisant
display: inline-block. Jouez avec la largeur, la hauteur et la couleur pour créer un design
attrayant.

Partie 3 : Mise en Page avec Flexbox

1. Créez une section dans le corps principal qui met en œuvre display: flex.
2. Organisez une série d'éléments (comme des boîtes, des images, ou du texte) de manière
horizontale ou verticale. Utilisez des propriétés comme justify-content et align-items pour
modifier l'alignement et la distribution.

Partie 4 : Grille avec CSS Grid

1. Ajoutez une autre section qui utilise display: grid.
2. Créez une grille pour présenter des éléments tels que des cartes de produit, des images, ou
des blocs de texte. Expérimentez avec différentes tailles et dispositions de colonnes et de
lignes.

Partie 5 : Utilisation de Display: None

1. Ajoutez un élément dans votre page (par exemple, un paragraphe ou une image) et
appliquez-lui display: none.
 2. Expliquez dans votre rapport comment cet élément pourrait être utilisé dans un contexte
réel (par exemple, un message d'avertissement qui ne s'affiche qu'en réponse à certaines
actions).

Partie 6 : Rapport de Réflexion

1. Expliquez comment vous avez utilisé chaque propriété display dans votre projet.
2. Discutez de l'importance de chaque propriété dans la conception web et comment elles
peuvent être utilisées pour améliorer l'expérience utilisateur.

Critères d'Évaluation
1. Fonctionnalité : Le site doit être fonctionnel et afficher correctement les propriétés de
display.
2. Esthétique et Créativité : Utilisation créative des propriétés CSS pour créer une page
visuellement attrayante.
3. Propreté et Organisation du Code : Le HTML et le CSS doivent être bien structurés et
commentés.
4. Compréhension et Analyse : Clarté et pertinence des explications dans le rapport.