Cours HTML / CSS 
Learn to code 
HTML/CSS easily 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com -...
Cours HTML / CSS 
• 6 Sessions de ~3 heures > ~18 heures au total, 
• A chaque sessions aura des objectifs à atteindre pou...
Rappel du projet 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
3
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
Allons de l’avant avec CSS3 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +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)...
CSS3 CheatSheets 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
Les prefixes CSS 
• Certains navigateurs utilisent des prefixes à certaines déclarations CSS afin de pouvoir utiliser cert...
Les prefixes CSS 
• Exemple d’utilisation : 
• On 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com ...
Les prefixes CSS 
• Exemple d’utilisation : 
• On veut mettre une bordure arrondie 
(border-radius) de 10px sur un div 
ay...
CSS3 Exercice 
• Exercice simple : 
• Vous avez votre site responsive, 
• Utilisez les fonctionnalités CSS3 pour animer vo...
Des questions ? 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
12
Prochain SlideShare
Chargement dans…5
×

ISCOM::HTML/CSS::session4 (20141105)

421 vues

Publié le

ISCOM::HTML/CSS::session4 (20141105)

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
421
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

ISCOM::HTML/CSS::session4 (20141105)

  1. 1. Cours HTML / CSS Learn to code HTML/CSS easily Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1
  2. 2. 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 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 2
  3. 3. Rappel du projet Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 3
  4. 4. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
  5. 5. Allons de l’avant avec CSS3 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 5
  6. 6. 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. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 6
  7. 7. CSS3 CheatSheets Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
  8. 8. 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 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 8
  9. 9. Les prefixes CSS • Exemple d’utilisation : • On Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 9
  10. 10. 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 ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10
  11. 11. 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. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 11
  12. 12. Des questions ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 12

×