HTML et CSS

#HTML et CSS modernesCopier le lien

Commencez par un HTML sémantique: <header>, <nav>, <main>, <section>, <article>, <footer>. Associez chaque input à un label, structurez vos titres en niveau (h1→h2→h3).

En CSS, pensez “layout d’abord”. Flexbox organise en ligne/colonne, Grid aligne des zones. Déclarez des variables (custom properties) pour les couleurs/espaces et créez un système simple (8, 16, 24…).

Exemple:

1<main class="container">2  <article class="card">3    <h1>Inscription</h1>4    <form>5      <label for="email">Email</label>6      <input id="email" type="email" required />7      <button>Valider</button>8    </form>9  </article>10  11</main>

1:root { --space: 1rem; --radius: .5rem; }2.container { max-width: 720px; margin: 0 auto; padding: var(--space); }3.card { background: white; border-radius: var(--radius); padding: calc(2*var(--space)); }4@media (prefers-color-scheme: dark) { .card { background: #0f172a; color: #e2e8f0; } }

Mini‑exercice: créez une grille 2 colonnes responsive qui passe en 1 colonne sous 640px, avec des cartes à coins arrondis et ombre légère.

#Animation: pipeline de renduCopier le lien