Thread by @Prathkum

You can learn some basic CSS and add some great styling in your web page in less than 10 days.

Let's see how👇

Thread 🧵

First and foremost

The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially

{ 2 / 17 }

Don't think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..

{ 3 / 17 }

Box model is one of the most important concept of CSS. It's not so tough to learn. The box-model covers

- Height
- Width
- Padding
- Border
- Margin

{4 / 17 }

Height and width property are pretty intuitive. These are used to set fixed height and width to the element

I suggest to give a look at max, min-width and max, min-height properties as well.

{ 5 / 17 }

Proper and uniform separation of elements is something that can give your webpage a appealing look. Margin and padding can do this for you.

Give this article a short read for Definitive guide of padding and margin
uxengineer.com/padding-vs-mar…

{ 6 / 17 }

Border are used to set the color, width and style to elements. You can learn it in 5 min😄

Some good border selection can give your element a good pleasant look

{ 7 / 17 }

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.

You can add free fonts from Google's official site

{ 8 / 17 }

There are five basic classifications of fonts:

1. serif
2. sans serif
3. script
4. monospaced
5. display

Give this article a read for more detailed explanation

fonts.com/content/learni…

{ 9 / 17 }

fonts .google.com (Download free fonts from here)

You just need to look at few fonts properties. For ex,

🔹 font-family
🔹 font-weight
🔹 font-size

{ 10 / 17 }

Alright moving further, We have CSS positioning.

From here, a bit tricky CSS starts. Using CSS positioning you can change the position of you element. This might seems bit tough but you can learn it in 2-3 days

{ 11 / 17 }

I have already written a detailed thread on CSS positioning, If you're interested check it out

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

{ 12 / 17 }

Up to this point you have some decent knowledge of styling your website. It would be great if you learn about a layout system now.

Flex and Grid

Grid is little bit tough to master but flex isn't

{ 13 / 17 }

Again 😄 I have a thread if flex layout as well. Check it out

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

{ 14 / 17 }

Hmm awesome!! I think you're all set to learn about responsiveness here.

Don't skip it. There are millions of devices on which your website is viewed.

{ 15 / 17 }

In this thread I have compiled some general tips to make your website responsive

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

{ 16 / 17 }

Great!! I think that's pretty much it in order to give you a quick overview.

If you like this thread, a retweet means a lot ❤️

{ 17 / 17 }

Fun fact:

A few hours ago while I was writing this thread, my younger brother(@AmanKum1406) comes and says that nobody will read it

Ruthless🙂