Starting to learn CSS ?

Here is the roadmap from very beginning to the end.

🧵👇
➡️Stage 1 : Basics

--> Adding CSS(Inline, Internal, External)
--> CSS Selectors (Classes and IDs)
--> Display property
--> Fonts and other formatting properties

➡️Stage 2 : Elements Arrangements

--> Float And Clear
--> Positioning
--> Box- Sizing
➡️Stage 3 : Layouts

--> Flexbox
--> Grids

➡️Stage 4 : Responsive

--> Text effects
--> Images and video resizing
--> Different Viewports
--> Media Queries
➡️Stage 5 : Advanced

--> Variables
--> Transitions and Animations
--> 2D and 3D Transforms
--> Shadows and Gradients

➡️ Stage 6 : CSS Preprocessors

--> SASS
--> SCSS
Is this end ?

No css does not end here. You need to start practicing on websites like Frontend Mentor and Codewell so that you can improve your skills.

Once you feel confident in them. You can go for a CSS framework ( I learned Bootstrap, Materialise CSS and Tailwind CSS ).
That's it for this thread. Did you find it useful ?

If yes , then please consider :

💛 Liking these tweets
🔁 Retweet the first tweet so others can see it.
👤 Following me ( @SauravPurohit4 ) for more content on Front End Development.

• • •

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

Keep Current with Saurav Purohit

Saurav Purohit 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 @SauravPurohit4

3 Oct
Some awesome websites for your next web development project.

A THREAD👇🧵
🔹Figside

This website let you convert your figma design into real websites.

figside.com
🔹 CSSFilters

This website help you to generate overlay effect for your images using CSS filter code.

cssfilters.co
Read 11 tweets
1 Oct
As a developer, we all know how an extension can make your life easier and make you more productive.

Here I have curated 15 Chrome extensions for you.

👇🧵
1. WhatFont

WhatFont is a very useful Chrome extension for developers who need to identify fonts used on web pages.

chrome.google.com/webstore/detai…
2. JSON Viewer

JSON Viewer helps to manage JSON data into a quickly recognizable hierarchy view in a browser window.

chrome.google.com/webstore/detai…
Read 18 tweets
30 Sep
Some awesome websites to help you in your web development journey.

👇🧵
🔹W3Layouts

At W3Layouts, it have HTML website templates and WordPress Themes with a predefined set of required web pages.

w3layouts.com
🔹Threed .io

Generate 3D Mockup images right in your Browser

🔗 threed.io
Read 7 tweets
28 Sep
Some awesome websites for your next web development project.

👇🧵
🔹FreebiesBug

Hand-picked resources for web designer and developers, constantly updated.

freebiesbug.com
🔹TypeKit practice

Typekit Practice is a collection of resources and a place where everyone can practice typography.

practice.typekit.com
Read 9 tweets
26 Sep
Some Awesome Websites for your next Web Development project :
🔹uiCookies

This website contains stunning HTML templates you can get inspired of.

uicookies.com
🔹Bounceapp

This website takes screenshots of any website. You can download the screenshot, or make notes on the screenshot and share them.

🔗 bounceapp.com
Read 9 tweets
24 Sep
Some Awesome Websites you use in your next project.

👇🧵
🔹Blobs

Generate awesome blobs for you Website.

blobs.app
🔹UI Design Daily

1000+ open source UI designs. Updated Daily

uidesigndaily.com
Read 9 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 Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(