CSS Resources
Tags: css, github, opensource, webdev
Published: 2021-03-26 09:48:59

# CSS Resources Compilation

> 
This is a CSS resource compilation repository I published on  [GitHub](https://github.com/lanre-waju/CSS-Resources). Check it out and feel free to contribute to the repository.

## Table of Contents

- [CSS Basics](#css-basics)
- [CSS Flexbox](#css-flexbox)
- [CSS Grid](#css-grid)
- [CSS Animations](#css-animations)
- [Media Queries](#media-queries)
- [Bootstrap](#bootstrap)
- [Sass](#sass)


## CSS Basics

### 💻 Online Courses

- [Basic HTML and CSS - freeCodeCamp](https://www.freecodecamp.org/learn/)

- [Learn CSS - Codecademy](https://www.codecademy.com/courses/learn-css/lessons/css-setup-selectors/exercises/intro-to-css)

- [Web Design for Everybody: Basics of Web Development & Coding Specialization - Coursera](https://www.coursera.org/specializations/web-design)


### 📺 Youtube

- [CSS Crash Course For Absolute Beginners - Traversy Media](https://youtu.be/yfoY53QXEn)

- [HTML & CSS Crash Course Tutorial - The Net Ninja](https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G)

- [Learn HTML5 and CSS3 For Beginner-Crash Course - Dev Ed](https://www.youtube.com/watch?v=vQWlgd7hV4A)

- [CSS Tutorial-Zero to Hero (Complete Course) - freeCodeCamp](https://www.youtube.com/watch?v=1Rs2ND1ryYc)


### 🎮 Interactive Program

- [CSS Diner](https://flukeout.github.io/)


### 📃 Blogs

- [Learn to Code HTML & CSS - Shay Howe](https://learn.shayhowe.com/html-css/)

- [HTML & CSS - Interneting Is Hard](https://www.internetingishard.com/)

- [HTML & CSS - The Odin Project](https://learn.shayhowe.com/html-css/)

- [Learn CSS Layout - Learn Layout](https://learnlayout.com/)

- [Reilient Web Design - Jeremy Keith](https://resilientwebdesign.com/)


### 📖 Books

- [HTML and CSS: Design and Build Websites by Jon Duckett](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_1?dchild=1&keywords=html+and+css&qid=1606132990&s=books&sr=1-1)

- [Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages by Elisabeth Robson](https://www.amazon.com/Head-First-HTML-CSS-Standards-Based/dp/0596159900/ref=pd_sbs_14_14?_encoding=UTF8&pd_rd_i=0596159900&pd_rd_r=0ebd0894-2733-4c76-8d5d-74a92535365c&pd_rd_w=SK3sp&pd_rd_wg=TAqPQ&pf_rd_p=ed1e2146-ecfe-435e-b3b5-d79fa072fd58&pf_rd_r=2D4R7893M8EJEN35P768&psc=1&refRID=2D4R7893M8EJEN35P768)

- [Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Robbins](https://www.amazon.com/Learning-Web-Design-Beginners-JavaScript/dp/1491960205/ref=pd_sim_14_9?_encoding=UTF8&pd_rd_i=1491960205&pd_rd_r=b2b2d2e0-7564-4c60-9817-637d81d959ba&pd_rd_w=QhxPO&pd_rd_wg=yV3vD&pf_rd_p=8958999c-906e-4b6b-80aa-4bc1f740ed92&pf_rd_r=KBXP5V0YTVQVMD07BBMW&psc=1&refRID=KBXP5V0YTVQVMD07BBMW)

- [HTML5 and CSS3 All-in-One For Dummies by Andy Harris](https://www.amazon.com/HTML5-CSS3-All-One-Dummies/dp/1118289382/ref=pd_sbs_14_11?_encoding=UTF8&pd_rd_i=1118289382&pd_rd_r=41b295e6-9169-4496-accd-5d44d3f0bc41&pd_rd_w=cBS5K&pd_rd_wg=n8ros&pf_rd_p=ed1e2146-ecfe-435e-b3b5-d79fa072fd58&pf_rd_r=N1CZ5454XS23FYKAK8ZW&psc=1&refRID=N1CZ5454XS23FYKAK8ZW)

- [CSS: The Missing Manual by David Sawyer McFarland](https://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/1491918055/ref=sr_1_1?dchild=1&keywords=css+missing+manuals&qid=1606133846&s=books&sr=1-1)

- [CSS: The Definitive Guide: Visual Presentation for the Web by Eric A. Meyer](https://www.amazon.com/CSS-Definitive-Guide-Visual-Presentation/dp/1449393195/ref=pd_sbs_14_2/135-9851133-8926761?_encoding=UTF8&pd_rd_i=1449393195&pd_rd_r=1b015591-683a-48a5-bfd7-95d987010256&pd_rd_w=1FJLH&pd_rd_wg=QvJvu&pf_rd_p=ed1e2146-ecfe-435e-b3b5-d79fa072fd58&pf_rd_r=5FTWZ3ZF922042X8DKPY&psc=1&refRID=5FTWZ3ZF922042X8DKPY) 

- [Murach's HTML5 and CSS3 by Anne Boehm](https://www.amazon.com/Murachs-HTML5-CSS3-Boehm-Ruvalcaba/dp/1943872260/ref=sr_1_1?crid=NFE0KKKP8RNX&dchild=1&keywords=murach%27s+html5+and+css3&qid=1606134159&s=books&sprefix=murach%2Cstripbooks-intl-ship%2C456&sr=1-1) 


### 📄 Docs 

- [HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML)

- [CSS - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)

- [HTML - w3schools](https://www.w3schools.com/html/default.asp)

- [CSS - w3schools](https://www.w3schools.com/css/default.asp)

- [CSS - Dev Docs](https://devdocs.io/css/)

- [CSS - CSS Refrence](https://cssreference.io/)

- [CSS - CSS Values](https://cssvalues.com/)




## CSS Flexbox

### 💻 Online Courses

- [CSS Flexbox - freeCodeCamp](https://www.freecodecamp.org/learn/)

- [What the Flexbox?! - Wes Bos](https://flexbox.io/) 


### 📺 Youtube

- [Flexbox CSS In 20 Minutes - Travesy Media](https://www.youtube.com/watch?v=JJSoEo8JSnc)

- [CSS Flexbox Tutorial - The Net Ninja](https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG) 

- [CSS Flexbox Course - freeCodeCamp](https://www.youtube.com/watch?v=-Wlt8NRtOpo)

- [Learn Flexbox in 20 Minutes - Dev Ed](https://www.youtube.com/watch?v=FTlczfR82mQ)

- [Learn Flexbox in 15 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=fYq5PXgSsbE)


### 🎮 Interactive Program

- [Flexbox Froggy](http://flexboxfroggy.com/)

- [Flexbox Defense](http://www.flexboxdefense.com/)

- [Flexbox Game](http://www.flexboxgame.com/)

- [CSS Flexbox Playground by Gabi](https://codepen.io/enxaneta/pen/adLPwv)



### 📃 Blogs

- [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

- [A Visual Guide to CSS3 Flexbox Properties - Scotch](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)

- [Flexbox CSS Refrence Concept - Codrops](https://tympanus.net/codrops/css_reference/flexbox/)


### 📖 Books

- [Flexbox in CSS by Estelle Weyl](https://www.amazon.com/Flexbox-CSS-Estelle-Weyl-ebook/dp/B072JHT5L4/ref=sr_1_3?dchild=1&keywords=flexbox&qid=1606182052&s=books&sr=1-3)

- [Flexbox Explained: Your Step-by-Step Guide to Flexbox (The Explained Series) by Jorge Montoya](https://www.amazon.com/Flexbox-Explained-Step-Step-Guide-ebook/dp/B07V5JN7GX/ref=sr_1_1?crid=1KNA35HY0AEBE&dchild=1&keywords=flexbox+explained&qid=1606182411&sprefix=flexbox+explained%2Cstripbooks-intl-ship%2C300&sr=8-1)


### 📄 Docs 

- [CSS Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

- [CSS Flexbox - w3schools](https://www.w3schools.com/css/css3_flexbox.asp)

- [CSS Flexible Box Layout Module Level 1 - W3C](https://www.w3.org/TR/css-flexbox-1/)



## CSS Grid

### 💻 Online Courses

- [CSS Grid - freeCodeCamp](https://www.freecodecamp.org/learn/)

- [CSS Grid - Wes Bos](https://cssgrid.io/)


### 📺 Youtube

- [CSS Grid Layout Crash Course - Travesy Media](https://www.youtube.com/watch?v=jV8B24rSN5o)

- [CSS Grid Tutorial - The Net Ninja](https://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY) 

- [CSS Grid Course - freeCodeCamp](https://www.youtube.com/watch?v=t6CBKf8K_Ac)

- [CSS Grid Tutorial | CSS Grid Crash Course - Dev Ed](https://www.youtube.com/watch?v=EFafSYg-PkI)

- [Learn CSS Grid in 20 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=9zBsdzdE4sM)

- [Learn CSS Grid in 20 Minutes - codeSTACKr](https://www.youtube.com/watch?v=0-DY8J_skZ0) 

- [Videos on CSS Grid - Layout Land](https://www.youtube.com/watch?v=FEnRpy9Xfes&list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1)


### 🎮 Interactive Program

- [Grid Garden](http://cssgridgarden.com/)


### 📃 Blogs

- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

- [Grid CSS Reference Concept - Codrops](https://tympanus.net/codrops/css_reference/grid/)

- [Best Practices with CSS Grid Layout - Smashing Magazine](https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/)


### 📖 Books

- [Grid Layout in CSS: Interface Layout for the Web by Eric A. Meyer](https://www.amazon.com/Grid-Layout-CSS-Interface-Web-ebook/dp/B01EGQ1QI8/ref=sr_1_3?dchild=1&keywords=css+grid&qid=1606185837&sr=8-3)

- [CSS Grid Explained: Your Step-by-Step Guide to CSS Grid (The Explained Series) by Jorge Montoya](https://www.amazon.com/CSS-Grid-Explained-Step-Step-ebook/dp/B07K2FDP7S/ref=sr_1_1?dchild=1&keywords=css+grid+explained&qid=1606185985&sr=8-1)


### 📄 Docs 

- [CSS Grid Layout - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

- [CSS Grid Layout Module - w3schools](https://www.w3schools.com/css/css_grid.asp)

- [CSS Grid Layout Module Level 1 - W3C](https://www.w3.org/TR/css-grid-1/)




## CSS Animations

### 💻 Online Courses

- [CSS Animation - freeCodeCamp](https://www.freecodecamp.org/learn/)


### 📺 Youtube

- [CSS3 Animation and Transitions Crash Course - Travesy Media](https://www.youtube.com/watch?v=zHUpx90NerM)

- [CSS Animation Tutorial - The Net Ninja](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)

- [Learn CSS Animation in 15 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=YszONjKpgg4)


### 📃 Blogs

- [Animation - CSS Tricks](https://css-tricks.com/almanac/properties/a/animation/)

- [CSS Animation Libraries - CSS Tricks](https://css-tricks.com/css-animation-libraries/)


### 📖 Books

- [Transitions and Animations in CSS: Adding Motion with CSS by Estelle Weyl](https://www.amazon.com/Transitions-Animations-CSS-Adding-Motion/dp/149192988X/ref=pd_sbs_14_5/135-9851133-8926761?_encoding=UTF8&pd_rd_i=149192988X&pd_rd_r=5b40b837-1a28-48c0-914e-dd38038a129a&pd_rd_w=vhLGy&pd_rd_wg=3T4z9&pf_rd_p=ed1e2146-ecfe-435e-b3b5-d79fa072fd58&pf_rd_r=JC7PE07SRGFC6GHMW3PF&psc=1&refRID=JC7PE07SRGFC6GHMW3PF)

- [Creating Web Animations: Bringing Your UIs to Life by Kirupa Chinnathambi](https://www.amazon.com/Creating-Web-Animations-Bringing-Your/dp/1491957514/ref=pd_bxgy_img_2/135-9851133-8926761?_encoding=UTF8&pd_rd_i=1491957514&pd_rd_r=11da9b89-fe44-47c6-b571-feba51db8809&pd_rd_w=2L4LD&pd_rd_wg=JTTRP&pf_rd_p=f325d01c-4658-4593-be83-3e12ca663f0e&pf_rd_r=GAF77V0GYEFV8Y8BRVH8&psc=1&refRID=GAF77V0GYEFV8Y8BRVH8)

- [SVG Animations: From Common UX Implementations to Complex Responsive Animation by Sarah Drasner](https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation/dp/1491939702/ref=pd_bxgy_img_2/135-9851133-8926761?_encoding=UTF8&pd_rd_i=1491939702&pd_rd_r=83d328eb-203e-4626-b951-fea78baae522&pd_rd_w=sGUiP&pd_rd_wg=Wmfnu&pf_rd_p=f325d01c-4658-4593-be83-3e12ca663f0e&pf_rd_r=QH4P4KS0Q2F6CWG2GFV5&psc=1&refRID=QH4P4KS0Q2F6CWG2GFV5)


### 📄 Docs 

- [CSS Animation - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

- [CSS Animation - w3schools](https://www.w3schools.com/css/css3_animations.asp)




## Media Queries

### 💻 Online Courses

- [Media Queries - freeCodeCamp](https://www.freecodecamp.org/learn/)


### 📺 Youtube

- [Learn CSS Media Query in7 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=yU7jJ3NbPdA)

- [Responsive Web Design Tutorial #5-Media Queries - The Net Ninja](https://www.youtube.com/watch?v=5xzaGSYd7jM)

- [Tutorial: Learn how to use CSS Media Queries in less than 5 minutes - Kevin Powell](https://www.youtube.com/watch?v=2KL-z9A56SQ)

- [Responsive Design & Media Queries in 30ish Minutes - Colt Steele](https://www.youtube.com/watch?v=na-X_SM8vg0)

- [CSS Media Queries for Responsive Design - Adrian Twarog](https://www.youtube.com/watch?v=j1AhSWFcZpg)


### 📃 Blogs

- [Media Queries Gallery](https://mediaqueri.es/)

- [Media Queries for Standard Devices - CSS Tricks](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)

- [CSS Media Queries & Using Available Space - CSS Tricks](https://css-tricks.com/css-media-queries/)

- [How to Use Media Queries in Responsive Web Design - UXPin](https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/) 


### 📖 Books

- [Learning Responsive Web Design: A Beginner's Guide by Clarissa Peterson](https://www.amazon.com/Learning-Responsive-Web-Design-Beginners-ebook/dp/B00KWLTDKK/ref=sr_1_5?dchild=1&keywords=responsive+web+design&qid=1606280132&s=books&sr=1-5)

- [Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques by Ben Frain](https://www.amazon.com/Responsive-Web-Design-HTML5-CSS/dp/1839211563/ref=sr_1_1?dchild=1&keywords=responsive+web+design&qid=1606279903&s=books&sr=1-1)

- [Responsive Design: Patterns & Principles by Ethan Marcotte](https://www.amazon.com/Responsive-Design-Principles-Ethan-Marcotte/dp/1937557332/ref=sr_1_1?dchild=1&keywords=responsive+design+patterns+and+principles&qid=1606280986&s=books&sr=1-1) 


### 📄 Docs 

- [Using Media Queries - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

- [Responsive Web Design Media Queries - w3schools](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)

- [Media Queries - W3C](https://www.w3.org/TR/css3-mediaqueries/)




## Bootstrap

### 💻 Online Courses

- [Bootstrap - freeCodeCamp](https://www.freecodecamp.org/learn/)


### 📺 Youtube

- [Bootstrap Beginner Crash Course - Travesy Media](https://www.youtube.com/watch?reload=9&v=5GcQtLDGXy8)

- [Bootstrap 4 Tutorial - The Net Ninja](https://www.youtube.com/watch?v=QAgrHLtG1Yk&list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv)

- [Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3 - Drew Ryan](https://www.youtube.com/watch?v=9cKsq14Kfsw&pbjreload=101)


### 📃 Blogs

- [The Bootstrap Blog](https://blog.getbootstrap.com/)


### 📖 Books

- [Introducing Bootstrap 4: Create Powerful Web Applications Using Bootstrap by Jorg Krause](https://www.amazon.com/Introducing-Bootstrap-Create-Powerful-Applications/dp/1484262026/ref=pd_sbs_14_6/135-9851133-8926761?_encoding=UTF8&pd_rd_i=1484262026&pd_rd_r=c4a5b8cd-a0a2-4555-b993-4454e386e022&pd_rd_w=buXpM&pd_rd_wg=J8ogw&pf_rd_p=ed1e2146-ecfe-435e-b3b5-d79fa072fd58&pf_rd_r=EX8GS43RGY8HEE46SK8A&psc=1&refRID=EX8GS43RGY8HEE46SK8A)

- [Bootstrap: Responsive Web Development by Jake Spurlock](https://www.amazon.com/Bootstrap-Responsive-Development-Jake-Spurlock/dp/1449343910/ref=pd_sbs_14_4/135-9851133-8926761?_encoding=UTF8&pd_rd_i=1449343910&pd_rd_r=2e86c19f-bd82-481b-a048-5648773bfc3d&pd_rd_w=KEbq6&pd_rd_wg=WBHH5&pf_rd_p=ed1e2146-ecfe-435e-b3b5-d79fa072fd58&pf_rd_r=8FXZY6VS5WZQ8MYD56PA&psc=1&refRID=8FXZY6VS5WZQ8MYD56PA)

- [Mastering Bootstrap 4 - Second Edition: Master the latest version of Bootstrap 4 to build highly customized responsive web apps by Benjamin Jakobus](https://www.amazon.com/Mastering-Bootstrap-version-customized-responsive/dp/1788834909/ref=sr_1_1?dchild=1&keywords=mastering+bootstrap&qid=1606311345&s=books&sr=1-1) 


### 📄 Docs 

- [Get Bootstrap](https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/)

- [Bootstrap 4 Tutorial - w3schools](https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp)




## Sass

### 💻 Online Courses

- [Sass - freeCodeCamp](https://www.freecodecamp.org/learn/)


### 📺 Youtube

- [Sass Crash Course - Travesy Media](https://www.youtube.com/watch?v=nu5mdN2JIwM)

- [Sass Tutorial - The Net Ninja](https://www.youtube.com/watch?v=St5B7hnMLjg&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA)

- [Sass Tutorial for Beginners-CSS with Superpowers - freeCodeCamp](https://www.youtube.com/watch?v=_a5j7KoflTs)

- [Learn Sass in 20 Minutes - Dev Ed](https://www.youtube.com/watch?v=Zz6eOVaaelI)

### 🎮 Interactive Program

- [The Sass Playground](https://www.sassmeister.com/)


### 📃 Blogs

- [Sass Blog](https://sass-lang.com/blog)


### 📖 Books

- [Mastering Sass by Luke Watts](https://www.amazon.com/Mastering-Sass-Luke-Watts-ebook/dp/B01G5LOM74/ref=sr_1_1?dchild=1&keywords=sass&qid=1606311506&s=books&sr=1-1)


### 📄 Docs 

- [Sass Documentation](https://sass-lang.com/documentation)

- [Sass Tutorial - w3schools](https://www.w3schools.com/sass/)