HTML & CSS Moderne

Concept Clé : Flexbox
Pour centrer un élément parfaitement, on utilise display: flex sur le parent. C'est plus robuste que les marges automatiques.

Centrage Parfait (CSS) Essentiel

.parent {
    display: flex;           /* Active le mode Flexible */
    justify-content: center; /* Axe Horizontal */
    align-items: center;     /* Axe Vertical */
    height: 100vh;           /* Hauteur de l'écran */
}

Les Variables CSS (Custom Properties)

Les variables CSS permettent de stocker des valeurs réutilisables dans toute votre feuille de style. Elles sont définies dans :root pour être accessibles globalement.

:root {
    --primary-color: #004E92;
    --spacing: 20px;
    --border-radius: 12px;
}

.element {
    background-color: var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

Avantages : Réutilisation, cohérence, facilité de maintenance et possibilité de changer le thème en modifiant quelques variables.

Le Box Model

Chaque élément HTML est représenté comme une boîte rectangulaire avec les propriétés suivantes :

Propriété	Description
`content`	Le contenu de l'élément (texte, image, etc.)
`padding`	Espace entre le contenu et la bordure
`border`	Bordure autour du padding
`margin`	Espace externe entre l'élément et ses voisins

Exercice Pratique

Créez un bouton avec les caractéristiques suivantes :

Padding de 15px horizontal et 10px vertical
Bordure de 2px solide de couleur #004E92
Marge de 20px en haut et en bas
Arrondi des coins de 8px

Layout CSS

Flexbox

Flexbox est un modèle de mise en page unidimensionnel conçu pour distribuer l'espace entre les éléments d'un conteneur.

Item 1

Item 2

Item 3

.container {
    display: flex;
    justify-content: space-between; /* Alignement horizontal */
    align-items: center;            /* Alignement vertical */
    gap: 10px;                      /* Espacement entre éléments */
}

Propriété	Valeurs courantes	Description
`justify-content`	flex-start, center, flex-end, space-between, space-around	Aligne les éléments sur l'axe principal
`align-items`	stretch, flex-start, center, flex-end	Aligne les éléments sur l'axe secondaire
`flex-direction`	row, column, row-reverse, column-reverse	Définit la direction des éléments

CSS Grid

CSS Grid est un système de mise en page bidimensionnel qui permet de créer des grilles complexes avec des lignes et des colonnes.

1

2

3

4

5

6

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes égales */
    grid-template-rows: auto;           /* Hauteur automatique */
    gap: 10px;                          /* Espacement */
}

Exercice Pratique

Créez une grille avec 4 colonnes et 2 lignes. La première ligne doit avoir une hauteur fixe de 100px et la seconde une hauteur automatique.

Positionnement

La propriété position détermine comment un élément est positionné dans le document.

Valeur	Description
`static`	Position normale dans le flux (valeur par défaut)
`relative`	Position relative à sa position normale
`absolute`	Position relative au premier parent positionné
`fixed`	Position relative à la fenêtre du navigateur
`sticky`	Position hybride entre relative et fixed

Astuce : Pour centrer un élément avec position: absolute, utilisez top: 50%; left: 50%; transform: translate(-50%, -50%);

Responsive Design

Media Queries

Les Media Queries permettent d'appliquer des styles CSS différents selon les caractéristiques de l'appareil (largeur d'écran, orientation, etc.).

/* Styles pour écrans de moins de 768px */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        display: none;
    }
}

/* Styles pour écrans en mode portrait */
@media (orientation: portrait) {
    .header {
        height: 60px;
    }
}

Points de rupture courants :

max-width: 576px - Téléphones
max-width: 768px - Tablettes
max-width: 992px - Petits écrans
max-width: 1200px - Écrans moyens

Unités Responsives

Utilisez des unités relatives pour créer des designs qui s'adaptent à différentes tailles d'écran.

Unité	Description
`%`	Pourcentage par rapport à l'élément parent
`vw`	1% de la largeur de la fenêtre (viewport width)
`vh`	1% de la hauteur de la fenêtre (viewport height)
`rem`	Relative à la taille de police de l'élément racine (html)
`em`	Relative à la taille de police de l'élément parent

Bonnes pratiques : Utilisez rem pour les tailles de police et les espacements, et vw/vh pour les dimensions de layout.

Images Responsives

Assurez-vous que vos images s'adaptent à la taille de l'écran sans déformer le layout.

.responsive-img {
    max-width: 100%;  /* Ne dépasse pas la largeur du conteneur */
    height: auto;     /* Maintient le ratio d'aspect */
}

.background-img {
    background-size: cover;     /* Couvre toute la zone */
    background-position: center; /* Centre l'image */
}

Exercice Pratique

Créez un layout qui passe de 3 colonnes sur desktop à 1 colonne sur mobile. Utilisez Flexbox ou Grid et une media query pour gérer la transition.

Effets & Animations CSS

Transitions

Les transitions permettent de changer les valeurs des propriétés CSS de manière fluide sur une durée donnée.

Survole-moi

.element {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.element:hover {
    background-color: red;
}

Propriétés de transition :

transition-property - Propriété à animer
transition-duration - Durée de l'animation
transition-timing-function - Courbe d'accélération
transition-delay - Délai avant le début

Animations & Keyframes

Les animations CSS permettent de créer des séquences d'animation complexes avec des keyframes.

Animation

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.element {
    animation: slideIn 0.5s ease-out;
}

Transformations

La propriété transform permet de modifier l'apparence d'un élément en le déplaçant, tournant, mettant à l'échelle ou l'inclinant.

Rotation

Échelle

Inclinaison

.element {
    transform: rotate(45deg) scale(1.1) translateX(10px);
    transition: transform 0.3s ease;
}

Exercice Pratique

Créez un bouton avec un effet de survol qui :

Change de couleur de fond
Se déplace légèrement vers le haut (translateY)
A une ombre portée plus prononcée

L'animation doit durer 0.3s avec un easing de type "ease-out".

React & Hooks

useState Hook

import { useState } from 'react';

function Compteur() {
    // Déclaration d'une variable d'état
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Vous avez cliqué {count} fois
        </button>
    );
}

Java POO

Classe Simple

public class Etudiant {
    private String nom;

    public Etudiant(String nom) {
        this.nom = nom;
    }

    public void direBonjour() {
        System.out.println("Salut, je suis " + this.nom);
    }
}