<aside> 📝

Écrire le HTML et le CSS de cinq blocs d’un site de festival, avec des flexbox imbriqués, puis faire des commits et un push.

</aside>

1. Cloner le repository

Le repository de l’exercice vous est distribué via classroom50. Acceptez le devoir, puis clonez le repository dans VS Code en suivant la documentation :

Classroom50

Installez ensuite les dépendances et lancez le serveur de développement, en suivant les sections « Reprendre un projet cloné » et « Lancer le serveur de développement » :

NPM et Parcel

2. Reproduire la maquette

Ouvrez la maquette Figma : https://www.figma.com/design/hJ8WE9Q3IyjEqhn5qAoA7J/M2-E2?node-id=0-1&p=f&t=PrEaTiIVIyH7QCeE-0

Le repository contient un index.html réduit au squelette et une feuille de style vide : cette fois, la structure et les styles sont à écrire. Intégrez les quatre premiers blocs dans l’ordre, ils se corsent petit à petit. Le pied de page est un bonus si le temps le permet.

<aside> ☝

N’oubliez pas d’intégrer la Google Font

</aside>

Nommer ses classes

Donnez une classe au bloc, puis des classes préfixées par le nom du bloc à ses parties. On lit ainsi le rôle de chaque élément sans remonter dans le HTML :

<header class="header">
  <p class="header-logo">ONDE FESTIVAL</p>
  <ul class="header-nav">
    <li><a href="#">Programme</a></li>
  </ul>
</header>

Même principe pour les autres blocs : ticket, ticket-price, ticket-perks, ticket-button, ou program-row, program-time, program-artist.

Les éléments qui se répètent à l’intérieur d’un bloc n’ont pas besoin de leur propre classe, on les cible depuis le bloc :

.header-nav a {
  color: white;
}

3. Rendu

Faites un commit après chaque bloc terminé, puis un push.

C’est votre push qui fait office de rendu. Vérifiez sur classroom50 que votre dernier commit est bien arrivé.