2 - "[CSS] Flexbox - Basiques"

Objectif

En CSS l'essentiel du positionnement ce gère avec les propriétés flexbox (display: flex;, justify-content, align-items, flex-direction ...). Ces propriétés sont relativement simples mais demandent pas mal de pratique pour être bien comprises et maitrisées. C'est l'objectif de ces gammes d'exercices. Un peu dans l'esprit d'un musicien qui doit réviser ses gammes, ces taches vous feront réalisés des séries d'exercices pour pratiquer.

Maquette 1 Maquette 2 Maquette 3 Maquette 4

Cours associés

II - 1/ Positionnement

Definition of Done

Une tache est considérée comme complétée lorsque chacune des sous-taches de cette section ont été complétées.

Pour chacune des maquettes:

[x] La maquette est bien reproduite

Code quality:

[x] HTML: 0 erreurs/warnings selon les standards du W3C
[x] HTML: Les textes visibles ne comportent pas de fautes d'orthographe
[x] HTML: Les textes visibles commencent tous par une majuscule
[x] HTML: La langue du document est renseignée
[x] HTML - SEO: title, description et favicon ont été renseignés
[x] HTML - SEO: Si c'est pertinent, les balises sémantiques
,
,
,
,
ont été utilisées
[x] CSS: Aucun padding ni margin négatif sauf exception dûment documentée
[ ] CSS: Aucun padding ni margin supérieur à 50px sauf exception dûment documentée
[x] CSS: Le css comporte un "reset CSS" (cf plus bas)
[ ] CSS: Tous les élements cliquables (liens, boutons, autres) ont un cursor de type pointer
[x] CSS: Les class, id et autres attributs ont des noms respectables et porteurs de sens (pas de aa ou toto ou texte2)
[ ] JS: Le code est commenté
[ ] JS: Pas d'erreur ni de logs inutiles dans la console
[ ] JS: Les variables ont des noms respectables et porteurs de sens

Code quality ++ (Bonus)

[ ] HTML - SEO: Description et preview image pour Facebook, Linkedin et Twitter sont renseignées
[x] CSS: Les couleurs principales du site sont renseignées dans des variables CSS (ex: color: var(--main-blue))
[x] CSS: Les noms de class et id sont en "hyphens-case" c'est à dire avec des tirets. Bon ex: "btn-submit", mauvais "btnSubmit" ou "btn_submit"
[ ] JS: Les noms de variables sont en "camel-case" c'est à dire avec des majuscules. Bon ex: "btnSubmit", mauvais "btn_submit"

NB: Reset CSS de Codephenix

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
li {
  list-style-type: none;
}

Bonnes pratiques de communication

Vous êtes en phase d'apprentissage et s'il est crucial que vous développiez votre autonomie en essayant et en cherchant par vous même il est tout de même courant pour un développeur de demander de l'aide. Pour cela voici un petit florilège des phrases/choses à éviter:

dire "Ca marche pas" sans expliquer précisément ce qui ne marche pas
"J'comprends pas" sans donner de contexte
"... du coup j'ai tout supprimé et j'ai tout recommencé"
"J'ai dit à l'ordi de le faire mais il ne le fait pas"
dire "JAVA" au lieu de "Javascript": ca n'a rien à voir !!!!!!!!!!!

Q&A

Cette section sera complétée par votre formateur lors de la review des taches.

CodePhenix / formation-phenix