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.

πŸ‘‡πŸ˜‰
1️⃣ CSS Tricks -

CSS tricks provide so much value through articles

And whenever I need to read about something deeply I prefer CSS tricks articles.

css-tricks.com
2️⃣ CSS Pro-tips -

A collection of tips helps to take your CSS skills pro.

github.com/AllThingsSmitt…
3️⃣ CSS reference -

it is a free visual guide and features the most popular properties,

And explains them with illustrated and animated examples.

I love the illustrated examples.

cssreference.io
4️⃣ Learn CSS -

Learn CSS is a well-curated guide and very handy to take reference from it

web.dev/learn/css/
5️⃣ Cheatsheets -

Cheat Sheets are always best for a quick look-up.

6️⃣ MDN -

Big BOSS πŸ˜‰ ( WE All Know How Much Helpful It Is )

developer.mozilla.org/en-US/docs/Web…
7️⃣ Googling -

Without googling skills we are not even true developers πŸ˜….

searching on google about your problem is also an artπŸ˜‰

Learn how to use google efficiently and save your time.
Thanks for stopping and checking these resources, I'm sure it's going to help you at some point in time.

1. Follow @Ali6nX404 for more such content.

2. Quote retweet the first and share what do you think of this?

Cheers! πŸ₯‚ Image

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Mahesh πŸ‘½πŸ›Έ

Mahesh πŸ‘½πŸ›Έ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Ali6nX404

8 Dec
π˜Ύπ™Žπ™Ž π™Žπ™šπ™‘π™šπ™˜π™©π™€π™§π™¨ 𝙂π™ͺπ™žπ™™π™š βœ…πŸ’™

βœ” 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 πŸš€
πŸ“Œ What is CSS Selector?

CSS selector actually selects the content you want to style.

CSS provides different kinds of selectors to do this.
Read 16 tweets
5 Dec
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.
After Creating a lot of projects while watching tutorials.

One day I decided to create a project of my own.
Read 21 tweets
4 Dec
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
πŸ“Œ What is the vendor prefix?

CSS properties starting with -webkit-, -moz-, -ms- or -o- are called vendor prefixes.

These are the vendor-prefixed offered by the relevant rendering engines.
Read 13 tweets
3 Dec
Level up your CSS With These Generators and tools✨

threadπŸ§΅πŸ‘‡ Image
1️⃣ This is the best generator to design your next project grid layout visually.

Copy the CSS code directly.
grid.layoutit.com
2️⃣ This Generator allows you to create complex shapes easily.

bennettfeely.com/clippy/
Read 11 tweets
22 Oct
Cheat Sheets that always save my time during development πŸš€

Thread πŸ‘‡
1️ HTML cheatsheet -
htmlcheatsheet.com
2️⃣ CSS cheat sheet -

htmlcheatsheet.com/css/
Read 10 tweets
21 Oct
Confused between boxes and box model πŸ™„πŸ€”

π˜‰π˜°π˜Ήπ˜¦π˜΄ - π˜‰π˜°π˜Ήπ˜¦π˜΄ 𝘳𝘦𝘀𝘡𝘒𝘯𝘨𝘢𝘭𝘒𝘳 π˜‰π˜°π˜Ήπ˜¦π˜΄ 𝘌𝘷𝘦𝘳𝘺𝘸𝘩𝘦𝘳𝘦 πŸ€·β€β™‚οΈπŸ˜…

Let's learn the most important concept 𝑩𝒐𝒙 𝑴𝒐𝒅𝒆𝒍 π’Šπ’ π‘ͺ𝑺𝑺.

Thread πŸ‘‡ Image
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.
on a website, you will see all the content is just a combination of boxes,

Arranged on top to, on next to, bottom, or nested in each other.

Header, nav, footer everything made up with boxes.

Usually, we called it HTML elements instead of rectangles boxes.
Read 21 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(