A Complete Guide to Getting Started with CSS

Thread https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">
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...

{ 2 / 23 }
We can& #39;t imagine web development without CSS. See two attached images

1. With CSS
2. Without CSS

Now imagine all websites without styling....

{ 3 / 23 }
We can& #39;t imagine web development without CSS. See two attached images1. With CSS2. Without CSSNow imagine all websites without styling....{ 3 / 23 }
We can& #39;t imagine web development without CSS. See two attached images1. With CSS2. Without CSSNow imagine all websites without styling....{ 3 / 23 }
I hope you got it why CSS is important for web development. Alright let& #39;s move onto asctually discussion that how you start learning it

{ 4 / 23 }
First and foremost

The characterstic of a great website is it& #39;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

{ 5 / 23 }
There are a lot of great color palette out there using which you can generate pleasant color schemes

Check this great tool for generating accessible colors

https://color.adobe.com/create/color-accessibility

{">https://color.adobe.com/create/co... 6 / 23 }
Don& #39;t think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..

{ 7 / 23 }
Box model is one of the most important concept of CSS. It& #39;s not so tough to learn. The box-model covers

- Height
- Width
- Padding
- Border
- Margin

{ 8 / 23 }
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.

{ 9 / 23 }
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
https://uxengineer.com/padding-vs-margin/

{">https://uxengineer.com/padding-v... 10 / 23 }
Padding vs Margin: The Definitive Guide – UX Engineer

Padding and margin have two different purposes. Padding is for spacing within elements. Margin is for spacing between elements. However, there's more to it!

https://uxengineer.com/padding-vs-margin/
Border are used to set the color, width and style to elements. You can learn it in 5 minhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="😄" title="Lächelndes Gesicht mit geöffnetem Mund und lächelnden Augen" aria-label="Emoji: Lächelndes Gesicht mit geöffnetem Mund und lächelnden Augen">

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

{ 11 / 23 }
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& #39;s overall tone.

You can add free fonts from Google& #39;s official site

{ 12 / 23 }
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

https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications

{">https://www.fonts.com/content/l... 13 / 23 }
fonts .google.com (Download free fonts from here)

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

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> font-family
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> font-weight
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> font-size

{ 14 / 23 }
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

{ 15 / 23 }
I have already written a detailed thread on CSS positioning, If you& #39;re interested check it out

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

{">https://twitter.com/Prathkum/... 16 / 23 }
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& #39;t

{ 17 / 23 }
Layouts can save your time as well. Its an important concept to learn becuase it plays an important role in responsive web design(RWD)

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

{">https://twitter.com/Prathkum/... 18 / 23 }
Hmm awesome!! I think you& #39;re all set to learn about responsiveness here.

Don& #39;t skip it. There are millions of devices on which your website is viewed.

{ 19 / 23 }
Responsive web design is little tricky but not so tough to master. There are few quick points you need to remember while writing CSS code

I would suggest you to take care of responsiveness while writing CSS rather than handling responsiveness in the end.

{ 20 / 23 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1"> Use meta viewport element
https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> Don& #39;t use large fixed width
https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> Try to use Layouts
https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> Use box-sizing: border-box
https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> Media Queries are saviour
https://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6"> Use "auto" in media
https://abs.twimg.com/emoji/v2/... draggable="false" alt="7️⃣" title="Tastenkappe Ziffer 7" aria-label="Emoji: Tastenkappe Ziffer 7"> Use frameworks if possible

{ 21 / 23 }
In this thread I have compiled some general tips to make your website responsive

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

{">https://twitter.com/Prathkum/... 22 / 23 }
Great!! I think that& #39;s pretty much it in order to give you a quick overview. If you have any doubts, feel free to drop a comment below

If you like this thread, a retweet means a lot https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz">

{ 23 / 23 }
You can follow @Prathkum.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
There are a lot of misconceptions about the Turkish diaspora in Germany. Since i just finished writing an essay about this topic I thought it's time to give other people
Read more
Las mejores calculadoras online en 2020A thread http://totumat.com/2020/11/26/las-mejores-calculadoras-online-en-2020/ Cuando se estudian asignaturas que requieren de cálculos complicados, nada mejor que contar con una buena calculadora.
Read more
Mitigating #ClimateChange is as much about taking up new techs as about leaving others behindMost studies focus on #coal's global downfall but another #energy tech decline is loomingRead my new
Read more