If you don't know "How CSS Works",

because of this sometimes it feels like Black Magic 🪄

That's why I'm constantly creating content to simplify complex CSS topics. 🤞

Here is my top creation of 2022 👇🧵 1️⃣ Positioning in CSS

https://twitter.com/Ali6nX404/status/1479792520687063041

How Positioning works in CSS 🧐

◼ static
◼ relative
◼ absolute
◼ fixed
◼ sticky

Thread 🧵 Positioning is one of the core concepts of CSS.

It isn’t as easy as it seems.

I think you must have encountered certain things like navbar or sidebar.

We scroll the webpage but they don't move from their position.

𝘾𝙎𝙎 𝙎𝙚𝙡𝙚𝙘𝙩𝙤𝙧𝙨 𝙂𝙪𝙞𝙙𝙚 ✅💙

✔ Universal Selector
✔ Class selector
✔ Type selector
✔ ID selector
✔ Attribute selector

Many More...

𝐓𝐡𝐫𝐞𝐚𝐝 🧵 𝙃𝙚𝙡𝙡𝙤 𝙗𝙚𝙖𝙪𝙩𝙞𝙛𝙪𝙡 𝙃𝙪𝙢𝙖𝙣𝙨 👋

In this thread, we are going to cover basic CSS selectors with code examples.

Let's start 🚀

I wasted 2 months in tutorial hell😖😫

But WTF is Tutorial Hell? 🤷‍♀️

How to escape it?🙄

Thread 🧵👇 As I started learning to code, I was stuck in tutorial hell. It felt like, I am learning a lot of the stuff.

I have mastered CSS and JS.

When you read CSS code and find some weird code like :

-webkit-,
-moz-,
-o-,
-ms-

Let's understand about them⚡👇 What we're going to cover:-

◼ What is the vendor prefix.
◼ Prefixes used by major browsers
◼ Why we Use?
◼ property supported by browsers or not
◼ How we can use vendor prefixes?
◼ automate the vendor prefix writing

Level up your CSS With These Generators and tools✨

thread🧵👇 1️⃣ This is the best generator to design your next project grid layout visually.

Copy the CSS code directly.
grid.layoutit.com

CSS resources that always save my life 😅🚀

Thread 👇 This thread is just a collection of resources that I use in my day-to-day work.

👇😉

Cheat Sheets that always save my time during development 🚀

Thread 👇 1️ HTML cheatsheet -
htmlcheatsheet.com

Confused between boxes and box model 🙄🤔

𝘉𝘰𝘹𝘦𝘴 - 𝘉𝘰𝘹𝘦𝘴 𝘳𝘦𝘤𝘵𝘢𝘯𝘨𝘶𝘭𝘢𝘳 𝘉𝘰𝘹𝘦𝘴 𝘌𝘷𝘦𝘳𝘺𝘸𝘩𝘦𝘳𝘦 🤷‍♂️😅

Let's learn the most important concept 𝑩𝒐𝒙 𝑴𝒐𝒅𝒆𝒍 𝒊𝒏 𝑪𝑺𝑺.

Thread 👇 The first thing you need to understand is that,

Everything displayed is just a box.

Everything you see on a web page is made up of rectangles boxes.

Confused About rem and em units in CSS?

Which is better to use in CSS 🙄

Let's understand both units ✨

thread🧵👇 em and rem both are known as relative units in CSS.

You've probably been using em and rem units now for a while already,

but still, you might be confused about which unit is best in which scenario.

Total 1k Views, 100+ reactions, and 30 comments on my first blog from various platforms. 😎😍

5 things I learned during the creation of that article.

thread🧵👇 1️⃣ Research before write:-

I chose gradient because I use gradient a lot in my CSS art creation and,

I noticed there are not many well-detailed blogs available on the internet.

So I decided to go with it 🤠

Are you using solid color background?🙄

Let's upgrade it with beautiful CSS gradients ✨

Mega thread🧵👇 1️⃣ What is the gradient?

CSS gradient allows you to create anything from a smooth gradient between two colors, right up to impressive mixing and multiple gradients.

Gradient makes the background more attractive than a solid color.

Are you using solid color background?🙄

Let's upgrade it with beautiful CSS gradients ✨

Mega thread🧵👇 1️⃣ What is the gradient?

CSS gradient allows you to create anything from a smooth gradient between two colors, right up to impressive mixing and multiple gradients.

Gradient makes the background more attractive than a solid color.

We're shifting on web 3.0 or you are still using Div element all along.🙄

That's not fair🤦‍♂️🤷‍♂️

Let's upgrade Div with Semantic tags. 🤯✔

thread🧵👇 1️⃣ Wtf is Semantic?

Semantics refers to the meaning of a piece of code:-

"what purpose or role does that HTML element have".

The semantic element itself conveys some information about the type of content contained between the opening and closing tags.

1/3

Best CSS animation libraries for Web Developers✨

thread🧵👇 1️⃣ animate - This is a cross-browser library of CSS animations.

It’s extremely easy to use and helps you create beautiful CSS animations for web projects.

animate.style

Are You a Frontend Developer?

Or want to boost your frontend skills?

Here are 6 awesome websites to boost your Frontend skills.

Thread 🧵 1. frontendmentor - Solve real-world HTML, CSS, and JavaScript challenges whilst working on professional designs. one of the best website to get inspiration for your next projoct.

frontendmentor.io