How to learn HTML & CSS 🔮
By: Shwetha Sasindran
Tags: Tinkerhub, Community, HTML, Web Development, Learning

Learning path for HTML & CSS curated for beginners by Vighnesh from TinkerHub Community

Why learn HTML & CSS ❓

HTML & CSS is the backbone of layout & designing of web pages. Whatever you SEE in a web browser is basically HTML and CSS. Add some JavaScript with it and you’ll have a pretty decent web app.

Here we will be focusing on the fundamental concepts of HTML & CSS without any frameworks. You might / might not be interested in creating a webpage layout in HTML & CSS from scratch depending on who you are. But it’s always an advantage if you know some of the most important CSS concepts like Flexbox, Grid, Positioning etc., especially when you are pursuing Front End Web development.

Obviously, This path can’t be considered as the full fledged Front End Web Development path in anyway. Layouting is just one part of the equation and you should learn some JavaScript ( And preferabily a JS framework ). Now, before spending your time on javascript, You should be capable of understanding basic layouting techniques in HTML and CSS. We’ll leave the Front End Web Development path’s link at the end of this path 😉

Install and setup stuffs 🚧

For learning HTML & CSS you need to first set up the following things

Things you need and need not.

A 💻 with any OS ✅ A good light weight IDE: VSCode, Atom ✅ One of the most used web browsers: Firefox, Edge, Chrome ✅ Using super light Notepad Text Editor ❌ High designing skills ❌ Basic programming knowledge ❌

Baby steps 👶

What we are worried about here is to have a good understanding of HTML & CSS.

Here are some good resourses from where you can achieve the same

If you prefer something more interactive, Scrimba is a good platform

Flexbox 🌟

Flexbox is a CSS3 web layout model (don’t worry about it) that is extremely usefull in achieving a lot of common layouts easily. It does have a small learning curve to it. But trust me, you are going to thank yourself later in you career for not skipping this part when you started learning web development.

Now, here are some of the best resources to learn Flexbox.

This article from CSS tricks is by far the most intuitive article out there: A complete guide to Flexbox

If you prefer videos,

this is a quick one: CSS Flexbox in 100 Seconds.

A more detailed one by Traversy Media: Flexbox CSS in 20 mins.

Now, you might have a feeling that you’ve understood Flexbox very well by the time you go through the above resources. Try playing this game (without any trail and error) to make sure that you’ve understood the concept well. Flexbox Froggy

Grid 🌟

This is the most powerfull web layout system in CSS. After learning Flexbox, CSS Grid is the concept which you should understand

Resources

CSS Grid videos by Wes Bos

This is a good article by CSS tricks.

Now… just like in the case of Flexbox, you might have a feeling that you’ve understood CSS Grid very well by the time you go through the abouve resources. Try playing this game (without any trail and error) to make sure that you’ve understood the concept well. CSS Grid Garden

Positioning 🌟

Although you might not have to use CSS positioning in your day to day web projects, this is a concept that is often overlooked by a lot people who is staring out. It is a really simple concept to understand when compared to Flexbox and Grids.

Resources

Learn CSS Position In 9 Minutes

This is a good article from MDN.

At this point, you have completed the basic concepts of HTML & CSS. Congratulations on spending some of your days in learning the basics of HTML and CSS. I will leave you with this which talks about some guidelines and best practises to keep in mind when creating layouts with HTML and CSS and some more stuff that will be useful for you.

But as I mentioned in the beginning of this path, Layout is just a part of the equation. To be able to make a useful web app, you’ll need to know a lot of javascript as well. Feel free to take a look at [Front End Web Development] path now that you have a good understanding of HTML and CSS.

😍 All the best 😄