TL Flexbox Flag

Pour cette séance, nous allons commencer avec un tout nouveau dossier.

Crée un nouveau dossier drapeau. Fais un click droit et selectionne New Folder.

Ensuite glisse le dossier dans ton éditeur de texte (Sublime Text, par exemple), et crée les deux fichiers habituels:

                  
                    drapeau/
                    |-- index.html
                    |-- style.css

👇🏽 Voici une animation qui te montre comment proceder:

Petit rappel :

Pour selectionner des boites d'un fichier codé en HTML depuis un fichier codé en CSS, on doit commencer par lier les deux fichiers.

Dans la section <head> de ton fichier index.html, ajoute la ligne 5 afin de le lier avec le fichier style.css.

              <!DOCTYPE html>
                <html>
                <head>
                  ...
                  <link href="style.css" rel="stylesheet" />
                </head>

Petit rappel de vocabulaire:

Afin de bien visualiser notre drapeau, nous allons créer une grande boite div qui aura un attribut id ayant la valeur porte-drapeau. Cette boite va servir de porte drapeau, comme son nom l'indique 👀.

              <body>
                <div id="porte-drapeau">
                </div>
              </body>

🤔 Pourquoi utiliser un id ?

Selectionnons notre porte drapeau dans notre fichier style.css et donnons lui un peu de style à l'aide de plusieurs propriétés CSS 👘

Petit rappel de vocabulaire:

                selecteur{
                  propriété: valeur;
                }

Pour selectionner une boite avec un id, on utilise le #

              #porte-drapeau{
                height: 950px;
                background-color: lightblue;
                border-radius: 5px;
                padding: 10px;
              }

👉🏽 Maintenant, tu peux faire un click droit et Open in Browser afin de visualiser le résultat.

Maintenant il faut créer le drapeau 💪🏽

Le drapeau belge est composé de 3 parties qui sont identiques en tous points SAUF pour la c o u l e u r

Nous allons donc créer trois div qui vont avoir une class appellée partie.

              <body>
                <div id="porte-drapeau">
                  <div class="partie"></div>
                  <div class="partie"></div>
                  <div class="partie"></div>
                </div>
              </body>

🤔 Pourquoi utiliser des class ?

A présent, nous alons devoir attribuer des propriétés CSS aux parties du drapeau afin de les voir.

Petit rappel :

Pour selectionner une boite avec une class, on utilise le .

              .partie{
                height: 300px;
                width: 30%;
                border: 1px solid black;
                margin-bottom: 8px;
              }

☝🏽 Comment sont placées les parties de notre drapeau? Pourquoi?

🤔 Comment va t on faire en sorte de colorer individuellement chaque partie de notre drapeau ? ( click sur la bonne réponse)

❌ FAUX

Les class sont utilisées lorsque des propriétées CSS sont appliquées à plusieurs boites à la fois. Or dans notre cas, chaque partie du drapeau a une couleur qui lui est unique.

✅ CORRECT

Nous allons pouvoir selectionner une partie de notre drapeau à la fois, et lui donner une couleur spécifique, en attribuant à celle-ci un id unique.

                    #noir{
                      background-color: black;
                    }
                    #jaune{
                      background-color: yellow;
                    }
                    #rouge{
                      background-color: red;
                    }

⚠️ N'oublie pas d'attribuer le bon id à chaque partie :

<div class="partie"></div>

❌ FAUX 🤦🏽‍♀️

Nous n'en sommes pas encore la! C'est pour cette raison que les Dev. existent. Mais qui sait? Peut etre que tu vas être la personne qui developpera cet ordinateur 🖖🏽.

👏🏽 Bravo!

Il est temps de faire de notre drapeau, le drapeau belge!

Pour y arriver, on va utiliser une propriété CSS qui s'appelle flexbox. Dans ton fichier style.css ajoute la ligne 3 au bon endroit.

              #porte-drapeau{
                ...
                display: flex;
              }

👇🏽 Voilà le résultat auquel tu devrais arriver :

🤓 Si tu es vraiment attentif, tu remarques que ce n'est pas exactement le résultat que tu obtiens. Pourquoi ?

Nous aimerions que le drapeau se trouve au centre du porte drapeau (au centre de la boite bleue)

Lecture

Un.e développeur passe beaucoup de temps à lire de la documentation 🤓. Pour trouver la solution à cette étape, il va te falloir aller sur ce site et essayer d'y trouver l'information dont tu as besoin.

N'hésites surtout pas à essayer differentes propriétés, à te tromper, et puis réessayer avec autre chôse. Ça fait partie du jeu 👩🏽‍💻.

👇🏽 Voici une animation qui te montre ce à quoi il faut arriver :

On va commencer par demander à notre #porte-drapeau la boite parent de faire en sorte que l'ensemble de son contenu les boites enfants :
```
<div class="partie" id="..."></div>
```
soit centré horizontalement, en ajoutant la ligne 4.

                    #porte-drapeau{
                      ...
                      display: flex;
                      justify-content: center;
                    }

Ensuite on fait la même chôse, mais cette fois on centre les parties verticalement en ajoutant cette ligne de code : align-items: center; au bon endroit.

🎉 Félicitations d'être arrivé aussi loin!

Nous allons maintenant donner plus de hauteur à nos parties, pour que notre drapeau ne soit pas trop plat.

👇🏽 Voilà le résultat final :

Créer une nouvelle class:

Pour ce faire nous allons commencer par créer une nouvelle .class dans notre fichier style.css.
```
                  .hauteur{
                    height: 700px;
                  }
                
```
Mais cette class n'a pas encore été attribuée à nos parties dans le fichier index.html. C'est fait exprès!

Ajouter une transition:

Nous aimerions que le changement de hauteur soit animé. Du coup, il nous faut spécifier quelque part dans notre CSS que la transition entre la première hauteur et la nouvelle se fait en quelque secondes.

Rajoute la ligne 3 au bon endroit.
```
                  .partie{
                    ...
                    transition: height 2s ease-out;
                  }
                
```

Lancer l'animation:

Ouvre l'inspecteur (de préference sur ), et selectionne la première partie :
```
<div class="partie" id="noir"></div>
```
Ajoute manuellement la .hauteur a cette partie
Comment faire ?
1. Selectionne l'élement HTML que tu veux transformer
2. Double click sur l'attribut que tu veux changer
3. Ajoute une nouvelle valeur à cet attribut
4. Appuye sur Enter pour voir le changement.
Réplique ce qui est fait 👇🏽 :

JavaScript

Dans la pratique, les développeurs ne procèdent pas toujours de cette facon. Il existe un autre language de programmation, JavaScript, qui permet de manipuler les éléments HTML automatiquement. Mais une chôse à la fois 👩🏽‍🚀.

FLEXBOX

intro

Lecture

Créer une nouvelle `class`:

Ajouter une transition:

Lancer l'animation:

Comment faire ?

JavaScript

FLEXBOX

intro

Etape 1 - Dossier et fichiers

Etape 2 - Lier ton fichier CSS et ton fichier HTML

Etape 3 - Créer le porte drapeau

Etape 4 - Styler le porte drapeau

Etape 5 - Créer les 3 parties du drapeau

Etape 6 - Styler les parties du drapeau

Etape 7 - Colorer les parties du drapeau Quizz

1️⃣ En utilisant une class

2️⃣ En utilisant un id

3️⃣ L'ordinateur va le faire tout seul

Etape 8 - Flexbox

Etape 9 - Aligner le drapeau au centre Difficile 🏆

Lecture

Etape 10 - Agrandir le drapeau avec une animation Optionnel

Créer une nouvelle class:

Ajouter une transition:

Lancer l'animation:

Comment faire ?

JavaScript

Créer une nouvelle `class`: