Learn CSS™

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

161 views07:06

Learn CSS™

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»

07:06

Learn CSS™

CSS pro tip 🎨

You can truncate text using 3 lines of CSS

155 viewsedited 04:45

Learn CSS™

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

122 views03:08

Learn CSS™

Have you heard of the "Lobotomized Owl" CSS selector

📌 It selects all the elements in the flow of the document that follow other elements

141 viewsedited 03:10

Learn CSS™

How do you set the order of CSS properties?

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;
}

156 viewsedited 04:18

Learn CSS™

Cheat sheets.pdf

4.9 MB

CSS Layout Notes

782 viewsedited 16:51

Learn CSS™

Learn CSS™ pinned a file

16:53

Learn CSS™

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/

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.

165 viewsedited 02:17

Learn CSS™

CSS tip 🎨

- You can create outline around your text using one line of CSS

138 views02:23

Learn CSS™

Some amazing CSS animation libraries
👇

🔹minimamente .com/project/magic
🔸animxyz .com
🔹svgartista .net
🔸animate .style
🔹cssanimation .io

108 viewsedited 12:56

Learn CSS™

https://t.me/joinchat/eQrm_83P4yI0ZTU9

106 views18:28

Learn CSS™

CSS property 🎨

The "backface-visibility" property defines whether the back side of an element should be visible or not

104 viewsedited 02:16

Learn CSS™

Use text-decoration like a pro😎

100 viewsedited 06:41

Learn CSS™

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

MagicPattern

CSS Background Patterns by MagicPattern

Beautiful pure CSS background patterns that you can actually use in your projects!

879 views02:33

Learn CSS™

Tailwind CSS 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

122 viewsedited 04:26

Learn CSS™

CSS Pro Tip 🎨

Use ::marker selector for changing the marker's style of list items

120 viewsedited 06:42

Learn CSS™

John Hopkins University is offering this free course on HTML, CSS, and JavaScript for Web Developers.

Link:
https://www.coursera.org/learn/html-css-javascript-for-web-developers

Coursera

HTML, CSS, and Javascript for Web Developers

Offered by Johns Hopkins University. Do you realize that ... Enroll for free.

170 views06:48

Learn CSS™

☯Do not write CSS code, use these free generators instead that can help you immensely☯

1️⃣ Stripes generator

- Pure CSS Stripes Generator that you can use for backgrounds.

🔗 https://stripesgenerator.com/

2️⃣ Gradient generator

- As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile

🔗 https://cssgradient.io/

3️⃣ Pattern generator

- It lets you create background pattern for free

🔗 http://www.patternify.com/

4️⃣ CSS Accordion Slider Generator

- Create fully responsive, css only accordion sliders

🔗 https://accordionslider.com/

5️⃣ Palette Ninja

- Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds.

🔗 https://palette.ninja

6️⃣ Layout generator

- Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.

🔗 https://grid.layoutit.com/

589 viewsedited 19:06

About

Blog

Apps

Platform