Roadmap to learn CSS π¨π£οΈ
β³ Color
β³ Background
β³ Box model
β³ Height and width
β³ Margin and padding
β³ Border
β³ Positioning
β³ display
β³ Layouts
β³ Grid and Flex
β³ Alignment
β³ Fonts
β³ Animation
β³ Pseudo-classes
β³ Media query
![](https://pbs.twimg.com/media/E1kBc8WVgAYYSB7.jpg)
More from Pratham
5 amazing GitHub repositories for every self taught developer
A Thread π§΅
1οΈβ£ Computer Science
π Path to a free self-taught education in Computer Science!
π https://t.co/67jB5zqIes
2οΈβ£ Free Certifications
Curated list of free courses & certifications
π https://t.co/4XtlAVlovs
3οΈβ£ Free Programming Books
π Freely available programming books
π https://t.co/eOWLCtwtIV
4οΈβ£ JavaScript Question
A long list of (advanced) JavaScript questions, and their explanations β¨
π https://t.co/UvEl1Esvh3
A Thread π§΅
1οΈβ£ Computer Science
π Path to a free self-taught education in Computer Science!
π https://t.co/67jB5zqIes
![](https://pbs.twimg.com/media/E1MlI_xXMAQ62qx.png)
2οΈβ£ Free Certifications
Curated list of free courses & certifications
π https://t.co/4XtlAVlovs
![](https://pbs.twimg.com/media/E1MlI_qWEAA0bwv.jpg)
3οΈβ£ Free Programming Books
π Freely available programming books
π https://t.co/eOWLCtwtIV
![](https://pbs.twimg.com/media/E1MlI_bXMAM96ZG.jpg)
4οΈβ£ JavaScript Question
A long list of (advanced) JavaScript questions, and their explanations β¨
π https://t.co/UvEl1Esvh3
![](https://pbs.twimg.com/media/E1MlI_iWQAMuR7_.jpg)
If you know CSS then you can use these amazing generators and save your time
Thread π§΅ππ»
1οΈβ£ CSS Box Shadow Generator
- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects
π https://t.co/6La36IzBLj
2οΈβ£ Glassmorphism
- Generate glassmorphic design easily
π https://t.co/qrKqDV5tzY
3οΈβ£ Cool Backgrounds
- Explore a beautifully curated selection of cool backgrounds that you can add to your next project
π https://t.co/df7VSaRSh9
4οΈβ£ Pixel art
- Create CSS pixel art, export the results to CSS and download them.
π https://t.co/ojD8qwzuhx
Thread π§΅ππ»
1οΈβ£ CSS Box Shadow Generator
- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects
π https://t.co/6La36IzBLj
![](https://pbs.twimg.com/media/ExQCa5KW8AU4lWs.png)
2οΈβ£ Glassmorphism
- Generate glassmorphic design easily
π https://t.co/qrKqDV5tzY
![](https://pbs.twimg.com/media/ExQCa6LW8AQ-_N0.jpg)
3οΈβ£ Cool Backgrounds
- Explore a beautifully curated selection of cool backgrounds that you can add to your next project
π https://t.co/df7VSaRSh9
![](https://pbs.twimg.com/media/ExQCa5QWUAU_Xcs.jpg)
4οΈβ£ Pixel art
- Create CSS pixel art, export the results to CSS and download them.
π https://t.co/ojD8qwzuhx
![](https://pbs.twimg.com/media/ExQCa41WQAI0JYy.jpg)
I've brought you some amazing GitHub repositories of web development tips and tricks π
THREADπ§΅π½
1οΈβ£ JS Tips
- A huge list of 73 great tips and tricks of JavaScript
π https://t.co/r0J9vW8WrH
2οΈβ£ CSS Protips
- A collection of tips to help take your CSS skills pro. Definitely check it out
π https://t.co/5haB2xTWuz
3οΈβ£ JS Tips and Tricks
- Some advanced tips and tricks of JavaScript that can help you to take your skills onto next level
π https://t.co/NvfoANwweV
4οΈβ£ Git Tips
- Git is an essential tool for very programmer. in this repo you'll find the most commonly used git tips and tricks
π https://t.co/34qvOhYCZE
THREADπ§΅π½
1οΈβ£ JS Tips
- A huge list of 73 great tips and tricks of JavaScript
π https://t.co/r0J9vW8WrH
![](https://pbs.twimg.com/media/EwlZUNhWEAI_FuF.jpg)
2οΈβ£ CSS Protips
- A collection of tips to help take your CSS skills pro. Definitely check it out
π https://t.co/5haB2xTWuz
![](https://pbs.twimg.com/media/EwlZUNYWgAIJQ7R.jpg)
3οΈβ£ JS Tips and Tricks
- Some advanced tips and tricks of JavaScript that can help you to take your skills onto next level
π https://t.co/NvfoANwweV
![](https://pbs.twimg.com/media/EwlZUNXXIAAXSQk.png)
4οΈβ£ Git Tips
- Git is an essential tool for very programmer. in this repo you'll find the most commonly used git tips and tricks
π https://t.co/34qvOhYCZE
![](https://pbs.twimg.com/media/EwlZUNgXAAcMRDJ.png)
More from Webdev
6 beginner friendly websites that will boost your HTML and CSS learning process π
π§΅ππ»
1οΈβ£ Learn HTML
- The easiest way to learn HTML & CSS. Learn HTML provides an interactive tutorial that explains how to build HTML & CSS websites step by step.
π https://t.co/W1XytKL1MI
2οΈβ£ HTML best practice
- A very well written document on HTML best practice
π https://t.co/6PTcY1U5Cw
3οΈβ£ Learn to Code HTML & CSS
- Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS
π https://t.co/LwY9E2qUNS
4οΈβ£ Hex Invaders
- Hex Invaders is a fun way to learn and understand what hex codes are and how they work
π https://t.co/EpQyhlN7pv
π§΅ππ»
1οΈβ£ Learn HTML
- The easiest way to learn HTML & CSS. Learn HTML provides an interactive tutorial that explains how to build HTML & CSS websites step by step.
π https://t.co/W1XytKL1MI
![](https://pbs.twimg.com/media/E07rPvtUcAcDo4K.png)
2οΈβ£ HTML best practice
- A very well written document on HTML best practice
π https://t.co/6PTcY1U5Cw
![](https://pbs.twimg.com/media/E07rTyTVkAA1SnW.png)
3οΈβ£ Learn to Code HTML & CSS
- Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS
π https://t.co/LwY9E2qUNS
![](https://pbs.twimg.com/media/E07rbvpVIAYRwkJ.jpg)
4οΈβ£ Hex Invaders
- Hex Invaders is a fun way to learn and understand what hex codes are and how they work
π https://t.co/EpQyhlN7pv
![](https://pbs.twimg.com/ext_tw_video_thumb/1391308330027470852/pu/img/6jdLKUbM5pxbwD8e.jpg)
5 great gradient background sites for every web developer and designer π¨
π§΅ππ»
1οΈβ£ uiGradients
- A handpicked collection of beautiful color gradients for designers and developers.
π https://t.co/EainhiePop
2οΈβ£ Eggradient
- Ready to use gradient background colors. β Cool Gradients are prepared according to the latest design trends
π https://t.co/F0uYVsZbA4
3οΈβ£ Mesh Gradients
- Create beautiful gradient like aurora UI in few clicks
π https://t.co/MV8PT7q3Kz
4οΈβ£ CSS Gradient
- Create beatiful gradeint either linear or radial on different angles
π https://t.co/dlCExilHAT
π§΅ππ»
![](https://pbs.twimg.com/media/E2z6WrjWUAEconS.png)
1οΈβ£ uiGradients
- A handpicked collection of beautiful color gradients for designers and developers.
π https://t.co/EainhiePop
![](https://pbs.twimg.com/media/E2z6Wu-XEAMrcT8.jpg)
2οΈβ£ Eggradient
- Ready to use gradient background colors. β Cool Gradients are prepared according to the latest design trends
π https://t.co/F0uYVsZbA4
![](https://pbs.twimg.com/media/E2z6WrrXoBE_fzy.jpg)
3οΈβ£ Mesh Gradients
- Create beautiful gradient like aurora UI in few clicks
π https://t.co/MV8PT7q3Kz
![](https://pbs.twimg.com/media/E2z6WuiX0AE1hgW.png)
4οΈβ£ CSS Gradient
- Create beatiful gradeint either linear or radial on different angles
π https://t.co/dlCExilHAT
![](https://pbs.twimg.com/media/E2z6WuoX0AMGnsj.jpg)
Use these 5 websites to learn web development for free in 2023 (take a look):
1. Codedamn
All-in-one platform for learning web development:
β’ Hands-on practice and projects bundled
β’ Video content along with interactive labs, quizzes, and articles
β’ Every course comes with a certificate
β’ code brushes AI in playgrounds
π https://t.co/mXmUtJZnOU
2. Codepip
Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.
π https://t.co/MjHNsLvkiL
3. RapidAPI Comics
Learn API development with RapidAPI Comics (sketch notes and fun analogies).
π https://t.co/KONorFomgu
4. JS Visualizer 9000
Learn JavaScript by visualizing your code.
π https://t.co/9NId4GjGAq
1. Codedamn
All-in-one platform for learning web development:
β’ Hands-on practice and projects bundled
β’ Video content along with interactive labs, quizzes, and articles
β’ Every course comes with a certificate
β’ code brushes AI in playgrounds
π https://t.co/mXmUtJZnOU
![](https://pbs.twimg.com/media/FnFA6VsWQAEDeDF.jpg)
2. Codepip
Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.
π https://t.co/MjHNsLvkiL
![](https://pbs.twimg.com/media/FnFA6wGXkAEwnAF.png)
3. RapidAPI Comics
Learn API development with RapidAPI Comics (sketch notes and fun analogies).
π https://t.co/KONorFomgu
![](https://pbs.twimg.com/media/FnFA7BSXEAM6mWR.png)
4. JS Visualizer 9000
Learn JavaScript by visualizing your code.
π https://t.co/9NId4GjGAq
![](https://pbs.twimg.com/media/FnFA7SiWAAI5bfn.png)