├── README.md └── _assets └── responsive_patterns.png /README.md: -------------------------------------------------------------------------------- 1 | # CSS Masterclass Curriculum 2 | 3 | Or how to master CSS using available free content. 4 | 5 |

6 | Photo by Paula May on Unsplash 7 |

Photo by Paula May on Unsplash

8 |

9 | 10 |
11 | 12 | CSS is a very vast topic seems to be easy at first, but it becomes a pain in a head when you want to master it not for lack of tutorials but for lack of path or full curriculum to mastering it, here I am going to show you how to master CSS by following a curriculum contain very comprehensive resources from the internet, and sure it will be free. 13 | 14 | --- 15 | 16 | ## What is CSS? 17 | 18 | Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the structural content. (Source: Wikipedia) 19 | 20 | --- 21 | 22 | ## How this curriculum work? 23 | 24 | In each section you can find 📖 Contents and 📚 Resources, in contents I show to you what topics included in this section then in resources sections I list some of the big and most comprehensive ( articles, videos or courses ) resources covering this topic. 25 | But before you start you need to learn the basics of HTML & CSS then follow the Curriculum to master CSS. 26 | 27 | Some section has ⭐ it means that this is recommended tools to use. 28 | 29 | --- 30 | 31 | ## HTML&CSS Basics 32 | 33 | - [html & css is hard](https://internetingishard.com/html-and-css/) - A friendly web development tutorial for complete beginners. 34 | - [Learn CSS](https://web.dev/learn/css/) - An evergreen CSS course and reference to level up your web styling expertise. 35 | - [Introduction to HTML](https://scrimba.com/g/ghtml) - Scrimba. 36 | - [Introduction to CSS](https://scrimba.com/g/gintrotocss) - Scrimba. 37 | - [HTML Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=UB1O30fR-EE) - by Traversy Media on Youtube. 38 | - [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI) - by Traversy Media on Youtube. 39 | 40 | --- 41 | 42 | ## Curriculum 43 | 44 | - [CSS Syntax](#syntax) 45 | - [CSS Selectors](#css-selectors) 46 | - [CSS Properties](#css-properties) 47 | - [CSS Values](#css-values) 48 | - [CSS Cascading](#The-cascade) 49 | - [Styling Content](#styling-content) 50 | 51 | - [CSS Box Model](#css-box-model) 52 | - [CSS Layout](#css-layout) 53 | 54 | - [Responsive Web Design](#responsive-web-design) 55 | 56 | - [CSS Animations and Drawing](#css-animations-and-drawing) 57 | 58 | - [CSS Frameworks](#css-frameworks) 59 | - [CSS Methodologies](#css-methodologies) 60 | - [CSS Preprocessors](#css-preprocessors) 61 | 62 | ### **Syntax** 63 | 64 |

65 | css syntax 66 |

Photo taken from w3schools

67 |

68 | 69 |
70 | 71 | A CSS rule-set consists of a selector and a declaration block: 72 | 73 | The selector points to the HTML element you want to style. 74 | The declaration block contains one or more declarations separated by semicolons. 75 | Each declaration includes a CSS property name and a value, separated by a colon. 76 | A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. (Source: w3schools) 77 | 78 | ### **CSS Selectors** 79 | 80 | In CSS, selectors are used to targeting the HTML elements on our web pages that we want to style. 81 | 82 | #### 📖 Contents 83 | 84 | - **Simple Selectors:** 85 | 86 | - Element 87 | - Class 88 | - Id 89 | - Universal Selector ( _, ns|_, _|_, |\* ) 90 | 91 | - **Combinators & Multiple selectors:** 92 | 93 | - Group of selector [A, B]. 94 | - Descendant selector [A B]. 95 | - Child selector [A > B]. 96 | - Adjacent sibling selector [A + B]. 97 | - General sibling selector [A ~ B]. 98 | 99 | - **Attribute Selectors** 100 | - **Pseudo-class Selectors** 101 | - **Pseudo-element Selectors** 102 | 103 | #### 📚 Resources 104 | 105 | - 📜 [CSS Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors) - MDN web docs. 106 | - 📜 [Simple Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors) - MDN web docs. 107 | - 📜 [Combinators & Multiple selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) - MDN web docs. 108 | - 📜 [Attribute Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors) - MDN web docs. 109 | - 📜 [Pseudo-class and Pseudo-element Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements) - MDN web docs. 110 | 111 | #### [Back to the top](#Curriculum) 112 | 113 | ### **CSS Properties** 114 | 115 | **Note:** You will learn more about properties when you get into proper section but you can learn some generic concept like CSS variables. 116 | 117 | #### 📖 Contents 118 | 119 | - **CSS Variables** 120 | 121 | #### 📚 Resources 122 | 123 | - 📀 [Learn CSS Variables Course](https://scrimba.com/g/gcssvariables) - Scrimba. 124 | - 📜 [CSS Custom Properties Guide](https://css-tricks.com/guides/css-custom-properties/) - CSS Tricks. 125 | - 📜 [Everything you need to know about CSS Variables](https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855) - Freecodecamp. 126 | 127 | #### [Back to the top](#Curriculum) 128 | 129 | ### **CSS Values** 130 | 131 | CSS values are set against CSS Properties and reside within CSS declaration block, which is a part of the CSS rule/statement. 132 | **Note:** You will learn more about each value type when you get into proper section but you can learn some generic values like rem, colors, calc ...etc. 133 | 134 | #### 📖 Contents 135 | 136 | - There are 4 types of values in CSS 137 | 138 | - Colors. 139 | - Length, sizes and numbers. 140 | - Pre-Defined Options. 141 | - Functions. 142 | 143 | - How CSS values are processed. 144 | 145 | - [Initial value](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value) - MDN web docs. 146 | - [Resolved value](https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value) - MDN web docs. 147 | - [Specified value](https://developer.mozilla.org/en-US/docs/Web/CSS/specified_value) - MDN web docs. 148 | - [Computed value](https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value) - MDN web docs. 149 | - [Used value](https://developer.mozilla.org/en-US/docs/Web/CSS/used_value) - MDN web docs. 150 | - [Actual value](https://developer.mozilla.org/en-US/docs/Web/CSS/actual_value) - MDN web docs. 151 | 152 | #### 📚 Resources 153 | 154 | - 📜 [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) - MDN web docs. 155 | - 📜 [A Nerd’s Guide to Color on the Web](https://css-tricks.com/nerds-guide-color-web/) - CSS Tricks. 156 | - 📜 [CSS Gradients Guides](https://css-tricks.com/guides/css-gradients/) - CSS Tricks. 157 | - 📜 [A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/) - CSS Tricks. 158 | 159 | #### [Back to the top](#Curriculum) 160 | 161 | 162 | ### **The cascade** 163 | 164 | Cascading is the algorithm used for solving conflicts where multiple CSS rules apply to an same HTML element. 165 | The cascade algorithm is split into 4 distinct stages. 166 | 167 | **Position and order of appearance:** the order of which your CSS rules appear 168 | **Specificity:** an algorithm which determines which CSS selector has the strongest match 169 | **Origin:** the order of when CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS 170 | **Importance:** some CSS rules are weighted more heavily than others, especially with the !important rule type 171 | 172 | #### 📖 Contents 173 | 174 | - **Position and order of appearance:** 175 | - Inline style 176 | - Embedded style tag 177 | - External file 178 | 179 | - **Specificity hierarchy:** 180 | - Universal selector 181 | - Element or pseudo-element selector 182 | - Class, pseudo-class, or attribute selector 183 | - ID selector 184 | - Inline style attribute 185 | - !important rule 186 | 187 | - **Origin:** 188 | - User agent base styles: Browser style like chrome, firefox, ...etc. 189 | - Local user style: System style like windows, android, ..etc. 190 | - Authored CSS: Any css developer are write 191 | - Authored `!important`: any `!important` developer are write 192 | - 193 | 194 | #### 📚 Resources 195 | 196 | - 📜 [The “C” in CSS: The Cascade](https://css-tricks.com/the-c-in-css-the-cascade/) - CSS Tricks. 197 | - 📜 [Cascading and Inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) 198 | - 📹 [CSS Basics (Part2) — Cascades](https://www.youtube.com/watch?v=tZhmjgLQgXU) - by DevTips on Youtube. 199 | - 📹 [CSS Basics (Part6) — Specificity](https://www.youtube.com/watch?v=fy07HYm-geM) - by DevTips on Youtube. 200 | - 📜 [inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) 201 | - 📜 [Inherit, initial, unset, revert](https://www.quirksmode.org/blog/archives/2021/06/inherit_initial.html) 202 | 203 | #### [Back to the top](#Curriculum) 204 | 205 | ### **CSS Box Model** 206 | 207 |

208 | css box model 209 |

Photo taken from w3.org

210 |

211 | 212 |
213 | 214 | The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model. (source: MDN) 215 | 216 | #### 📖 Contents 217 | 218 | - **Content** (images, text …etc). 219 | - **Fill Area** (the area that contains border, padding, content, and filling with background and background-image). 220 | - **Margins** (Space around elements, outside of any defined borders). 221 | - **Borders** (goes around the padding and content ). 222 | - **Padding** (Transparent area around the content, inside of the box). 223 | - **Box Sizing:** 224 | - content-box: Width and height only apply to the content of the element. 225 | - border-box: Include padding and border in the element's total width and height. 226 | - **Box Shadow:** 227 | - **Background:** 228 | - [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color). 229 | - [background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). 230 | - [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size). 231 | - [background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat). 232 | - [background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position). 233 | - [background-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin). 234 | - [background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip). 235 | - [background-attachment](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment). 236 | - [background-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode). 237 | - Multiple Background Images. 238 | - Linear Gradients. 239 | - Radial Gradients. 240 | - **clip-path** 241 | 242 | #### 📚 Resources 243 | 244 | - 📜 [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model) - MDN web docs. 245 | - 📜 [What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/) 246 | - 📜 [Inline Elements and Block Elements in HTML - Explained](https://www.freecodecamp.org/news/inline-elements-and-block-elements-in-html-explained/) 247 | - 📜 [Getting Deep Into Shadows](https://css-tricks.com/getting-deep-into-shadows/) 248 | - 📜 [Every CSS Background Property Illustrated and Explained with Code Examples 🎖️](https://www.freecodecamp.org/news/learn-css-background-properties/) 249 | - 250 | 251 | #### [Back to the top](#Curriculum) 252 | 253 | ### **Styling Content** 254 | 255 | After you learn the box-model, learning styling content _( which is the part of box-model )_ is the big core concept to master. In this section, you will learn how to style those content like images, text, lists, links ...etc. 256 | 257 | #### 📖 Contents 258 | 259 | - Typography. 260 | - Lists. 261 | - Links. 262 | - Media ( Image, Video, and Audio ). 263 | - Tables. 264 | - Forms. 265 | - Buttons. 266 | 267 | #### 📚 Resources 268 | 269 | - 📜 [A Complete Guide to the Table Element](https://css-tricks.com/complete-guide-table-element/) - CSS Tricks. 270 | - 📜 [Styling Links](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links) - MDN web docs. 271 | 272 | #### [Back to the top](#Curriculum) 273 | 274 | ### **CSS Layout** 275 | 276 | Once you have the ability to target HTML elements for styling, the layout is the next core concept to master. 277 | Layout involves manipulating how elements layout on the page, How much space do they take? Are they side by side or on top of each other?...etc. 278 | 279 | #### 📖 Contents 280 | 281 | - **Normal flow** 282 | - **The display property:** 283 | - Block. 284 | - Inline. 285 | - Inline-Block. 286 | - Flexbox. 287 | - Grid. 288 | - Table. 289 | - **Floats** 290 | - **Positioning** 291 | - Default ( no property specified or Static ). 292 | - Relative. 293 | - Absoulte. 294 | - Fixed. 295 | - Sticky. 296 | - Stacking Content ( Z-Index property ). 297 | - **Multiple-column layout** 298 | 299 | #### 📚 Resources 300 | 301 | - 📜 [Learn CSS Layout](http://learnlayout.com/) 302 | - 📹 [Building layouts with flexbox and CSS grids](https://www.youtube.com/watch?v=2GxAElWKaAo) 303 | - 📜 [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/) - CSS Tricks. 304 | 305 | - Flexbox 306 | 307 | - 👩‍💻 [Flexbox Patterns](https://www.flexboxpatterns.com/) 308 | - 👩‍💻 [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/) 309 | - 📀 [CSS flexbox Course](https://flexbox.io/) - by WesBos. 310 | - 📜 [Flexbox Complete Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - CSS Tricks. 311 | - 📜 [The Complete CSS Flex Tutorial](https://jst.hashnode.dev/complete-css-flex-tutorial) 312 | - 📜 [Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)](https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/) - Freecodecamp. 313 | - 📜 [The Ultimate Guide to Flexbox  — Learning Through Examples](https://www.freecodecamp.org/news/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676/) - Freecodecamp. 314 | - 📜 [Understanding Flexbox: Everything you need to know](https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/) - Freecodecamp. 315 | 316 | - Grid 317 | 318 | - 👩‍💻 [Grid by Example](https://gridbyexample.com/examples/) 319 | - 📀 [CSS Grid Course](https://cssgrid.io/) - by WesBos. 320 | - 📜 [CSS Grid Complete Guide](https://css-tricks.com/snippets/css/complete-guide-grid/) - CSS Tricks. 321 | - 📜 [The Complete CSS Grid Tutorial](https://jst.hashnode.dev/css-grid-tutorial) 322 | - 📜 [How to create an image gallery with CSS Grid](https://medium.freecodecamp.org/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c) - Freecodecamp. 323 | 324 | - Floats 325 | 326 | - 📜 [All About Floats](https://css-tricks.com/all-about-floats/) - CSS Tricks. 327 | - 📹 [CSS Floats Explained](https://www.youtube.com/watch?v=609adV3pTME) - by DevTips on Youtube. 328 | - 📹 [CSS Floats and Clears Explained](https://www.youtube.com/watch?v=xFGBNv2KeVU) - by DevTips on Youtube. 329 | 330 | - Positioning 331 | 332 | - 📹 [CSS Positioning - part1](https://www.youtube.com/watch?v=kejG8G0dr5U) - by DevTips on Youtube. 333 | - 📹 [CSS Positioning - part2](https://www.youtube.com/watch?v=Rf6zAP4YnZA) - by DevTips on Youtube. 334 | 335 | - Multiple-column layout 336 | 337 | - 📜 [When And How To Use CSS Multi-Column Layout](https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/) - Smashing Magazine. 338 | 339 | #### [Back to the top](#Curriculum) 340 | 341 | ### **Responsive Web Design** 342 | 343 | Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices desktops, tablets, and phones. (Source: w3schools) 344 | 345 | #### 📖 Contents 346 | 347 | - **Media Queries** 348 | - **Responsive Images** 349 | - **Common Responsive Patterns** 350 | ![Responsive Patterns](./_assets/responsive_patterns.png) 351 | 352 | - Mostly Fluid. 353 | - Column Drop. 354 | - Layout Shifter. 355 | - Off Canvas. 356 | 357 | - **Responsive Layout Methods:** 358 | - Mobile-First. 359 | - Desktop-First. 360 | 361 | #### 📚 Resources 362 | 363 | - 📀 [Responsive Images](https://udacity.com/course/responsive-images--ud882) 364 | - 📀 [Responsive Web Design Fundamentals](https://udacity.com/course/responsive-web-design-fundamentals--ud893) 365 | - 📀 [Introduction To Responsive Web Design - HTML & CSS Tutorial](https://www.youtube.com/watch?v=srvUrASNj0s&list=WL) 366 | - 📜 [Learn CSS Media Queries by Building Three Projects](https://www.freecodecamp.org/news/learn-css-media-queries-by-building-projects/) 367 | - 📜 [Learn CSS Flexbox by Building 5 Responsive Layouts](https://www.freecodecamp.org/news/learn-flexbox-build-5-layouts/) 368 | 369 | #### [Back to the top](#Curriculum) 370 | 371 | ### **CSS Animations and Drawing** 372 | 373 | CSS Animations involves manipulating how elements should look like over the time by allowing you to specify how elements change from one style to another. 374 | 375 | #### 📖 Contents 376 | 377 | - **CSS Animations - Transforms:** 378 | 379 | - Transform translate(). 380 | - Transform rotate() and Transform-Origin. 381 | - Transform scale(). 382 | - Transform skew(). 383 | - Transform Shorthand. 384 | 385 | - **CSS Animations - Transitions:** 386 | 387 | - Transition Duration. 388 | - Transition Property. 389 | - Transition Timing Function. 390 | - Transition Delay. 391 | - Transition Shorthand. 392 | 393 | - **CSS Animations - Keyframes:** 394 | 395 | - CSS Animation Keyframes. 396 | - CSS Animation Duration. 397 | - CSS Animation Fil Mode. 398 | - CSS Animation Iteration Count. 399 | - CSS Animation Delay. 400 | - CSS Animation Direction. 401 | - CSS Animation Timing Function. 402 | - CSS Animation Properties. 403 | - CSS Animation Shorthand. 404 | 405 | - **CSS Shapes:** 406 | - CSS Shapes: the inset() function. 407 | - CSS Shapes: The circle() Function. 408 | - CSS Shapes: The ellipse() Function. 409 | - CSS Shapes: The polygon() function. 410 | - CSS Shapes: Shapes from the Alpha Channel. 411 | - CSS Shapes: Shapes from the Reference Box. 412 | 413 | #### 📚 Resources 414 | 415 | - 📜 [An Introduction to Web Animations](https://medium.freecodecamp.org/an-introduction-to-web-animations-86f45de2a871) - Freecodecamp. 416 | - 📜 [A Simple CSS Animation Tutorial](https://medium.freecodecamp.org/a-simple-css-animation-tutorial-8a35aa8e87ff) - Freecodecamp. 417 | - 📜 [CSS Animation Performance](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) 418 | 419 | #### [Back to the top](#Curriculum) 420 | 421 | 422 | 423 | 424 | ### **CSS Frameworks** 425 | 426 | In this area, you can pick up any framework you want, but I will list here the most famous one. 427 | 428 | #### 📖 Contents 429 | 430 | - **Tailwind CSS** ⭐ 431 | - **Bootstrap** ⭐ 432 | - **Bulma** 433 | 434 | #### 📚 Resources 435 | 436 | - [Tailwind CSS](https://tailwindcss.com/docs/what-is-tailwind/) 437 | 438 | - 📹 [Vanilla CSS vs Bootstrap vs Tailwind CSS - Which one should you choose?](https://www.youtube.com/watch?v=vmXIGdP8KN8) 439 | - 📹 [Introduction to Tailwind CSS](https://www.youtube.com/playlist?list=PLylMDDjFIp1Dt5hWKHPIHtdF2GFAS8Ak9) 440 | - 📀 [Tailwind CSS](https://www.youtube.com/playlist?list=PLEhEHUEU3x5p8cxOJ27w20LffCknp935L) 441 | 442 | - [Bootstrap](https://getbootstrap.com/) 443 | 444 | - 📀 [Learn Bootstrap 4 Course](https://scrimba.com/g/gbootstrap4) - Scrimba. 445 | - 📜 [Bootstrap 4: Everything You Need to Know](https://medium.freecodecamp.org/bootstrap-4-everything-you-need-to-know-c750991f6784) - Freecodecamp. 446 | - 📜 [Bootstrap Framework — Best Practices](https://hackernoon.com/bootstrap-framework-best-practises-b1d81c02d6cf) 447 | 448 | - [Bulma](https://bulma.io/) 449 | 450 | - 📀 [learn Bulma Course](https://scrimba.com/g/gbulma) - Scrimba. 451 | - 📀 [Bulma Crash Course](https://www.youtube.com/watch?v=IiPQYQT2-wg&index=23&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) - by Traversy Media on Youtube. 452 | 453 | 454 | #### [Back to the top](#Curriculum) 455 | 456 | ### **CSS Methodologies** 457 | 458 | If you're not careful, it is easy to write complex, confusing, and unmaintainable CSS. so there are many ways to manage that. 459 | 460 | #### 📖 Contents 461 | 462 | - **Common naming conventions:** 463 | - [BEM](http://getbem.com/). 464 | - [OOCSS](http://oocss.org/). 465 | - [SMACSS](https://smacss.com/). 466 | - [SUITCSS](https://suitcss.github.io/). 467 | - [Atomic](https://acss.io/). 468 | 469 | #### 📚 Resources 470 | 471 | - 📜 [BEM For Beginners: Why You Need BEM](https://www.smashingmagazine.com/2018/06/bem-for-beginners/) - Smashing Magazine. 472 | 473 | #### [Back to the top](#Curriculum) 474 | 475 | ### **CSS Preprocessor** 476 | 477 | The use of CSS preprocessors has become so important especially when you start working on a large project. 478 | Learn about the most famous and common used preprocessor ( SASS ), Why I use it?, How to use it? and How to writing maintainable and scalable Sass. 479 | 480 | #### 📖 Contents 481 | 482 | - **Common Preprocessors:** 483 | - SASS. ⭐ 484 | - LESS. 485 | - Stylus. 486 | - PostCSS. ⭐ 487 | 488 | #### 📚 Resources 489 | 490 | - 📜 [Learn Sass In 15 Minutes | Tutorialzine](https://tutorialzine.com/2016/01/learn-sass-in-15-minutes) 491 | - 📀 [SASS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA) - by The Net Ninja on Youtube. 492 | - 📹 [Sass Workflow & Dev Server From Scratch Using Gulp](https://www.youtube.com/watch?v=rmXVmfx3rNo) - by Traversy Media on Youtube. 493 | - 📜 [Sass Guidelines](https://sass-guidelin.es/) 494 | - 📜 [How to structure a Sass project](http://thesassway.com/beginner/how-to-structure-a-sass-project) 495 | - 📜 [PostCSS – A Comprehensive Introduction](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) - Smashing Magazine. 496 | 497 | #### [Back to the top](#Curriculum) 498 | 499 | 500 | ## Where to go next? 501 | 502 | In general, I found this blogs, newsletter or courses the best resources to learn CSS in specific and web development in general and for those who prefer paid courses I list for you the best-paid courses available on the web. 503 | 504 | - References 📜 505 | 506 | - [HTML Reference](http://htmlreference.io/) 507 | - [CSS Reference](http://cssreference.io/) 508 | - [MDN Dev](https://developer.mozilla.org/en-US/) 509 | - [The Ultimate Guide to Learning CSS](https://zendev.com/ultimate-guide-to-learning-css.html) 510 | 511 | - Courses & Books 📀 📚 512 | 513 | - [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/) 514 | - 💲 [CSS - The Complete Guide (incl. Flexbox, Grid & Sass)](https://www.udemy.com/css-the-complete-guide-incl-flexbox-grid-sass/) 515 | - 💲 [Advanced CSS and Sass: Flexbox, Grid, Animations and More!](https://www.udemy.com/advanced-css-and-sass/) 516 | 517 | - Blogs 📝, Podcast 🎙, Newsletter 📫 & Conferences 📢 518 | 519 | - [CSS Tricks](https://css-tricks.com/) 📝 520 | - [Smashing Magazine](https://www.smashingmagazine.com/) 📝 521 | - [THe CSS Podcast](https://thecsspodcast.libsyn.com/) 🎙 522 | 523 | ### [Back to the top](#Curriculum) 524 | -------------------------------------------------------------------------------- /_assets/responsive_patterns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMM9O/css-masterclass-curriculum/d9dde59976c06ce38b69e0018b63f835df2d2660/_assets/responsive_patterns.png --------------------------------------------------------------------------------