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
More from Pratham
If you start with the right course then the process becomes a little easier
I found some amazing YouTube videos and courses that will help you start your Web Development journey
🧵👇🏻
HTML and CSS
- A great way to arouse your web dev journey with Gary's (@designcoursecom) course on YouTube
🔗 https://t.co/xjm7nfV2L2
JavaScript
- Although it's impossible to learn JavaScript in 2 hours but JavaScript mastery is one the best YouTube chanel for JavaScript. This 2 hours long crash course will help you start your journey and gives you quick overview.
🔗 https://t.co/1zcSeu4zKE
Git and GitHub
Git is an essential tool. And after learning JavaScript, I think one should go for Git and GitHub. Check out this free great course on Udemy
🔗 https://t.co/E14cibOLXb
React
What you'll learn
- what problems React can solve
- how React solves those problems under the hood
- what JSX is and how it translates to regular JavaScript function calls and objects
- manage state with hooks
- build forms
🔗 https://t.co/3z22aeVQFc
I found some amazing YouTube videos and courses that will help you start your Web Development journey
🧵👇🏻
HTML and CSS
- A great way to arouse your web dev journey with Gary's (@designcoursecom) course on YouTube
🔗 https://t.co/xjm7nfV2L2
JavaScript
- Although it's impossible to learn JavaScript in 2 hours but JavaScript mastery is one the best YouTube chanel for JavaScript. This 2 hours long crash course will help you start your journey and gives you quick overview.
🔗 https://t.co/1zcSeu4zKE
Git and GitHub
Git is an essential tool. And after learning JavaScript, I think one should go for Git and GitHub. Check out this free great course on Udemy
🔗 https://t.co/E14cibOLXb
React
What you'll learn
- what problems React can solve
- how React solves those problems under the hood
- what JSX is and how it translates to regular JavaScript function calls and objects
- manage state with hooks
- build forms
🔗 https://t.co/3z22aeVQFc
A complete beginner's guide to styling your website with CSS.
Thread 🧵👇🏻
CSS is an amazing and unique language that servers a great purpose. We can make our website visually good using CSS. It describe the presentation of web pages, including typography,. layouts, color etc...
{ 2 / 27 }
First and foremost
The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially.
The colors are something from which users interact first whenever they visit your webpage
{ 3 / 27 }
There are a lot of great color palette out there using which you can generate pleasant color schemes
Check this great tool for generating accessible colors
https://t.co/ndsgBaMv2M
{ 4 / 27 }
Don't think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..
{ 5 / 27 }
Thread 🧵👇🏻
CSS is an amazing and unique language that servers a great purpose. We can make our website visually good using CSS. It describe the presentation of web pages, including typography,. layouts, color etc...
{ 2 / 27 }
First and foremost
The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially.
The colors are something from which users interact first whenever they visit your webpage
{ 3 / 27 }
There are a lot of great color palette out there using which you can generate pleasant color schemes
Check this great tool for generating accessible colors
https://t.co/ndsgBaMv2M
{ 4 / 27 }
Don't think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..
{ 5 / 27 }
Five free VS Code extensions that will change the way you do web development:
1. RapidAPI Client
Fulfill all your need for API development.
• Test and consume APIs
• Work with your VS Code theme
• Generate TypeScript, Swift, and Python interfaces from responses.
🔗 https://t.co/FR0QhyTi8v
2. Better Comments
Create more human-friendly comments in your code.
• Alerts
• Queries
• TODOs
• Highlights
🔗 https://t.co/AV2BwAMAlL
3. Git Graph
View a Git Graph of your repository and efficiently perform Git actions from the graph.
🔗 https://t.co/S5wagmTgsa
4. Peacock
Do you have a habit of keeping multiple VS Code windows open?
Peacock lets you change the color of your VS code even if multiple instances are open.
🔗 https://t.co/bmidPkTQOK
1. RapidAPI Client
Fulfill all your need for API development.
• Test and consume APIs
• Work with your VS Code theme
• Generate TypeScript, Swift, and Python interfaces from responses.
🔗 https://t.co/FR0QhyTi8v
2. Better Comments
Create more human-friendly comments in your code.
• Alerts
• Queries
• TODOs
• Highlights
🔗 https://t.co/AV2BwAMAlL
3. Git Graph
View a Git Graph of your repository and efficiently perform Git actions from the graph.
🔗 https://t.co/S5wagmTgsa
4. Peacock
Do you have a habit of keeping multiple VS Code windows open?
Peacock lets you change the color of your VS code even if multiple instances are open.
🔗 https://t.co/bmidPkTQOK
More from Webdev
23 FREE SVG Icon Libraries For Front-End Developers
Mega Thread 🧵👇
1️⃣ Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT-licensed icon pack.
2️⃣ 700+ CSS Icons, Customizable, Retina Ready & API
Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled components, Figma, and Adobe XD. Easy integration: Embed, NPM & API
3️⃣ SVG Repo - Free SVG Vectors and Icons
Free Vectors and Icons in SVG format. Download free mono or multi-color vectors for commercial use. Search in 300.000+ Free SVG Vectors and Icons.
https://t.co/2Ht2sI23TE
4️⃣ Feather – Simply beautiful open source icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.
Mega Thread 🧵👇
1️⃣ Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT-licensed icon pack.
2️⃣ 700+ CSS Icons, Customizable, Retina Ready & API
Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled components, Figma, and Adobe XD. Easy integration: Embed, NPM & API
3️⃣ SVG Repo - Free SVG Vectors and Icons
Free Vectors and Icons in SVG format. Download free mono or multi-color vectors for commercial use. Search in 300.000+ Free SVG Vectors and Icons.
https://t.co/2Ht2sI23TE
4️⃣ Feather – Simply beautiful open source icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.
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
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
Are you a web developer?
Here's a list of websites that offer free & beautiful website templates:
🧵👇🏻
1. HTML5UP: Very modern, unique responsive HTML5/CSS3 themes
https://t.co/Nx1IWM7Kho
2. Templatemo: Minimal, resume, gallery themes and more
https://t.co/IRtOxrujUh
3. Templated .co: Tons of minimalistic HTML5/CSS3
4. FreeHTML5: Free & premium HTML5 and Bootstrap themes
https://t.co/YFVkiDM3Th
5. StyleShout: Brilliantly crafted free website templates
https://t.co/AaGAkGlLTV
6. Start Bootstrap: Bootstrap starter
7. Zerotheme: HTML5, Bootstrap, Prestashop templates
https://t.co/UtlaNxGh6Q
8. HTML5xCSS3: Collection of wonderful templates in different categories
https://t.co/fm4AOthUdR
9. Colorlib: Almost any category of theme you can think
10: Free CSS: Huge collection of free templates
https://t.co/S5yQrkp1eq
11. Hubspot: Templates, infographics, banners and much more
https://t.co/T10zTgkIzp
12. Mobirise: Great looking HTML5/CSS3
Here's a list of websites that offer free & beautiful website templates:
🧵👇🏻
1. HTML5UP: Very modern, unique responsive HTML5/CSS3 themes
https://t.co/Nx1IWM7Kho
2. Templatemo: Minimal, resume, gallery themes and more
https://t.co/IRtOxrujUh
3. Templated .co: Tons of minimalistic HTML5/CSS3
4. FreeHTML5: Free & premium HTML5 and Bootstrap themes
https://t.co/YFVkiDM3Th
5. StyleShout: Brilliantly crafted free website templates
https://t.co/AaGAkGlLTV
6. Start Bootstrap: Bootstrap starter
7. Zerotheme: HTML5, Bootstrap, Prestashop templates
https://t.co/UtlaNxGh6Q
8. HTML5xCSS3: Collection of wonderful templates in different categories
https://t.co/fm4AOthUdR
9. Colorlib: Almost any category of theme you can think
10: Free CSS: Huge collection of free templates
https://t.co/S5yQrkp1eq
11. Hubspot: Templates, infographics, banners and much more
https://t.co/T10zTgkIzp
12. Mobirise: Great looking HTML5/CSS3