Semaine 5

Objectifs

• Lâcher un peu Javascript
• Maîtriser CSSGrid et Flex

Lundi

Correction des exercices rendus

Veille de la semaine

• Mardi : ARIA (Guillaume)
• Mercredi : DNS (Clément)
• Jeudi : Linting en JS
• Vendredi : Strict mode en JS
• Lundi prochain : GRDP

Flex

Introduit avec CSS3, Flex est un outil qui permet enfin de disposer vos éléments comme vous le souhaitez. C'est beau, responsif et pratique. Ne vous étonnez donc pas de trouver des tonnes de documentation, tutoriels et autres sites de référence.

Quelques liens

• Des liens, beaucoup de liens
• Les patterns
• Un autre bon moyen de commencer
• Un nouveau départ
• Encore un tuto
• Un dernier guide

Les sites réalisés par la promo 1

• https://carole1975.github.io/ProjetFlex/
• https://dilou89.github.io/Flexbox/
• https://patrick31000.github.io/Pr-sentation-Flexbox/
• https://julien31210.github.io/Site-Flex/

Apprendre par la pratique

• Froggy
• Flexbox Defense
• Un dernier jeu pour la route

CSS Grid

CSS Grid est un module de la spécification CSS permettant de gérer l'alignement, la taille et la position d'éléments.

Quelques liens

• Grid Garden
• Specs MDN
• La spec officielle
• Playground chez Mozilla
• Grid par l'exemple
• Grid en vidéo par Wes Bos
• Griddy
• Grid par l'exemple en vidéo

Flex VS CSS Grid : les consignes

En groupes de trois à quatre personnes, préparez le meilleur support possible pour faire découvrir Flex et CSS Grid, leurs différences et complémentarités.

• Comment les utiliser?
• Avec quels navigateurs?
• Comment les comparer?

Livrables

• Kanban
• Point projet quotidien par mail (PPP : produit, prévu, problème)
• Wireframes au format papier
• Templates HTML/CSS

Présentation prévue mardi 22 mai matin, rendu pour le 21 mai minuit (lundi c'est férié)

Mardi

Kata : décomposition en produit de facteurs premiers

• Rédigez une fonction expandedFirstForm qui développe un nombre en un produit de facteurs premiers.

• Exemple :

    expandedFirstForm(12); // Should return '2*2*3'
    expandedFirstForm(42); // Should return '2*3*7'
    expandedFirstForm(240); // Should return '2*2*2*2*3*5'  
  

Mercredi

Révisions pour ceux qui veulent

Jeudi

Randori

Your goal in this kata is to implement an difference function, which subtracts one list from another.

• It should remove all values from list a, which are present in list b.

difference([1,2],[1]) == [2]

• If a value is present in b, all of its occurrences must be removed from the other:

difference([1,2,2,2,3],[2]) == [1,3]

Projets fil rouge : 1ère partie

Ces projets sont conçus pour être utiles aux apprenants. Ils sont au nombre de deux :

• [Glossaire] un glossaire en ligne reprenant toutes les notions et termes abordés en cours de formation.
• [AdC] un arbre de compétences en ligne. Ils reviennent plusieurs fois en cours de formation afin de mettre à profit les nouvelles compétences des apprenants.

A rendre pour vendredi soir minuit!

Répartition

Les apprenants se répartissent aussi équitablement que possible entre les deux projets.

• Sur l'un d'entre eux, on devrait avoir un groupe de 3 et un groupe 4.
• Sur l'autre, on aura donc deux groupes de 4.

Les groupes en question vont s'emparer du projet et le porter tout au long de la formation.

Objectifs

• Produire une ébauche du site

Livrables

• Kanban
• Point projet quotidien par mail (PPP : produit, prévu, problème)
• Wireframes au format papier
• Templates HTML/CSS

Heures de code

Dès la semaine prochaine, on attaque les heures de code.
Ca se passe par là pour s'y former : https://hourofcode.com/fr/how-to
Et vous trouverez tous les documents nécessaires sur le drive.

Liens utiles

Il serait peut-être temps de renseigner vos liens utiles (Github, LinkedIn, Medium, CV, etc), non?