Thread by @Prathkum

CSS is an enormous module of web development but you don't need to learn everything in the beginning.

Let's try to figure out how much CSS will be enough to make beautiful websites

🧵 👇🏻

CSS is an amazing and unique language that servers a great purpose. We can make our website visually good using CSS. It describe the presentation of web pages, including typography,. layouts, color etc...

CSS is totally operates on properties value pair. And there are around ~300 distinct properties in CSS

Obviously remembering them all and their values is almost impossible.

In my opinion, entire CSS revolves around 20 properties only

You must have heard about "Pareto principle" which states that for many outcomes roughly 80% of consequences come from 20% of the causes

Similarly, in order to cover 80% of CSS, you need to learn only 20 properties

For example: Have you heard about "image-rendering property"?

If not, then its not a problem
if yes, then its great

This property basically defines the image scalinig algorithm

There are a lot of these types of properties in CSS which you never gonna use for sure.

Like,

📌 caret-color
📌 mask-composite
📌 will-change

Lets talk about some important concepts which you should know to be a fron-end developer 👇🏻

First and foremost

📌 The background and color

The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially
The colors are something from which users interact first whenever they visit your webpage

The background in the shorthand property which covers background-color, background-attachment, etc

But again, you will rarely use background-attachment, background-origin, etc

📌 The box-model

The entire website is a combination of boxes

The box-model covers

- Height
- Width
- Padding
- Border
- Margin

Here is the detailed thread on the box model:

https://twitter.com/Prathkum/status/1393153623748747264?s=20

📌 Typography

Moving forward, typography is an essential thing of web page. A good font can make your webpage and establish a strong visual hierarchy, provide a graphic balance to the website, and set the product's overall tone

📌 Layout

- CSS positioning
- Flexible box layout
- Grid layout

Structuring your website is essential as it provides better navigation and visualization of the content available on the site. Let's talk a little more about it and learn how we can create a proper layout.

In this thread, you'll find everything about CSS grid and web layout

https://twitter.com/Prathkum/status/1408352178364981250?s=20

📌 Responsive Web Design (RWD)

An extremely important topic in CSS. Responsive web design is little tricky but not so tough to master.

It covers

- media query
- layouts

You can check my detailed thread on RWD

https://twitter.com/Prathkum/status/1380834198039171073?s=20

I guess after learning all these concetps, you are good to go to JavaScript.

But remember CSS is so deep and there is always a little margin of improvement

Without taking much of your time, I guess this is pretty much it for this thread. If you like it, share it with your connections it means a lot to me ❤️

Peace out 😉