├── .gitattributes ├── CheatSheet ├── 00-BoxModel.png ├── 01-FlexDirection.png ├── 02-FlexWrap.png ├── 03-JustifyContent.png ├── 04-AlignItem.png ├── 05-AlignContent.png ├── 06-AlignSelf.png ├── 07-FlexItem.png └── 08-NthChild.png ├── README.md └── desktop.ini /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /CheatSheet/00-BoxModel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/00-BoxModel.png -------------------------------------------------------------------------------- /CheatSheet/01-FlexDirection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/01-FlexDirection.png -------------------------------------------------------------------------------- /CheatSheet/02-FlexWrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/02-FlexWrap.png -------------------------------------------------------------------------------- /CheatSheet/03-JustifyContent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/03-JustifyContent.png -------------------------------------------------------------------------------- /CheatSheet/04-AlignItem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/04-AlignItem.png -------------------------------------------------------------------------------- /CheatSheet/05-AlignContent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/05-AlignContent.png -------------------------------------------------------------------------------- /CheatSheet/06-AlignSelf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/06-AlignSelf.png -------------------------------------------------------------------------------- /CheatSheet/07-FlexItem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/07-FlexItem.png -------------------------------------------------------------------------------- /CheatSheet/08-NthChild.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozantekin/css-notes/695fc3526615819a730c362c5ac6d4d7f0f75fe7/CheatSheet/08-NthChild.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 |

Here you can find the resources, research, and cheat sheets I've prepared to address my CSS knowledge gaps.

5 | 6 |
7 | 8 |

Cheat Sheet

9 | 10 | - Box Model 11 | - Flex Direction 12 | - Flex Wrap 13 | - Flex Item 14 | - Justify Content 15 | - Align Item 16 | - Align Content 17 | - Align Self 18 | - nth-child 19 | 20 |
21 | 22 |

Articles

23 | 24 | - CSS Flexbox Handmade Cheat Sheets (Turkish) 25 | - CSS Generators: These Sites Will Save You Time 26 | - Master HTML & CSS by Playing Games 27 | 28 |
29 | 30 |

Videos

31 | 32 | - Difference Between `em` and `rem` 33 | - Centering a Div with CSS (3 Methods) 34 | - What is `linear-gradient` (Color Transition) 35 | - CSS Transform 36 | 37 |
38 | 39 |

Example Projects

40 | 41 | - Skateboard Video Platform 42 | - Glassmorphism Cloud Application 43 | - Responsive React Dashboard 44 | - Project Management Board UI 45 | - Responsive Social Platform UI 46 | - Customer Management UI 47 | - Task Management UI 48 | - CSS Grid Task Manager UI 49 | - Job Search Platform UI 50 | - File Sharing Web Application 51 | 52 |
53 | 54 |

Games

55 | 56 | - CSS Dinner 57 | - Flexbox Froggy 58 | - Codewars 59 | - Untrusted 60 | - Screeps 61 | - Elevator Saga 62 | - Codingame 63 | - Dungeons and Developers 64 | - CSS Grid Garden 65 | - CodeCombat 66 | - Hex Invaders 67 | - Pixact 68 | - Checkio 69 | - Flexbox Defense 70 | - Crunchzilla 71 | - RoboCode 72 | - CSS Battle 73 | - Codepip 74 | - Flexbox Zombies 75 | - Pure CSS (Sass) Carnival Game 76 | - CSS Game 77 | 78 | 79 |
80 | 81 |

Generators

82 | 83 | - Flexbox Generator 84 | - CSS Generator 85 | - Grid Generator 86 | - Neumorphism Generator 87 | - Gradient Button Generator 88 | - CSS Scan Generator 89 | - Glassmorphism Generator 90 | - Fancy Border Radius Generator 91 | - Text Shadow Generator 92 | -------------------------------------------------------------------------------- /desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | IconResource=C:\WINDOWS\System32\SHELL32.dll,80 3 | [ViewState] 4 | Mode= 5 | Vid= 6 | FolderType=StorageProviderGeneric 7 | --------------------------------------------------------------------------------