├── LICENSE
├── README.md
└── style.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 İlker Demir
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Concepts Every CSS Developer Should Know
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | This repository inspired by [33-js-concepts](%28https://github.com/leonardomso/33-js-concepts%29). It's a guide for CSS developers.
61 |
62 |
63 |
64 |
65 |
66 | 🙏 Thank you [Leonardo Maldonado](https://github.com/leonardomso)
67 |
68 |
69 |
70 |
71 |
72 | ## Community
73 |
74 |
75 |
76 | Feel free to translate this repository into your language. All translations will be listed below.
77 |
78 |
79 |
80 |
81 |
82 | - [English](https://github.com/ilker0/22-css-concepts) — İlker Demir
83 | ---
84 |
85 |
86 |
87 |
88 |
89 | ## Table of Contents
90 |
91 |
92 | 1. **[Box Model](#1-box-model)**
93 | 2. **[Selectors](#2-selectors)**
94 | 3. **[Colors](#3-colors)**
95 | 4. **[Spacing](#4-spacing)**
96 | 5. **[Pseudo Elements and Classes](#5-pseudo-elements-and-classes)**
97 | 6. **[Border and Outline](#6-border-and-outline)**
98 | 7. **[Flexbox](#7-flexbox)**
99 | 8. **[Grid](#8-grid)**
100 | 9. **[Animations](#9-animations)**
101 | 10. **[Overflow and Scroll Snap](#10-overflow-and-scroll-snap)**
102 | 11. **[Text and Typography](#11-text-and-typography)**
103 | 12. **[Functions](#12-functions)**
104 | 13. **[Units](#13-units)**
105 | 14. **[Position](#14-position)**
106 | 15. **[Box Shadow and Filter](#15-box-shadow-and-filter)**
107 | 16. **[Background and Images](#16-background-and-images)**
108 | 17. **[Z-index](#17-z-index)**
109 | 18. **[Media Queries](#18-media-queries)**
110 | 19. **[Browser Support](#19-browser-support)**
111 | 20. **[CSS Architectures](#20-css-architectures)**
112 | 21. **[Mobile First Design](#21-mobile-first-design)**
113 | 22. **[CSS Preprocessors](#22-css-preprocessors)**
114 |
115 |
116 | ---
117 |
118 |
119 | ## 1. Box Model
120 |
121 |
122 |
123 |
124 |
125 | ### Reference
126 | - 📜 [Box Model — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
127 |
128 |
129 |
130 | ### Articles
131 | - 📜 [CSS: Box-Model - Kudzanayi Dzvairo](https://medium.com/@kudzanayi/css-box-model-564a0a50771d)
132 | - 📜 [Understanding the CSS Box-Model - Elad Shechter](https://medium.com/cssclass-com/understanding-the-css-box-model-97e4228670d6)
133 | - 📜 [CSS Box Model for Beginner: Unlocking the Magic of CSS - Afiur Rahman Fahim](https://medium.com/hackernoon/css-box-model-45ecf4ac219e)
134 | - 📜 [Six Questions to Understand the CSS Box Model - Demba Siby](https://medium.com/launch-school/https-medium-com-dembasiby-understanding-the-css-box-model-b005a82593a6)
135 | - 📜 [A Basic Walkthrough of the CSS Box Model - Anna Fitzgerald](https://blog.hubspot.com/website/css-box-model)
136 | - 📜 [CSS: Box-Model - Kudzanayi Dzvairo](https://medium.com/@kudzanayi/css-box-model-564a0a50771d)
137 |
138 |
139 |
140 |
141 |
142 | ### Videos
143 | - 🎥 [Learn CSS Box Model In 8 Minutes — Web Dev Simplified](https://www.youtube.com/watch?v=rIO5326FgPE)
144 | - 🎥 [CSS Box Model Tutorial for Beginners — Dave Gray](https://www.youtube.com/watch?v=L9khsrjMwKw)
145 | - 🎥 [HTML & CSS for Beginners Part 12: The CSS Box Model — Kevin Powell](https://www.youtube.com/watch?v=M6coJNLFBWI)
146 | - 🎥 [CSS Box Model — Coding Shuttle by Anuj Bhaiya](https://www.youtube.com/watch?v=QyrYEyMNYBk)
147 | - 🎥 [Learn CSS - Box model — Go Write Code](https://www.youtube.com/watch?v=5yCnqmRHxOw)
148 |
149 |
150 | **[⬆ Back to Top](#table-of-contents)**
151 |
152 |
153 | ---
154 |
155 |
156 |
157 |
158 |
159 | ## 2. Selectors
160 |
161 |
162 |
163 |
164 |
165 | ### Reference
166 | - 📜 [Selectors — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
167 |
168 |
169 |
170 |
171 |
172 | ### Articles
173 | - 📜 [CSS selectors cheatsheet & details - nana Jeon](https://medium.com/design-code-repository/css-selectors-cheatsheet-details-9593bc204e3f)
174 | - 📜 [Understanding CSS Selectors - Venky Royals](https://medium.com/front-end-weekly/understanding-css-selectors-1c03267e7cd2)
175 | - 📜 [Beginner Concepts: How CSS Selectors Work - Chris Coyier](https://css-tricks.com/how-css-selectors-work/)
176 | - 📜 [Tutorial: CSS Selectors and Their Specificity - Lara Aigmüller](https://www.scale.at/blog/css-selectors)
177 | - 📜 [How to Use CSS Selectors to Style Your Web Page - Peter Lynch](https://www.freecodecamp.org/news/use-css-selectors-to-style-webpage/)
178 |
179 |
180 |
181 |
182 |
183 | ### Videos
184 | - 🎥 [Learn Every CSS Selector In 20 Minutes — Web Dev Simplified](https://www.youtube.com/watch?v=l1mER1bV0N0)
185 | - 🎥 [HTML & CSS for Beginners Part 16: CSS selectors and Specificity — Kevin Powell](https://www.youtube.com/watch?v=Oh0TplG4nYw)
186 | - 🎥 [CSS Selectors | CSS | Tutorial 12 — Mike Dane](https://www.youtube.com/watch?v=TbfIyjNTXbA)
187 | - 🎥 [CSS SELECTORS MADE EASY - HTML CSS Tutorial for Beginners — LearnCode.academy](https://www.youtube.com/watch?v=dcCCOiQ1ZuM)
188 | - 🎥 [CSS Tutorial — Selectors, Element, Class and ID (3/13) — ColorCode](https://www.youtube.com/watch?v=1h5StQJ8hww)
189 |
190 |
191 | **[⬆ Back to Top](#table-of-contents)**
192 |
193 |
194 | ---
195 |
196 |
197 |
198 |
199 |
200 | ## 3. Colors
201 |
202 |
203 |
204 |
205 |
206 | ### Reference
207 | - 📜 [Colors — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
208 |
209 |
210 |
211 |
212 |
213 | ### Articles
214 | - 📜 [A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH - Michelle Barker](https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/)
215 | - 📜 [CSS Hex Colors Demystified - Dave Gash](https://medium.com/dev-channel/css-hex-colors-demystified-51c712179982)
216 | - 📜 [Create your design system, part 3: Colors - Sebastiano Guerriero](https://medium.com/codyhouse/create-your-design-system-part-3-colors-798e4729921f)
217 | - 📜 [Colors in CSS - Ahmad Shadeed](https://ishadeed.com/article/css-color/)
218 | - 📜 [The Ultimate Guide to CSS Colors (2020 Edition) - Alvaro Montoro](https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1)
219 |
220 |
221 |
222 |
223 |
224 | ### Videos
225 | - 🎥 [HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla — Kevin Powell](https://www.youtube.com/watch?v=AQnR5TtXvZk)
226 | - 🎥 [CSS Colors Tutorial for Beginners — Dave Gray](https://www.youtube.com/watch?v=Ddc-IIrIot0)
227 | - 🎥 [CSS Tutorial — Colors, Hex, RGB, RGBA, Predefined Colors (4/13) — ColorCode](https://www.youtube.com/watch?v=HxztHgRN8I4)
228 | - 🎥 [#23 CSS Colors - CSS Full Tutorial — Dev Dreamer](https://www.youtube.com/watch?v=POZ9Fuc1HgI)
229 | - 🎥 [CSS Colors (HTML and CSS tutorial 36) - Harshit vashisth](https://www.youtube.com/watch?v=VIAVKCE_r50)
230 |
231 |
232 | **[⬆ Back to Top](#table-of-contents)**
233 |
234 |
235 | ---
236 |
237 |
238 |
239 |
240 |
241 | ## 4. Spacing
242 |
243 |
244 |
245 |
246 |
247 | ### Reference
248 | - 📜 [Padding — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
249 | - 📜 [Margin — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
250 |
251 |
252 |
253 |
254 |
255 | ### Articles
256 | - 📜 [CSS Margin vs. Padding: What's the Difference? - Jamie Juviler](https://blog.hubspot.com/website/css-margin-vs-padding)
257 | - 📜 [CSS padding vs margin: how to decide which to use - Nikiya Palombi](https://webflow.com/blog/padding-vs-margin)
258 | - 📜 [CSS margin vs. padding - Edidiong Asikpo](https://blog.logrocket.com/css-margin-vs-padding/)
259 | - 📜 [CSS Margin vs. Padding - AK Janani](https://www.atatus.com/blog/css-margin-vs-padding/)
260 | - 📜 [Everything You Need To Know About CSS Margins - Rachel Andrew](https://www.smashingmagazine.com/2019/07/margins-in-css/)
261 |
262 |
263 |
264 |
265 |
266 | ### Videos
267 | - 🎥 [Learn CSS Box Model In 8 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=rIO5326FgPE&t=249s)
268 | - 🎥 [Margin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizing) - Kevin Powell](https://www.youtube.com/watch?v=uEfH6qnFF6Y)
269 | - 🎥 [Margin and Padding Deep Dive: The basics - Kevin Powell](https://www.youtube.com/watch?v=EhbZGV2dqZ4)
270 | - 🎥 [How CSS Padding and Margin Works - Steve Griffith](https://www.youtube.com/watch?v=NZEz4yNITd8)
271 | - 🎥 [CSS Tutorial: CSS Box Model, Margin and Padding | Web Development Tutorials #20 - CodeWithHarry](https://www.youtube.com/watch?v=5koxb4JaDqc)
272 |
273 |
274 | **[⬆ Back to Top](#table-of-contents)**
275 |
276 |
277 | ---
278 |
279 |
280 |
281 |
282 |
283 | ## 5. Pseudo Elements and Classes
284 |
285 |
286 |
287 | ### Reference
288 | - 📜 [Pseudo Elements — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::after)
289 | - 📜 [Pseudo Classes — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
290 |
291 |
292 |
293 |
294 |
295 | ### Articles
296 | - 📜 [A guide to CSS pseudo-elements - Nwose Lotanna](https://blog.logrocket.com/css-pseudo-elements-guide/)
297 | - 📜 [CSS Pseudo-Classes – How the :is Pseudo-Class Works with Examples - Dillion Megida](https://www.freecodecamp.org/news/css-is-pseudo-class-explained/)
298 | - 📜 [How To Use Links and Buttons with State Pseudo-Classes in CSS - Philip Zastrow](https://www.digitalocean.com/community/tutorials/how-to-use-links-and-buttons-with-state-pseudo-classes-in-css)
299 | - 📜 [How CSS pseudo-classes work, explained with code and lots of diagrams - Nash Vail](https://medium.com/free-code-camp/explained-css-pseudo-classes-cef3c3177361)
300 | - 📜 [Helpful Pseudo Classes to Know In CSS - Austin Paley](https://medium.com/@austinpaley32/helpful-pseudo-classes-to-know-in-css-d2d724d61452)
301 |
302 |
303 |
304 | ### Videos
305 | - 🎥 [Learn CSS Pseudo Elements In 8 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=OtBpgtqrjyo)
306 | - 🎥 [CSS Pseudo-classes: in 100 Seconds - Fireship](https://www.youtube.com/watch?v=kpXKwDGtjGE)
307 | - 🎥 [Before and After pseudo elements explained - part one: how they work - Kevin Powell](https://www.youtube.com/watch?v=zGiirUiWslI)
308 | - 🎥 [CSS Before and After pseudo elements explained - part two: the content property - Kevin Powell](https://www.youtube.com/watch?v=xoRbkm8XgfQ)
309 | - 🎥 [CSS Before and After pseudo elements explained - part three: as design elements - Kevin Powell](https://www.youtube.com/watch?v=djbtPnNmc0I)
310 |
311 |
312 | **[⬆ Back to Top](#table-of-contents)**
313 |
314 |
315 | ---
316 |
317 |
318 |
319 |
320 |
321 | ## 6. Border and Outline
322 |
323 |
324 |
325 |
326 |
327 | ### Reference
328 | - 📜 [Border — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
329 | - 📜 [Outline — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
330 |
331 |
332 |
333 | ### Articles
334 | - 📜 [CSS Border - Suprabha Supi](https://medium.com/swlh/css-border-40609484360f)
335 | - 📜 [CSS Border & Outline - Uxcel](https://app.uxcel.com/lessons/css-border--outline-801)
336 | - 📜 [A Complete Guide to CSS Borders and Outlines - SAMUEL L. GARBETT](https://www.makeuseof.com/css-borders-outlines-complete-guide/)
337 | - 📜 [Outline - Sara Cope](https://css-tricks.com/almanac/properties/o/outline/)
338 | - 📜 [A Complete Tutorial to Master Styling Properties of CSS Outline - BitDegree](https://www.bitdegree.org/learn/css-outline)
339 |
340 |
341 |
342 | ### Videos
343 | - 🎥 [Learn CSS borders in 2 minutes 🔲 - Bro Code](https://www.youtube.com/watch?v=6RuzhtsbSIg)
344 | - 🎥 [#18 - CSS Borders - CSS Full Tutorial - Dev Dreamer](https://www.youtube.com/watch?v=d_3fKSHwq_g)
345 | - 🎥 [CSS Tutorial For Beginners 40 - Borders - The Net Ninja](https://www.youtube.com/watch?v=sdn5p4kf91c)
346 | - 🎥 [Border Vs Outline Explain || CSS Tutorial: 09 - Code Prime](https://www.youtube.com/watch?v=tYdLiBk5CRs)
347 | - 🎥 [CSS Outline vs Border - differences, advantages, and disadvantages - Kevin Powell](https://www.youtube.com/watch?v=xx_pJ2ouGnc)
348 |
349 |
350 | **[⬆ Back to Top](#table-of-contents)**
351 |
352 |
353 | ---
354 |
355 |
356 |
357 |
358 |
359 | ## 7. Flexbox
360 |
361 |
362 |
363 |
364 |
365 | ### Reference
366 | - 📜 [Flexbox — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
367 |
368 |
369 |
370 |
371 |
372 | ### Articles
373 | - 📜 [The Complete Guide to CSS Flexbox - Jobayer Hossain](https://betterprogramming.pub/a-complete-guide-css-flex-box-24f4a9a1e02?gi=8d89906c2460)
374 | - 📜 [A Complete Guide to Flexbox - Chris Coyier](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
375 | - 📜 [CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet 🎖️ - Joy Shaheb](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/)
376 | - 📜 [An Interactive Guide to Flexbox - Josh Comeau](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/)
377 | - 📜 [How to Build CSS-only Smart Layouts with Flexbox - Diego Diaz](https://www.toptal.com/front-end/how-to-build-css-only-smart-layouts-with-flexbox)
378 |
379 |
380 |
381 |
382 |
383 | ### Videos
384 | - 🎥 [Flexbox CSS In 20 Minutes - Traversy Media](https://www.youtube.com/watch?v=JJSoEo8JSnc)
385 | - 🎥 [Learn flexbox the easy way - Kevin Powell](https://www.youtube.com/watch?v=u044iM9xsWU)
386 | - 🎥 [Learn Flexbox in 15 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=fYq5PXgSsbE)
387 | - 🎥 [CSS Flexbox Crash Course - freeCodeCamp](https://www.youtube.com/watch?v=tXIhdp5R7sc)
388 | - 🎥 [CSS FlexBox Essentials - DevTips](https://www.youtube.com/watch?v=G7EIAgfkhmg)
389 |
390 |
391 | **[⬆ Back to Top](#table-of-contents)**
392 |
393 |
394 | ---
395 |
396 |
397 |
398 |
399 |
400 | ## 8. Grid
401 |
402 |
403 |
404 |
405 |
406 | ### Reference
407 | - 📜 [Grid — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
408 |
409 |
410 |
411 |
412 |
413 | ### Articles
414 | - 📜 [A Complete Guide to CSS Grid - Chris House](https://css-tricks.com/snippets/css/complete-guide-grid/)
415 | - 📜 [How to recreate Medium’s article layout with CSS Grid - Per Harald Borgen](https://medium.com/free-code-camp/how-to-recreate-mediums-article-layout-with-css-grid-b4608792bad1)
416 | - 📜 [Understanding CSS Grid: Creating A Grid Container - Rachel Andrew](https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/)
417 | - 📜 [How to Create a Perfect CSS Grid on Your Website [Sample Layouts] - Clint Fontanella](https://blog.hubspot.com/website/css-grid)
418 | - 📜 [Learn CSS Grid by Building 5 Layouts in 17 minutes - Thu Nghiem](https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/)
419 | - 📜 [grid-area - Mojtaba Seyedi](https://css-tricks.com/almanac/properties/g/grid-area/)
420 |
421 |
422 |
423 |
424 |
425 | ### Videos
426 | - 🎥 [Learn CSS Grid in 20 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=9zBsdzdE4sM)
427 | - 🎥 [CSS Grid Layout Crash Course - Traversy Media](https://www.youtube.com/watch?v=jV8B24rSN5o)
428 | - 🎥 [Learn CSS Grid the easy way - Kevin Powell](https://www.youtube.com/watch?v=rg7Fvvl3taU)
429 | - 🎥 [CSS Grid Crash Course 2022 - Tutorial for Complete Beginners - Codevolution](https://www.youtube.com/watch?v=p4Ith5qRM1g)
430 | - 🎥 [CSS Grid in 45 Minutes! - Wes Bos](https://www.youtube.com/watch?v=DCZdCKjnBCs)
431 | - 🎥 [Why I use grid over flexbox for this common layout - Kevin Powell](https://www.youtube.com/watch?v=ctHE8EXEoj8)
432 | - 🎥 [Build Layouts with CSS Grid - The Net Ninja](https://www.youtube.com/watch?v=xPuYbmmPdEM&list=PL4cUxeGkcC9hk02lFb6EkdXF2DYGl4Gg4)
433 |
434 |
435 | **[⬆ Back to Top](#table-of-contents)**
436 |
437 |
438 | ---
439 |
440 |
441 |
442 |
443 |
444 | ## 9. Animations
445 |
446 |
447 |
448 |
449 |
450 | ### Reference
451 | - 📜 [Transforms — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
452 | - 📜 [Transitions — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
453 |
454 |
455 |
456 |
457 |
458 | ### Articles
459 | - 📜 [The Ultimate Guide to Animations in CSS - Anna Fitzgerald](https://blog.hubspot.com/website/css-animation)
460 | - 📜 [CSS Animations: Introduction & Examples - Alex Ivanovs](https://stackdiary.com/css-animations/)
461 | - 📜 [The Guide To CSS Animation: Principles and Examples - Tom Waterhouse](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/)
462 | - 📜 [CSS Animations Tutorial: Complete Guide for Beginners - Themeisle](https://themeisle.com/blog/css-animations-tutorial/)
463 | - 📜 [A Detailed Guide to CSS Animations and Transitions - Mayank Pratap](https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c)
464 |
465 |
466 |
467 |
468 |
469 | ### Videos
470 | - 🎥 [Learn CSS Animation In 15 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=YszONjKpgg4)
471 | - 🎥 [CSS Animation Tutorial - The Net Ninja](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
472 | - 🎥 [#32 CSS Animations - CSS Full Tutorial - Dev Dreamer](https://www.youtube.com/watch?v=PjUCq04ebVA)
473 | - 🎥 [Animating with CSS Transitions - A look at the transition properties - Kevin Powell](https://www.youtube.com/watch?v=Nloq6uzF8RQ)
474 | - 🎥 [CSS3 Animation & Transitions Crash Course - Traversy Media](https://www.youtube.com/watch?v=zHUpx90NerM)
475 |
476 |
477 | **[⬆ Back to Top](#table-of-contents)**
478 |
479 |
480 | ---
481 |
482 |
483 |
484 |
485 |
486 | ## 10. Overflow and Scroll Snap
487 |
488 |
489 |
490 |
491 |
492 | ### Reference
493 | - 📜 [Overflow — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
494 | - 📜 [Scroll Snap — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)
495 |
496 |
497 |
498 |
499 |
500 | ### Articles
501 | - 📜 [overflow - Sara Cope](https://css-tricks.com/almanac/properties/o/overflow/)
502 | - 📜 [The CSS Overflow Property - Chris Coyier](https://css-tricks.com/the-css-overflow-property/)
503 | - 📜 [CSS Overflow – Visible, Scroll, Auto, or Hidden? The Overflow Property Explained - Ihechikara Vincent Abba](https://www.freecodecamp.org/news/css-overflow-visible-scroll-auto-hidden/)
504 | - 📜 [CSS Overflow: What It Is & How It Works - Jamie Juviler](https://blog.hubspot.com/website/css-overflow)
505 | - 📜 [Practical CSS Scroll Snapping - Max Kohler](https://css-tricks.com/practical-css-scroll-snapping/)
506 |
507 |
508 |
509 | ### Videos
510 | - 🎥 [CSS Overflow Property | Visible | Hidden | Scroll | Auto | Overflow-x | Overflow-y in CSS - 38 - Husain Sir](https://www.youtube.com/watch?v=lVNt1aVV9u0)
511 | - 🎥 [CSS overflow, overflow-x, overflow-y - CSS Building Blocks Series - Lesson 9 - Shane Crouch](https://www.youtube.com/watch?v=5iM8BbX4eL0&t=293s)
512 | - 🎥 [CSS Scroll Snap - FollowAndrew](https://www.youtube.com/watch?v=MsmvhpBXosM)
513 | - 🎥 [Pure CSS Snap Scrolling with these New CSS Properties! - DesignCourse](https://www.youtube.com/watch?v=0Og_kQUsxEw)
514 | - 🎥 [How to tell an engaging story with the help of CSS - Kevin Powell](https://www.youtube.com/watch?v=ErSwQhrfbuc)
515 |
516 |
517 | **[⬆ Back to Top](#table-of-contents)**
518 |
519 |
520 | ---
521 |
522 |
523 |
524 |
525 |
526 | ## 11. Text and Typography
527 |
528 |
529 |
530 | ### Reference
531 | - 📜 [Font — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
532 |
533 |
534 |
535 |
536 |
537 | ### Articles
538 | - 📜 [CSS Basics for Typography - Elad Shechter](https://medium.com/cssclass-com/css-basics-for-typography-160025e3aeca)
539 | - 📜 [Typography for Developers - Taimur Abdaal](https://css-tricks.com/typography-for-developers/)
540 | - 📜 [CSS Typography: The Basics - William Craig](https://www.webfx.com/blog/web-design/css-typography-01/)
541 | - 📜 [CA Complete Guide On CSS Typography And Encoding - Aman Mandal](https://www.lambdatest.com/blog/css-typography-and-encoding/)
542 | - 📜 [Six tips for better web typography - Robin Rendle](https://css-tricks.com/six-tips-for-better-web-typography/)
543 |
544 |
545 |
546 |
547 |
548 | ### Videos
549 | - 🎥 [CSS Text and Fonts Tutorial for Beginners - Typography - Dave Gray](https://www.youtube.com/watch?v=klXyJWlIzuY)
550 | - 🎥 [6 simple typography tips to more professional looking sites - Kevin Powell](https://www.youtube.com/watch?v=6ardZEhjvV0)
551 | - 🎥 [Text & Font Properties in CSS | Typography | Complete Web Development Course #19 - Coding Shuttle by Anuj Bhaiya](https://www.youtube.com/watch?v=hUydgrCN0WQ)
552 | - 🎥 [9: CSS Text Styling Tutorial | Basics of CSS | Learn HTML and CSS | HTML Tutorial - Dani Krossing](https://www.youtube.com/watch?v=azZCW24XtT4)
553 | - 🎥 [#22 CSS Fonts - CSS Full Tutorial - Dev Dreamer](https://www.youtube.com/watch?v=F4xYytdv1SU)
554 |
555 |
556 | **[⬆ Back to Top](#table-of-contents)**
557 |
558 |
559 | ---
560 |
561 |
562 |
563 |
564 |
565 | ## 12. Functions
566 |
567 |
568 |
569 |
570 |
571 | ### Reference
572 | - 📜 [Functions — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions)
573 |
574 |
575 |
576 |
577 |
578 | ### Articles
579 | - 📜 [A Complete Guide to CSS Functions - Eric Bailey](https://css-tricks.com/complete-guide-to-css-functions/)
580 | - 📜 [CSS Functions - The Odin Project](https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-css-functions)
581 | - 📜 [CSS Functions – How to Use calc(), max(), min(), and clamp() - Ilenia Magoni](https://www.freecodecamp.org/news/css-functions-for-beginners/)
582 | - 📜 [Functions - web.dev](https://web.dev/learn/css/functions/)
583 | - 📜 [CSS Functions ( Basic ) - Gokulan Dhakshinamoorthy](https://medium.com/@dgokul19/css-functions-basic-e1b3f8c55f86)
584 |
585 |
586 |
587 |
588 |
589 | ### Videos
590 | - 🎥 [Using the CSS Numeric Functions - min, max, calc, clamp, and minmax - CSS Full Tutorial - Steve Griffith](https://www.youtube.com/watch?v=6QwMvf1Jq0M)
591 | - 🎥 [CSS Functions Tutorial for Beginners | min, max, clamp, minmax, calc, attr - Dave Gray](https://www.youtube.com/watch?v=qWnIadj5b30)
592 | - 🎥 [min(), max(), and clamp() are CSS magic! - Kevin Powell](https://www.youtube.com/watch?v=U9VF-4euyRo)
593 | - 🎥 [CSS Functions - F8 Official](https://www.youtube.com/watch?v=LZfoRgIYw2s)
594 | - 🎥 [Learn CSS Calc In 6 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=x7EWFoRzAkk)
595 |
596 |
597 | **[⬆ Back to Top](#table-of-contents)**
598 |
599 |
600 | ---
601 |
602 |
603 |
604 |
605 |
606 | ## 13. Units
607 |
608 |
609 |
610 |
611 |
612 | ### Reference
613 | - 📜 [Units — MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
614 |
615 |
616 |
617 |
618 |
619 | ### Articles
620 | - 📜 [CSS Units Explained - Jess Mitchell](https://www.digitalocean.com/community/tutorials/css-css-units-explained)
621 | - 📜 [The Lengths of CSS - Chris Coyier](https://css-tricks.com/the-lengths-of-css/)
622 | - 📜 [Fun with Viewport Units - Miriam Suzanne](https://css-tricks.com/fun-viewport-units/)
623 | - 📜 [CSS Units Explained... - Cheralathan](https://dev.to/cheralathann/css-units-explained-3178)
624 | - 📜 [CSS: Units Of Measurement (px, em, rem, vw, %, etc.) - Sebastian De Lima](https://medium.com/swlh/css-units-of-measurement-px-em-rem-vw-etc-ed8522620775)
625 |
626 |
627 |
628 |
629 |
630 | ### Videos
631 | - 🎥 [Learn CSS Units In 8 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=-GR52czEd-0)
632 | - 🎥 [Are you using the right CSS units? - Kevin Powell](https://www.youtube.com/watch?v=N5wpD9Ov_To)
633 | - 🎥 [Units in CSS | px, vw, vh, %, em, rem - Best Practices - Coding Shuttle by Anuj Bhaiya](https://www.youtube.com/watch?v=Fwfg0UyMOJE)
634 | - 🎥 [Learn Every CSS Viewport Unit In 10 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=5m6JOJLy5B0)
635 | - 🎥 [CSS Tutorial: em, rem, vh and vw units + Responsive design Explained - CodeWithHarry](https://www.youtube.com/watch?v=DVjrb52C5Gs)
636 |
637 |
638 | **[⬆ Back to Top](#table-of-contents)**
639 |
640 |
641 | ---
642 |
643 |
644 |
645 |
646 |
647 | ## 14. Position
648 |
649 |
650 |
651 |
652 |
653 | ### Reference
654 | - 📜 [Position — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
655 |
656 |
657 |
658 |
659 |
660 | ### Articles
661 | - 📜 [position - Chris Coyier](https://css-tricks.com/almanac/properties/p/position/)
662 | - 📜 [Absolute, Relative, Fixed Positioning: How Do They Differ? - Chris Coyier](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
663 | - 📜 [CSS POSITION PROPERTY - Doganaker](https://medium.com/baakademi/css-position-property-69d0596baf3c)
664 | - 📜 [The CSS Position Property: Everything You Need to Know - Jamie Juviler](https://blog.hubspot.com/website/css-position)
665 | - 📜 [Ultimate Guide to CSS Positioning - Adarsh gupta](https://blog.bitsrc.io/ultimate-css-position-guide-f84969cc72ca)
666 | - 📜 [ Learn CSS Positioning - Ahmad Shadeed](https://ishadeed.com/article/learn-css-positioning/)
667 |
668 | ### Videos
669 | - 🎥 [Learn CSS Position In 9 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=jx5jmI0UlXU)
670 | - 🎥 [CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25 - CodeWithHarry](https://www.youtube.com/watch?v=MwGHiVl-gqk)
671 | - 🎥 [CSS Positioning: Position absolute and relative explained - Kevin Powell](https://www.youtube.com/watch?v=P6UgYq3J3Qs)
672 | - 🎥 [CSS Position Property | Complete Web Development Course #21 - Coding Shuttle by Anuj Bhaiya](https://www.youtube.com/watch?v=jo3RB0oBhXI)
673 | - 🎥 [CSS Position Tutorial | Learn CSS For Beginners - developedbyed](https://www.youtube.com/watch?v=gD3G67oPg-w)
674 |
675 |
676 | **[⬆ Back to Top](#table-of-contents)**
677 |
678 |
679 | ---
680 |
681 |
682 |
683 |
684 |
685 | ## 15. Box Shadow and Filter
686 |
687 |
688 |
689 |
690 |
691 | ### Reference
692 | - 📜 [Box Shadow — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
693 | - 📜 [Filter — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
694 |
695 |
696 |
697 |
698 |
699 | ### Articles
700 | - 📜 [box-shadow - Sara Cope](https://css-tricks.com/almanac/properties/b/box-shadow/)
701 | - 📜 [CSS Box Shadow - Chris Coyier](https://css-tricks.com/snippets/css/css-box-shadow/)
702 | - 📜 [Getting Deep Into Shadows - Rob O'Leary](https://css-tricks.com/getting-deep-into-shadows/)
703 | - 📜 [CSS Box Shadow - Suprabha Supi](https://suprabhasupi.medium.com/css-box-shadow-5c07d5944a04)
704 | - 📜 [filter - Chris Coyier](https://css-tricks.com/almanac/properties/f/filter/)
705 |
706 |
707 |
708 |
709 |
710 | ### Videos
711 | - 🎥 [CSS Box-Shadow tutorial: the basics - Kevin Powell](https://www.youtube.com/watch?v=-JNRQ5HjNeI)
712 | - 🎥 [Become a CSS Shadow Master! Layered CSS Shadows Tutorial - DesignCourse](https://www.youtube.com/watch?v=DG6C-GMeLiI)
713 | - 🎥 [CSS box-shadows - how to make them look good - Kevin Powell](https://www.youtube.com/watch?v=Yon4l3MUBGY)
714 | - 🎥 [I never thought of using CSS filters like this - Kevin Powell](https://www.youtube.com/watch?v=qyUz1iF8E6Y)
715 | - 🎥 [CSS Filters! - DevTips](https://www.youtube.com/watch?v=qTLojDBgZfY)
716 |
717 |
718 | **[⬆ Back to Top](#table-of-contents)**
719 |
720 |
721 | ---
722 |
723 |
724 |
725 |
726 |
727 | ## 16. Background and Images
728 |
729 |
730 |
731 |
732 |
733 | ### Reference
734 | - 📜 [Background — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
735 | - 📜 [Images — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images)
736 |
737 |
738 |
739 |
740 |
741 | ### Articles
742 | - 📜 [background - Sara Cope](https://css-tricks.com/almanac/properties/b/background/)
743 | - 📜 [Perfect Full Page Background Image - Chris Coyier](https://css-tricks.com/perfect-full-page-background-image/)
744 | - 📜 [Responsive Images in CSS - Chris Coyier](https://css-tricks.com/responsive-images-css/)
745 | - 📜 [CSS Responsive Image Tutorial: How to Make Images Responsive with CSS - Cem Eygi](https://www.freecodecamp.org/news/css-responsive-image-tutorial/)
746 | - 📜 [The Fastest Way to Set CSS Backgrounds - Mateusz](https://hadrysmateusz.com/blog/background-properties-explained)
747 |
748 |
749 |
750 |
751 |
752 | ### Videos
753 | - 🎥 [#26 CSS Backgrounds - CSS Full Tutorial - Dev Dreamer](https://www.youtube.com/watch?v=dr1y4m7iEoU)
754 | - 🎥 [Background images with HTML & CSS - Kevin Powell](https://www.youtube.com/watch?v=zHZRFwWQt2w)
755 | - 🎥 [Controlling background-images | CSS Tutorial - Kevin Powell](https://www.youtube.com/watch?v=3T_Jy1CqH9k)
756 | - 🎥 [Background-image, size, repeat, position - CSS3 tutorial in hindi - urdu - Class - 04 - Husain Sir](https://www.youtube.com/watch?v=dmfCUIbQg5A)
757 | - 🎥 [CSS Background Images and Responsive Image Properties for Beginners - Dave Gray](https://www.youtube.com/watch?v=cLyzBfXI0I0)
758 |
759 |
760 | **[⬆ Back to Top](#table-of-contents)**
761 |
762 |
763 | ---
764 |
765 |
766 |
767 |
768 |
769 | ## 17. Z-index
770 |
771 |
772 |
773 |
774 |
775 | ### Reference
776 | - 📜 [Z-index — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
777 |
778 |
779 |
780 |
781 |
782 | ### Articles
783 | - 📜 [Handling z-index - Chris Coyier](https://css-tricks.com/handling-z-index/)
784 | - 📜 [z-index - Sara Cope](https://css-tricks.com/almanac/properties/z/z-index/)
785 | - 📜 [CSS Z-Index Not Working? How to Fix It Using Stack Order - Cem Eygi](https://www.freecodecamp.org/news/css-z-index-not-working/)
786 | - 📜 [Z-Index Explained: How to Stack Elements Using CSS - Veronika Ivhed](https://medium.com/free-code-camp/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3)
787 | - 📜 [My approach to using z-index - David Gilbertson](https://medium.com/hackernoon/my-approach-to-using-z-index-eca67feb079c)
788 |
789 |
790 |
791 |
792 |
793 | ### Videos
794 | - 🎥 [CSS Z Index Property: What is CSS Z-Index, Stacking Order, and Why Your Z-Index Is Not Working? - Cem Eygi Media](https://www.youtube.com/watch?v=vo1JBj-OAa8)
795 | - 🎥 [Solve your z-index issues | z-index and stacking context explained - Kevin Powell](https://www.youtube.com/watch?v=uS8l4YRXbaw)
796 | - 🎥 [CSS: 4 Reasons Your Z-Index Isn't Working - Coder Coder](https://www.youtube.com/watch?v=qYi-OLf5q5g)
797 | - 🎥 [Z-index CSS Tutorial | Z-index Explained in Hindi / Urdu | CSS 45 - Husain Sir](https://www.youtube.com/watch?v=Trt8H23mYwk)
798 | - 🎥 [CSS Positioning Tutorial #11 - Z - Index & Stacking Order - The Net Ninja](https://www.youtube.com/watch?v=k4taTzkhzHc)
799 |
800 |
801 | **[⬆ Back to Top](#table-of-contents)**
802 |
803 |
804 | ---
805 |
806 |
807 |
808 |
809 |
810 | ## 18. Media Queries
811 |
812 |
813 |
814 |
815 |
816 | ### Reference
817 | - 📜 [Media Queries — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
818 |
819 |
820 |
821 |
822 |
823 | ### Articles
824 | - 📜 [A Complete Guide to CSS Media Queries — Andrés Galante](https://css-tricks.com/a-complete-guide-to-css-media-queries/)
825 | - 📜 [The New CSS Media Query Range Syntax — Preethi Selvam](https://css-tricks.com/the-new-css-media-query-range-syntax/)
826 | - 📜 [Responsive Layouts, Fewer Media Queries — Temani Afif](https://css-tricks.com/responsive-layouts-fewer-media-queries/)
827 | - 📜 [A Practical Guide to CSS Media Queries — Alex Ivanovs](https://stackdiary.com/css-media-queries/)
828 | - 📜 [Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes — Cem Eygi](https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/)
829 |
830 |
831 |
832 |
833 |
834 | ### Videos
835 | - 🎥 [Learn CSS Media Query In 7 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=yU7jJ3NbPdA)
836 | - 🎥 [CSS Tutorial: Media Queries Explained | Web Development Tutorials #30 - CodeWithHarry](https://www.youtube.com/watch?v=WTz4A8IdeEQ)
837 | - 🎥 [CSS Media Queries Tutorial for Responsive Design - Adrian Twarog](https://www.youtube.com/watch?v=j1AhSWFcZpg)
838 | - 🎥 [Media Query in CSS [Easiest Way] | How To Write Media Queries FAST - Code Bless You](https://www.youtube.com/watch?v=xgGg4XQxTWk)
839 | - 🎥 [How to write media queries in CSS - Coder Coder](https://www.youtube.com/watch?v=IsC5-C_nuF4)
840 |
841 |
842 | **[⬆ Back to Top](#table-of-contents)**
843 |
844 |
845 | ---
846 |
847 |
848 |
849 |
850 |
851 | ## 19. Browser Support
852 |
853 |
854 |
855 | ### Reference
856 |
857 |
858 |
859 |
860 |
861 | ### Articles
862 | - 📜 [App & Browser Testing Made Easy — Neha Vaidya](https://www.browserstack.com/guide/create-browser-specific-css)
863 | - 📜 [The State of CSS Cross-Browser Development — Ahmad Shadeed](https://ishadeed.com/article/cross-browser-development/)
864 | - 📜 [Finding Cross Browser Compatibility Issues in HTML and CSS — Deeksha Agarwal](https://dev.to/lambdatest/finding-cross-browser-compatibility-issues-in-html-and-css-p0k)
865 | - 📜 [A guide to cross-browser testing: installing all the things — David Gilbertson](https://medium.com/hackernoon/a-guide-to-cross-browser-testing-installing-all-the-things-6e56c2bd8182)
866 | - 📜 [Using Feature Detection to Write CSS with Cross-Browser Support — Schalk Venter](https://css-tricks.com/using-feature-detection-to-write-css-with-cross-browser-support/)
867 | - 📜 [A Guide To CSS Support In Browsers — Rachel Andrew](https://www.smashingmagazine.com/2019/02/css-browser-support/)
868 |
869 |
870 |
871 |
872 |
873 | ### Videos
874 | - 🎥 [How to Support All Browsers with Your CSS - Coding in Public](https://www.youtube.com/watch?v=adEwlFHLWd4)
875 | - 🎥 [Checking for browser support - Kevin Powell](https://www.youtube.com/watch?v=xRp6HVjCDrY)
876 | - 🎥 [Most Important CSS Reset Rule | One Line To Make CSS Cross Browser Compatible | Learn CSS - WebStylePress](https://www.youtube.com/watch?v=bWjCktzVzws)
877 | - 🎥 [Cross Browser Flexbox Support + Autoprefixer!! - Tutorial 13 of 20 💪 - Wes Bos](https://www.youtube.com/watch?v=qBvW8KC9bb4)
878 | - 🎥 [Dealing with Cross Browser Compatibility - Kevin Powell](https://www.youtube.com/watch?v=9tEixRJ3GeI)
879 |
880 |
881 | **[⬆ Back to Top](#table-of-contents)**
882 |
883 |
884 | ---
885 |
886 |
887 |
888 |
889 |
890 | ## 20. CSS Architectures
891 |
892 |
893 |
894 |
895 |
896 | ### Articles
897 | - 📜 [How to Organize Your CSS with a Modular Architecture (OOCSS, BEM, SMACSS) — Claudio Mendonca](https://snipcart.com/blog/organize-css-modular-architecture)
898 | - 📜 [CSS Architecture — Philip Walton](https://philipwalton.com/articles/css-architecture/)
899 | - 📜 [Building a Scalable CSS Architecture With BEM and Utility Classes — Sebastiano Guerriero](https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/)
900 | - 📜 [Thoughtful CSS Architecture — Nathan Rambeck](https://sparkbox.com/foundry/thoughtful_css_architecture)
901 | - 📜 [css architecture for design systems — Brad Frost](https://bradfrost.com/blog/post/css-architecture-for-design-systems/)
902 |
903 |
904 |
905 |
906 |
907 | ### Videos
908 | - 🎥 [How to build a great CSS architecture? (with CSS guru Adam Argyle) - Fun Fun Function](https://www.youtube.com/watch?v=Nxnp-JLgo5I)
909 | - 🎥 [You Probably Need BEM CSS in Your Life (Tutorial) - DesignCourse](https://www.youtube.com/watch?v=er1JEDuPbZQ)
910 | - 🎥 [Improving CSS Architecture with Cascade Layers, Container Queries, Scope, by Miriam Suzanne - W3C](https://www.youtube.com/watch?v=vK8vj1l_oRk)
911 | - 🎥 [Frontend Essentials Feb 2021: CSS Architecture - BASE Events](https://www.youtube.com/watch?v=Ot68o8YSI3g)
912 | - 🎥 [Foundation CSS Tutorial Series | Ep. 3: CSS Architecture and Best Practices - ZURB](https://www.youtube.com/watch?v=CvJj8hfC9nk)
913 |
914 |
915 | **[⬆ Back to Top](#table-of-contents)**
916 |
917 |
918 | ---
919 |
920 |
921 |
922 |
923 |
924 | ## 21. Mobile First Design
925 |
926 |
927 |
928 |
929 |
930 | ### Articles
931 | - 📜 [How To Write Mobile-first CSS — Zell Wk](https://zellwk.com/blog/how-to-write-mobile-first-css/)
932 | - 📜 [Responsive Design Guidelines: Why You Should Always Design Mobile-First — Zach Saucier](https://www.codementor.io/css/tutorial/responsive-design-guidelines-always-design-mobile-first/)
933 | - 📜 [What is Mobile First Design? Why It’s Important & How To Make It? — Vincent Xia](https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00)
934 | - 📜 [Mobile-first CSS — mrmrs](https://medium.com/@mrmrs_/mobile-first-css-48bc4cc3f60f)
935 | - 📜 [Designing Mobile First — Meng To](https://medium.com/design-with-sketch/designing-mobile-first-a082d2b4a4c8)
936 |
937 |
938 |
939 |
940 |
941 | ### Videos
942 | - 🎥 [Are you writing responsive CSS the wrong way? - Kevin Powell](https://www.youtube.com/watch?v=0ohtVzCSHqs)
943 | - 🎥 [Mobile First Web Design Tutorial - Adrian Twarog](https://www.youtube.com/watch?v=NeThtWARdnY)
944 | - 🎥 [Turning a design from desktop only to mobile friendly - Kevin Powell](https://www.youtube.com/watch?v=_kF3k0vDMNA)
945 | - 🎥 [Grid CSS Responsive Website Layout - "Mobile First" Design - Traversy Media](https://www.youtube.com/watch?v=M3qBpPw77qo)
946 | - 🎥 [What is Mobile First CSS Code - iEatWebsites](https://www.youtube.com/watch?v=ZUwmTLBCRTM)
947 |
948 |
949 | **[⬆ Back to Top](#table-of-contents)**
950 |
951 |
952 | ---
953 |
954 |
955 |
956 |
957 |
958 | ## 22. CSS Preprocessors
959 |
960 |
961 |
962 | ### Reference
963 | - 📜 [CSS preprocessor — MDN](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)
964 |
965 |
966 |
967 |
968 |
969 | ### Articles
970 | - 📜 [Popular CSS Preprocessors With Examples: Sass, Less & Stylus — Anna Monus](https://raygun.com/blog/css-preprocessors-examples/)
971 | - 📜 [The Complete Beginner’s Guide to CSS Preprocessors — NICOLE ABRAMOWSK](https://careerfoundry.com/en/blog/web-development/css-preprocessors/)
972 | - 📜 [What is a CSS Preprocessors & Why Use Them — Alyssa Schaad](https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/)
973 | - 📜 [CSS Preprocessors: What? Why?…How?! — Sandy Edwards](https://medium.com/@sedwardscode/css-preprocessors-what-why-how-7bc5a7a564de)
974 | - 📜 [Learn all about CSS Preprocessors with Examples — Simplilearn](https://www.simplilearn.com/tutorials/css-tutorial/css-preprocessors)
975 |
976 |
977 |
978 |
979 |
980 | ### Videos
981 | - 🎥 [Why you should use a CSS Preprocessor! SASS, LESS are Better than CSS - Alessandro Castellani](https://www.youtube.com/watch?v=5hNDzcpWwFM)
982 | - 🎥 [CSS Preprocessors Getting Started | SASS and LESS | Practical Examples - CoderOne](https://www.youtube.com/watch?v=CFJurnwFI0c)
983 | - 🎥 [#03 - What is CSS Preprocessor - CyberDude Networks Pvt. Ltd.](https://www.youtube.com/watch?v=Asy5Gb5KY3k)
984 | - 🎥 [What is a CSS Preprocessor? - Drupalize.Me](https://www.youtube.com/watch?v=IiujOinbGzw&t=113s)
985 | - 🎥 [CSS Basics (Part8) — CSS Preprocessors - DevTips](https://www.youtube.com/watch?v=PJkWbezpHpE&t=423s)
986 |
987 |
988 | **[⬆ Back to Top](#table-of-contents)**
989 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | This repository inspired by 33-js-concepts. It's a guide for CSS developers.
3 | */
--------------------------------------------------------------------------------