HTML & CSS : Niveau Intermédiaire

Maîtrisez la mise en page moderne et le responsive design.

Module 4 : Flexbox

Alignement Unidimensionnel

Flexbox est devenu le standard pour aligner des éléments en ligne ou en colonne.

.container {
    display: flex;
    justify-content: space-between; /* Horizontal */
    align-items: center;          /* Vertical */
    flex-wrap: wrap;              /* Retour à la ligne */
}

Module 5 : CSS Grid

Mise en Page Bidimensionnelle

Le Grid Layout permet de créer des structures de pages complexes très facilement.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Module 6 : Responsive Design

S'adapter à tous les écrans

Utilisez les Media Queries pour modifier le style selon la taille de l'écran.

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
    .main-content {
        width: 100%;
    }
}

Retour au hub HTML/CSS Niveau Suivant : Expert