# ONLINE RESOURCES To Learn CSS #

---
## :heart_eyes_cat: **CHEAT SHEET**

**Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)**
https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/

**CSS GRID GENERATOR**
https://cssgrid-generator.netlify.com/

**USEFUL CSS SNIPPETS**
https://30-seconds.github.io/30-seconds-of-css/

**CSS Snippets" + " | CSS-Tricks**
https://css-tricks.com/snippets/

**HTML & CSS Cheatsheet (PDF included)**
https://ilovecoding.org/blog/htmlcss-cheatsheet

**CSS selectors cheatsheet & details – Design & Code Repository**
https://medium.com/design-code-repository/css-selectors-cheatsheet-details-9593bc204e3f

**CSS Reference - A free visual guide to CSS**
https://cssreference.io/

---
## :heart: **FREE**
1. **Learn CSS in this free 6-hour video course**
https://www.freecodecamp.org/news/learn-css-in-this-free-6-hour-video-course/

2. **CSS Crash Course for Absolute Beginners - Full Course**
https://youtu.be/KN6oBEOz2ZI

3. **The CSS Handbook: a handy guide to CSS for developers**
https://www.freecodecamp.org/news/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11/

4. **CSS in A Nutshell**
https://webgems.io/css/

5. **Easily Create Responsive Websites with the Foundation Framework**
https://www.freecodecamp.org/news/foundation-crash-course/

6. **The 30 CSS Selectors You Must Memorize**
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

7. **HTML and CSS | The Odin Project**
https://www.theodinproject.com/courses/html5-and-css3

8. **The impossible CSS layout: Grid? Flexbox? Floats? Columns? JS!**
https://kutt.it/NNcWJI

9. **Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.**
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
https://watercss.netlify.com/

10. **Can I use... Support tables for HTML5, CSS3, etc**
https://caniuse.com/#feat=css-sticky

11. **QUIZ: Well aimed? How well do you know CSS selectors?**
https://codepen.io/pehaa/pen/ROapJZ

12. **How to use CSS position to layout a website (with example code)**
https://coder-coder.com/css-position-layout/

13. **Menu Animation With CSS Transition**
https://codepen.io/moniet/pen/QWLqEEz?editors=0110

14. **Programming Foundations with JavaScript, HTML and CSS**
https://www.coursera.org/learn/duke-programming-web

15. **Learn HTML & CSS Correctly**
https://ilovecoding.org/courses/htmlcss2

16. **Learn CSS Grid**
https://scrimba.com/g/gR8PTE

17. **CSS Diner - Where we feast on CSS Selectors!**
https://flukeout.github.io/

18. **The main differences between Flexbox and CSS Grid**
https://medium.freecodecamp.org/the-main-differences-between-flexbox-and-css-grid-667c03461d2b

19. **Bulma: Free, open source, & modern CSS framework based on Flexbox**
https://bulma.io/

20. **Vocab Quiz
using Bulma — CSS Framework**
https://wonderful-booth-06933f.netlify.com/

21. **Conquer Free Website Template | Free CSS Templates**
https://www.free-css.com/free-css-templates/page196/conquer

22. **CSS Animation - The Pulse Effect**
https://www.florin-pop.com/blog/2019/03/css-pulse-effect/

23. **If you've ever been curious about using CSS Grid to build intricate graphic layouts like this one** 👇 but don't know where to start, my @smashingconf (Twitter) Toronto talk is for you.
Hope to see you there!
https://t.co/cFrFJVCiva

*Grid Experiment No. 7*
https://codepen.io/julesforrest/full/VqXvgQ

24. **CSS Magic**
https://glitch.com/@glitch/css-magic

25. **CSS NOTES for Professionals: Hints & Tricks**
https://books.goalkicker.com/CSSBook/

26. **Centering in CSS: A Complete Guide**
https://css-tricks.com/centering-css-complete-guide/

27. **A Smarter Way to Learn HTML & CSS - Index of Exercises**
http://www.asmarterwaytolearn.com/htmlcss/index-of-exercises.html

28. **Sass is basically a way to make CSS more manageable on bigger websites.**
https://www.creativebloq.com/web-design/what-is-sass-111517618

29. **MarkSheet: a short HTML and CSS tutorial**
https://marksheet.io/

---
## :tomato: TOOL

**The W3C CSS Validation Service**
https://jigsaw.w3.org/css-validator/

---
## :hammer: PROJECT

**Here's a fun project to build: How to use a little CSS Grid magic to design a calculator app**
https://medium.freecodecamp.org/how-to-use-a-little-css-grid-magic-to-design-a-calculator-app-e162afb2fdb4

**Pure CSS Moustached Nanny**
https://codepen.io/miocene/pen/mjLPVp

**Wall of Panels
(Animated Landing Page with Sound Effect)
HTML, CSS, JavaScript**
https://code.sololearn.com/Wen965eIRDOU/?ref=app

---
## :game_die: GAME

**Flexbox Zombies | CSS GAME**
*Master Flexbox Layout: A Story Course*
https://mastery.games/p/flexbox-zombies

**Learning CSS Through Games**
● http://flexboxfroggy.com/
● https://cssgridgarden.com/

---
## :moneybag: PAID
1. **Web Design for Beginners: Real World Coding in HTML & CSS | Udemy**
https://www.udemy.com/course/web-design-for-beginners-real-world-coding-in-html-css/