Techniques CSS modernes

https://slides.com/benoistlawniczak/techniques-css-modernes/live

Les outils

Firefox

https://www.mozilla.org/fr/firefox/new/

(Developer Edition)

Mozilla Developer

https://www.youtube.com/MozillaDeveloper

Pourquoi CSS est si bizarre ?

https://www.youtube.com/watch?v=aHUtMbJw8iA

A voir absolument

Les outils

Reset CSS Moderne (par Andy Bell)

https://hankchizljaw.com/wrote/a-modern-css-reset/

+ quelques modifications personnelles

Emmet

https://emmet.io/

pour coder plus vite que mon ombre

Premier projet

En 40 lignes de CSS

Premier projet

Notions abordées

• CSS Grid
• Flexbox
• Custom properties (variables CSS)

Le code

https://codesandbox.io/s/sleepy-liskov-x062v?fontsize=14&hidenavigation=1&theme=dark

Second projet

Second projet

Notions abordées

• CSS Grid
• Custom properties
• Variable Fonts
• Multi-columns module
• Object fit

Le code

https://codesandbox.io/s/flamboyant-dew-mmq5z?fontsize=14&hidenavigation=1&theme=dark

Ressources

Flexbox

• Découverte : https://flexboxfroggy.com/#fr
• Tuto complet : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• En vidéo : https://flexbox.io/

CSS Grid

• Découverte : https://cssgridgarden.com/#fr
• Les bases : https://www.youtube.com/watch?v=KOvGeFUHAC0
• Tuto complet : https://gridbyexample.com/learn/
• En vidéo : https://cssgrid.io/

Ressources

Module multi-colonnes

• https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Columns

Variables CSS

• https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties
• https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

Ressources

Object-Fit

• https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

Variables Fonts

• https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables
• https://www.axis-praxis.org/
• https://v-fonts.com/
• https://play.typedetail.com/

Des questions ?