Pratham Profile picture
10 Jun, 23 tweets, 6 min read
Introduction to CSS 🎨

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

Let's break it down πŸ§΅πŸ‘‡πŸ»
CSS is a stylesheet language that serves one great purpose. It makes your website visually good

Consider this amazon website with and without CSS πŸ‘‡πŸ»
I hope you got it why CSS is important for web development. Alright let's move onto actually discussion that how you start learning it
First and foremost

The characteristic of a great website is its 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
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…
Don't think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..
The box model is one of the most important concepts of CSS. It's not so tough to learn. The box-model covers

- Height
- Width
- Padding
- Border
- Margin
Height and width properties are pretty intuitive. These are used to set fixed height and width to the element

I suggest giving a look at max, min-width, and max, min-height properties as well.
Proper and uniform separation of elements is something that can give your webpage an appealing look. Margin and padding can do this for you.

Give this article a short read for a Definitive guide of padding and margin…
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
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
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…
You just need to look at few font properties. For ex,

πŸ”Ή font-family
πŸ”Ή font-weight
πŸ”Ή font-size
Alright moving further, We have CSS positioning.

From here, a bit tricky CSS starts. Using CSS positioning you can change the position of your element. This might seems a bit tough but you can learn it in 2-3 days
I have already written a detailed thread on CSS positioning, If you're interested check it out.

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 a little bit tough to master but flex isn't
Layouts can save your time as well. It's an important concept to learn because it plays an important role in responsive web design(RWD)

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.
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.
1. Use meta viewport element
2. Don't use a large fixed width
3. Try to use Layouts
4. Use box-sizing: border-box
5. Media Queries are saviour
6. Use "auto" in media
7. Use frameworks if possible
In this thread, I have compiled some general tips to make your website responsive

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 πŸ’–

HTML and CSS are sometimes enough to start your journey as a developer and make some money. I did my first freelancing projects using HTML and CSS only

If you also want to start your career as a freelancer, check this bundle by @study_web_dev…

β€’ β€’ β€’

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

Keep Current with Pratham

Pratham 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!


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 @Prathkum

11 Jun
You can create your text portrait using CSS in 5 simple steps. Let's see how

πŸ§΅πŸ‘‡πŸ» Image
Step 1: Setting up the HTML

Create a document with a lot of lorem ipsum text so that your webpage is covered entirely by the text ImageImage
Step2: Set dark background-color

A dark background will make your portrait more appealing ImageImage
Read 8 tweets
11 Jun
5 beginner friendly websites to learn JavaScript

1. JavaScript Tutorial

- This JavaScript Tutorial helps you learn JavaScript programming language from scratch quickly and effectively.

πŸ”— Image
2. Learn JavaScript

- Interactive JavaScript tutorial.

πŸ”— Image
Read 6 tweets
9 Jun
6 GitHub repositories that can help you in writing better CSS code

🧡 πŸ‘‡πŸ»
1. Awesome CSS Learning

- A tiny list limited to the best CSS Learning Resources

2. Spin Kit

- A collection of loading indicators animated with CSS

Read 7 tweets
8 Jun
10 great handmade CSS and JavaScript cheat sheets you won't find anywhere

1. CSS Box Model πŸ“¦
2. Types of Border Style πŸ”²
Read 12 tweets
7 Jun
CSS Animation and CSS Transition are two different modules of CSS but many of us get confused that when to use which one?

Let's try to explore more about them 🧡 πŸ‘‡πŸ»
Though there are some similarities in animation and transition but first let's try to find out the real difference
Transition is something that needs to be triggered. For example, changing the height when the user hover the element

On the other side, animations do not need to be triggered.
Read 10 tweets
7 Jun
5 great favicon websites for every web developer and designers πŸ”―

1. Favicon

The only favicon generator you need for your next project. Quickly generate your favicon from text, image, or choose from hundreds of emojis.

2. Favicon .cs

favicon .cc is a tool to create or download favicon.ico icons, that get displayed in the address bar of every browser.

Read 6 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!