📄 Structure de base HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Contenu ici -->
</body>
</html>

🏷️ Balises HTML principales

BaliseRôle
<h1> à <h6>Titres de niveau 1 à 6
<p>Paragraphe
<a href="">Lien hypertexte
<img src="" alt="">Image avec texte alternatif
<ul>, <ol>, <li>Listes (non ordonnée, ordonnée, item)
<div>Division (conteneur neutre)
<section>, <article>, <main>, <header>, <footer>Structure sémantique
<form>Formulaire
<input>, <textarea>, <button>Champs de formulaire

🔧 Attributs HTML fréquents

AttributUtilisation
hrefURL d’un lien <a>
srcChemin d’une image <img>
altTexte alternatif (accessibilité) pour image
classAppliquer des styles CSS
idIdentifier un élément unique
nameNom de champ de formulaire
placeholderTexte grise de suggestion dans un champ
requiredRend un champ obligatoire
typeType de champ (text, email, submit, etc.)

🎨 CSS : syntaxe de base

sélecteur {
  propriété: valeur;
}

Exemple :

h1 {
  color: blue;
  font-size: 2em;
}

🔍 Sélecteurs CSS utiles

SélecteurEffet
pCible tous les <p>
.classeCible tous les éléments de cette classe
#idCible l’élément avec cet id
div pCible les <p> dans un <div>
a:hoverCible un lien au survol

🧱 Propriétés CSS fréquentes

Texte & couleur

  • color
  • background-color
  • font-size, font-family, font-weight, font-style
  • text-align, text-decoration

Espacement

  • margin, padding
  • border, border-radius

Boîte et mise en forme

  • display, width, height
  • box-shadow, box-sizing

Positionnement

  • float, position, top, left, z-index
  • flex, grid (voir ci-dessous)

🔄 Flexbox (récap rapide)

.parent {
  display: flex;
  flex-direction: row; /* ou column */
  justify-content: center;
  align-items: center;
}

🔳 Grid (récap rapide)

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

📱 Media Queries (Responsive)

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .nav ul {
    flex-direction: column;
  }
}

🌐 Liens utiles