iscom::html/css::session4 (20141105)
DESCRIPTION
ISCOM::HTML/CSS::session4 (20141105)TRANSCRIPT
![Page 1: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/1.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1
Cours HTML / CSSLearn to code
HTML/CSS easily
![Page 2: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/2.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Cours HTML / CSS
• 6 Sessions de ~3 heures > ~18 heures au total,
• A chaque sessions aura des objectifs à atteindre pour pouvoir continuer à la prochaine session,
• 30% de théorie et 70% de pratique,
• Finalité : Monter un site en HTML / CSS responsive,
• En bonus, utilisation d’outil de versioning
2
![Page 3: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/3.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Rappel du projet
3
![Page 4: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/4.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 4
![Page 5: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/5.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Allons de l’avant avec CSS3
5
![Page 6: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/6.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
CSS3• CSS3 est le dernier standard CSS.
• Il est entièrement compatible avec CSS2 (On parle de backwards-compatibility),
• Le CSS3 est cependant en cours de validation W3C …
• … mais beaucoup de navigateurs on déjà implémenté cette nouvelle norme…
• … il ne faut cependant pas oublier les anciens navigateurs qui ne sont pas compatible.
• Le CSS3, c’est du CSS2 avec de nouvelles fonctionnalités.
6
![Page 7: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/7.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 7
CSS3 CheatSheets
![Page 8: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/8.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Les prefixes CSS• Certains navigateurs utilisent des prefixes à certaines déclarations CSS afin de pouvoir utiliser certaines
propriétés compatible.
• Les préfixes contiennent obligatoirement un - au début de leur définition, chaque navigateur a son identifiant, puis la déclaration est réalisée.
• Les préfixes identifié par navigateur :
• Chrome, Safari, Android, … : -webkit-,
• Mozilla Firefox : -moz-,
• Internet Explorer : -ms-,
• Opera : -o-,
• Bien entendu, ces prefixes ne sont pas compatible avec les anciens navigateurs. Il faudra avoir une alternative pour ceux-ci
8
![Page 9: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/9.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Les prefixes CSS
• Exemple d’utilisation :
• On
9
![Page 10: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/10.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Les prefixes CSS
• Exemple d’utilisation :
• On veut mettre une bordure arrondie (border-radius) de 10px sur un div ayant une classe « b-radius-5 ».
• On déclare ceci dans notre CSS.
• Pourquoi ne pas déclarer Opera et IE ?
10
![Page 11: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/11.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
CSS3 Exercice• Exercice simple :
• Vous avez votre site responsive,
• Utilisez les fonctionnalités CSS3 pour animer votre site en CSS,
• Charger une ou plusieurs police(s) google font ( https://www.google.com/fonts ) et appliquez la au menu et au contenu (il faut que celle-ci soit lisible et adaptée à votre site),
• Le site sera compatible IE9+, Firefox, Safari, Chrome, Opera et mobile.
11
![Page 12: ISCOM::HTML/CSS::session4 (20141105)](https://reader034.vdocuments.pub/reader034/viewer/2022052413/559c80df1a28ab69778b4585/html5/thumbnails/12.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Des questions ?
12