HTML & CSS

Training / HTML & CSS

Courses

• pdf HTML5
• pdf [CSS3 keyframe](https://github.com/simplonco/html-css-training/blob/master/courses/CSS3 keyframe.pdf)
• pdf Bootstrap
• pdf LESS

Exercises

Exercices given without automated validation, with just a short explanation

• balloc.evitca
• Debug me, I'm famous!
• Create a CV with Bootstrap to conquer the World!
• HTML and CSS Ninja Training!
• Ten Commandments of HTML and CSS!
• Challenge intégration + Github

Projects

Long project activity, without tutorial, but some functional specifications, to engage students autonomy

• Static Website Groups Project (HTML / CSS / Bootstrap)
• Intégration "Privy" WebDesign

Resources

Currated list of external ressources

• Une introduction au HTML : 🇫🇷
  • Comprendre l'architecture d'une page ; l'histoire du "HTML au HTML5"
  • Les balises et leurs fonctionnement
• Comprendre le CSS :
  • A quoi ça sert ?
• Codecademy 🇫🇷 🇬🇧
• https://www.grafikart.fr/formations/html-css
• http://www.htmldog.com/guides/css/

Simplonline

• Intégration HTML/CSS (Simplonline) http://simplonline.co/dashboard/partages-formateurs/244-semaine-1-integration-html-css 🇫🇷
• Bootstrap (Simplonline) http://simplonline.co/dashboard/consignes/75-consignes-promo-4/357-s01e02-0-bootstrap 🇫🇷
• Achtemeuleu et say ès ès (Simplonline)
  • http://simplonline.co/dashboard/consignes/75-consignes-promo-4/335-s01e00-0-achtemeuleu-et-say-es-es 🇫🇷
  • http://simplonline.co/dashboard/consignes/75-consignes-promo-4/336-s01e00-1-achtemeuleu-et-say-es-es 🇫🇷

Mozilla Developer Network

• Mozilla Teaching Activities https://teach.mozilla.org/activities/ 🇬🇧
• The Magic of CSS http://adamschwartz.co/magic-of-css/ 🇬🇧

HTML Checkers

• Best practice, be sure your page validate this 2 checks: https://developers.google.com/speed/pagespeed/ & https://validator.w3.org/
• https://la-cascade.io/flexbox-guide-complet/ 🇫🇷
• http://tympanus.net/codrops/collective 🇬🇧
• http://shoelace.io/ 🇬🇧
• http://autoprefixer.github.io/ 🇬🇧
• https://la-cascade.io/css-grid-layout-guide-complet/ 🇫🇷
• https://expo.getbootstrap.com/ 🇬🇧

CSS Preprocessors

• http://lesscss.org/
• http://sass-lang.com/
• http://stylus-lang.com/

Discourses (Montreuil Promo #3)

• Projet WoW (World of WarCraft)
• Silent Teacher
• Projet Pottermore
• Exercices type => HTML and CSS Ninja Training!
• Les challenges additionnels
• Challenges du mercredi
• Cours sur HTML et CSS
• Positionnement des éléments en CSS
• Projet Game Of Thrones

How to Contribute

Please read the Contribution guide first!

Do you want to add a resource? correct a mistake? Or do you need a new exercise or project to cover a topic? Do not hesitate to write an issue!

To be continued..