Read on Twitter
A Complete Guide to Getting Started with CSS
Thread
Thread
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 }
{ 2 / 23 }
We can't imagine web development without CSS. See two attached images
1. With CSS
2. Without CSS
Now imagine all websites without styling....
{ 3 / 23 }
1. With CSS
2. Without CSS
Now imagine all websites without styling....
{ 3 / 23 }
I hope you got it why CSS is important for web development. Alright let's move onto asctually discussion that how you start learning it
{ 4 / 23 }
{ 4 / 23 }
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.
The colors are something from which users interact first whenever they visit your webpage
{ 5 / 23 }
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
{ 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
{ 6 / 23 }
Check this great tool for generating accessible colors
https://color.adobe.com/create/color-accessibility
{ 6 / 23 }
Don'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 }
{ 7 / 23 }
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
{ 8 / 23 }
- 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 }
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/
{ 10 / 23 }
Give this article a short read for Definitive guide of padding and margin
https://uxengineer.com/padding-vs-margin/
{ 10 / 23 }
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
{ 11 / 23 }
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's overall tone.
You can add free fonts from Google's official site
{ 12 / 23 }
You can add free fonts from Google'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
{ 13 / 23 }
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
{ 13 / 23 }
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
{ 14 / 23 }
You just need to look at few fonts properties. For ex,
font-family font-weight 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 }
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're interested check it out
https://twitter.com/Prathkum/status/1355830282247692288?s=20
{ 16 / 23 }
https://twitter.com/Prathkum/status/1355830282247692288?s=20
{ 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't
{ 17 / 23 }
Flex and Grid
Grid is little bit tough to master but flex isn'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
{ 18 / 23 }
https://twitter.com/Prathkum/status/1374652212928987137?s=20
{ 18 / 23 }
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.
{ 19 / 23 }
Don'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 }
I would suggest you to take care of responsiveness while writing CSS rather than handling responsiveness in the end.
{ 20 / 23 }
Use meta viewport element
Don't use large fixed width
Try to use Layouts
Use box-sizing: border-box
Media Queries are saviour
Use "auto" in media
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
{ 22 / 23 }
https://twitter.com/Prathkum/status/1362803479044104195?s=20
{ 22 / 23 }
Great!! I think that'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
{ 23 / 23 }
If you like this thread, a retweet means a lot
{ 23 / 23 }
