2 Amazing CSS Helpers Tool that You're Not Using Yet.
-
Easily and quickly convert pixel values into ram values
-
Shape divider lets you generate custom shapes to use on your web pages.
-
justrem.xyz
Easily and quickly convert pixel values into ram values
-
shapedivider.app
Shape divider lets you generate custom shapes to use on your web pages.
10 🔥 VS Code Extensions
🔸 Themes & Visuals
⚙️ Material Theme
⚙️ Indent Rainbow
⚙️ Bracket Pair Colorizer
⚙️ Highlight Matching Tag
⚙️ Better Comments
🔸 Insights
⚙️ Git Lens
⚙️ WakaTime
⚙️ Import Cost
🔸 Debugging
⚙️ Debugger for Chrome
⚙️ Turbo Console Log
🔸 Themes & Visuals
⚙️ Material Theme
⚙️ Indent Rainbow
⚙️ Bracket Pair Colorizer
⚙️ Highlight Matching Tag
⚙️ Better Comments
🔸 Insights
⚙️ Git Lens
⚙️ WakaTime
⚙️ Import Cost
🔸 Debugging
⚙️ Debugger for Chrome
⚙️ Turbo Console Log
Learn CSS™ pinned «10 🔥 VS Code Extensions 🔸 Themes & Visuals ⚙️ Material Theme ⚙️ Indent Rainbow ⚙️ Bracket Pair Colorizer ⚙️ Highlight Matching Tag ⚙️ Better Comments 🔸 Insights ⚙️ Git Lens ⚙️ WakaTime ⚙️ Import Cost 🔸 Debugging ⚙️ Debugger for Chrome ⚙️ Turbo Console Log»
CSS Pro Tip🎨
- Use negative "nth-child" and select element from 1 to n
For example, in this case, element from 1 to 4 will get selected
- Use negative "nth-child" and select element from 1 to n
For example, in this case, element from 1 to 4 will get selected
How do you set the order of CSS properties?
For clean code, I think the dependent property should be written later
For example,
For clean code, I think the dependent property should be written later
For example,
div {
display: flex;
flex-wrap: wrap;
}
div {
position: relative;
top: 100px;
}
Want to learn or improve CSS?
These 5 websites can help 👇
1️⃣ CSS reference
- CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated content
🖇️ https://cssreference.io/
2️⃣ Learn to code HTML and CSS
- Learn how to build beautiful and intuitive websites by way of clear and organized lessons
🖇️ https://learn.shayhowe.com/
3️⃣ CSS Layouts
- This site teaches the CSS fundamentals that are used in any website's layout.
🖇️ https://learnlayout.com/
4️⃣ CSS tutorial
- These tutorials on web design & CSS makes learning this stuff fun and easy
🖇️ https://www.csstutorial.net/
5️⃣ CSS cheat sheets
- Amazing CSS cheat sheet contains the most common style snippets
🖇️ https://htmlcheatsheet.com/css/
These 5 websites can help 👇
1️⃣ CSS reference
- CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated content
🖇️ https://cssreference.io/
2️⃣ Learn to code HTML and CSS
- Learn how to build beautiful and intuitive websites by way of clear and organized lessons
🖇️ https://learn.shayhowe.com/
3️⃣ CSS Layouts
- This site teaches the CSS fundamentals that are used in any website's layout.
🖇️ https://learnlayout.com/
4️⃣ CSS tutorial
- These tutorials on web design & CSS makes learning this stuff fun and easy
🖇️ https://www.csstutorial.net/
5️⃣ CSS cheat sheets
- Amazing CSS cheat sheet contains the most common style snippets
🖇️ https://htmlcheatsheet.com/css/
cssreference.io
CSS Reference
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Some amazing CSS animation libraries
👇
🔹
🔸
🔹
🔸
🔹
👇
🔹
minimamente .com/project/magic
🔸
animxyz .com
🔹
svgartista .net
🔸
animate .style
🔹
cssanimation .io
Just found a great tool🔥
- Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.
🖇️
https://www.magicpattern.design/tools/css-backgrounds
- Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.
🖇️
https://www.magicpattern.design/tools/css-backgrounds
MagicPattern
CSS Background Patterns by MagicPattern
Beautiful pure CSS background patterns that you can actually use in your projects!
Tailwind CSS resources 🎨
📌 Templates and components
-
-
-
📌 Code Snippets
-
📌 Playground
-
📌 Color tool
Check this amazing repo for more such great resources🔥
📌 Templates and components
-
tailwindtoolbox .com
-
tailwindcomponents .com
-
tailwind .build
📌 Code Snippets
-
github .com/mauro-codes/tailwind-css-snippets
📌 Playground
-
play.tailwindcss .com/
📌 Color tool
gradient-designer.csspost .com
Check this amazing repo for more such great resources🔥
https://github. com/aniftyco/awesome-tailwindcss