Tutorials

Master HTML and CSS in 5-20 hours

Learning HTML and CSS in 5-20 hours

(20 minute read; 5-30 hours to master all concepts through challenges)

There are so many resources out there where you can learn HTML and CSS but it could easily leave you overwhelmed with so much information.  The goal of this tutorial is so that you can understand which html tags and css properties to master first and to provide some structure where with 5-20 hours of practice, you can master the fundamentals.

Step 1. Create a simple html file (spend 20-30 minutes)

If you’re new, I would first recommend that you create a blank html file and play with all the super important html tags. Only study and get familiar with the html tags that are highlighted in gold/yellow. 99%+ of all websites in the world can be created using just what’s in gold/yellow.

It should only take you 20-30 minutes to get familiar with the html tags in the gold/yellow. W3school is an excellent resource to learn about these html tags.

Important HTML tags

Once you’re done, your html file may just look like this:

<!DOCTYPE html>
<html>
<head>
     <title>My First HTML page</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>My first paragraph.</p>
<p>My second paragraph.  <a href="">sample link</a></p>
<ul>
   <li>List 1</li>
   <li>List 2</li>
   <li>List 3</li>
</ul>

<h3>Sample Form</h3>
<form action="">
   <label>Email:</label> <input type='text' value='' placeholder='Enter your email' />
   <textarea>Textarea content here</textarea>
   <input type='submit' value='Send' />
</form>

</body>
</html>

Add a few images and play around with a few more html tags and then just move on to now mastering CSS.

Step 2. Study these css properties next (spend up to 2 hours learning these; skip if you already know)

Mastering css in the beginning could seem overwhelming. Focus on the css properties in the yellow/gold zone again. Once you master them, you’ll naturally know how to use the green ones. If you were to look at all major websites, 95%+ of their css are made up of items in the yellow/gold zone. W3School again is a great resource for learning some of these most important css syntaxes. Skip all those that are not in the yellow/gold bucket.

If you want to learn how to make a site responsive, then study the items in the third bucket, but generally you don’t want to study this until you’ve mastered the fundamentals (the yellow/gold items).

Step 3. Create an output that looks like this (spend less than 2 hours)

Then, create a website that looks like this where the width of the site is 980px and where it’s centered (meaning if you stretch the browser, the information still stays in the center).

Do this without changing the html but using exactly what’s laid out below:

<!DOCTYPE html>
<html>
<head>
	<title>Sample Challenge</title>
</head>
<body>
	<div class='container'>
		<div class="nav">
			<ul>
				<li>Item 1</li>
				<li>Item 1</li>
				<li>Item 1</li>
			</ul>
		</div>
		<div class="content">
			<h1>Heading</h1>
			<p>First Paragraph.</p>
			<p>Second Paragraph.</p>
		</div>
	</div>
	<div class='container footer'>
		Footer
	</div>
</body>
</html>

You can do this by adding the css directly in the head or by creating an external css file. Forcing you to create a css file with this exact html will help you build good discipline. Make sure you really understand how vertical-align works and how display: works (particularly the difference between a block and an inline-block). Google or use Stack Overflow to learn the difference between the two and how you can use css to turn what’s usually an inline-block element to a block element and vice versa. That will be important for all the css you’ll be doing.

Step 4: Create the following website (980px wide again – spend less than 2 hours)

Once you’ve mastered the concepts in step 2, then create the following website:

Again, do this WITHOUT changing any of the html below. This will force you to use good discipline to convert what’s traditionally a block into an in-line block and vice versa. Remember that css dictates where things should go and whether that particular element should appear as a block or inline block.

<!DOCTYPE html>
<html>
<head>
	<title>Sample Challenge 2</title>
</head>
<body>

	<div class='container'>
		<div class='menu'>
			<p>Hacker Hero</p>
			<ul>
				<li>Welcome</li>
				<li>About HH</li>
				<li>Contact Us</li>
				<li>Play</li>
			</ul>
		</div>
		<div class="nav">
			<ul>
				<li>Item 1</li>
				<li>Item 1</li>
				<li>Item 1</li>
			</ul>
		</div>
		<div class="content">
			<h1>Heading</h1>
			<p>First Paragraph.</p>
			<p>Second Paragraph.</p>
		</div>
	</div>
	<div class='container footer'>
		Footer
	</div>
</body>
</html>

Step 5: See how big websites look.. without the css file! Also a lesson from CSS Zen Garden (10 minute)

Now that you’ve mastered some of the basics, it’s important to remember that HTML should only contain information and NEVER where things should go. Therefore, labeling any html tag with any appearance information is wrong and a mistake made by html/css rookies. For example even labeling <div class=’top_nav’> is bad as it’s up to the CSS whether that should go to the top, left, bottom, etc. Always try to separate information that relate to how things appear in the css and never in the html.

Okay. So now that you know some of the most important html/css syntaxes, it’s a good practice to learn how big websites you know are created and how it looks without any css file! The easiest way to do this is to do this:

Step 6: Learn about lego concept and build a more complex website (spend up to 6 hours)

The “Lego concept”, a term I’ve created, is a way to visualize the different elements in your website as lego pieces. You want to put the big blocks down first and then place smaller blocks inside of them. By focusing on the big blocks first, you can think of the general layout of your website. After placing the big blocks, you determine which smaller boxes will exist inside of the bigger boxes and position them accordingly. It might seem faster to look at a screenshot and start coding HTML/CSS right away but drawing out the different lego pieces on the whiteboard first (bigger ones first, then smaller ones) will help you construct HTML/CSS more quickly. 

6.1 Applying Lego Concept to a Site (WalMart)

6.2 Next Challenge

Now that you’ve learned about lego concept and how to break down an image into proper html tags, now work on creating the following website:

Screenshot of a sample site for you to create

Step 7: Create an even more complex website that looks like this (spend up to 6 hours)

Remember that there are multiple ways to create this. Try to keep the code simple and easy to understand.

Step 8: Follow these best practices (10 minute read)

So far, you’ve created html and css on your own. It may not look pretty, but oh well, it’s best to learn how to make something and then optimize instead of worrying too much about whether you’re doing it right and slowing down your learning.

Here are three best practices regarding how to best structure your html and css

8.1 – Tip 1: Don’t wrap a box on top for another box!

Look at the following html code. What’s wrong with what you see?

 <div>
   <div class="element">
     Hello
   </div>
</div>

Whenever you only have one element inside a given element, 99% of the time, you don’t need that inner element. Doing above is for example packing a word “hello” inside a box called ‘div’ and then wrapping that box again with another box. If there is only one box inside that outer box, do you really need that inside box? This is a mistake observed in a lot of rookie front-end developers.

8.2 – Tip 2: Indent your html

Technically you don’t actually need to indent your html for the browser to render it properly. However, for your own readability as well as other people who may work on your code later, please indent your code properly.

For example, can you identify what is wrong with the code?

<div><span>Hello<img src='' /><h1>Hello</h1>
  <p>Test</p></span>

The code, once indented would look like this

<div>
  	<span>
		<img src='' />
		<h1>Hello</h1>
		<p>Test</p>
	</span>

Once you indented the code, you can immediately see that it’s missing a </div> tag! A simple mistake like this could easily consume hours of debugging time. Indent your code properly and you’ll more easily see what’s wrong. You will also note that the code made the mistake of only putting one element inside an element. Once that is also fixed, your html would now look as follows:

<div>
	<img src='' />
	<h1>Hello</h1>
	<p>Test</p>
</div>

8.3 – Tip 3: Even indent your css!

You could take a step further and even indent your css file

For example, consider the code below:

div.row{
	position: relative;}
div.row .white{
	background-color:white;}

div.row .red{ background-color:red;
}
div.row div{
width:15px; height:15px; display:inline-block;border:1px solid black;
line-height:0px;}
div.row h4{
	font-size:18px;
	background-color:yellow;}
div.row div p {
font-size:12px;
text-decoration: underline;}
h1 {
font-size:24px;}
p {
	font-size:14px;
color: grey;
}
div.row p{
	font-size:14px;
}
div.row p a{
display:block;
}

Imagine you were given a css code like this (but say 100 times longer) and your job was to make changes to the site. You would hate having to navigate through this css mess and find out exactly where you need to put your new css code. Instead, isn’t this much easier to see and navigate?

div.row{
	position: relative;
}
	div.row .white{
		background-color:white;
	}

	div.row .red{
		background-color:red;
	}
	div.row div{
		width:15px;
		height:15px;
		display:inline-block;
		border:1px solid black;
		line-height:0px;
	}
		div.row div p {
			font-size:12px;
			text-decoration: underline;
		}
	div.row p{
		font-size:14px;
	}
		div.row p a{
			display:block;
		}
	div.row h4{
		font-size:18px;
		background-color:yellow;
	}
	
h1 {
	font-size:24px;
}
p {
	font-size:14px;
	color: grey;
}

Note how not only we added proper indentation throughout all the css syntaxes but also used it to illustrate hierarchy. Isn’t the latter css so much easier to see and navigate?

Tip 8.4 – All style information should be in the CSS and never in the HTML

Remember that all things related to the appearance of the website should be in the css file and never in the html page. For example, look at these 4 examples below and find out how many are wrong.

<div class='top_banner'>...</div>
<div class='top left banner'></div>
<div class='small'></div>
<p class='strong'></p>
<p>Hello <b>world</b></p>
Hello class!<br>

The answer is that all of them are wrong! Anything that has to do with the appearance shouldn’t appear in the html even if it’s inside the class. Instead, a better way is to name these as something like this:

<div class='banner'>...</div>
<div class='banner2'></div>
<div class='emphasis'></div>
<p class='emphasis'></p>
<p>Hello <span class='emphasis'>world</span></p>
<p>Hello class!</p>

Tip 8.5 – Validate your html

Back in the day, a lot of people created websites using html and css. A lot of them didn’t have perfect html/css but the browser needed to figure out a way to still display the pages properly (as best as they could). Sometimes, the browser will “fix” your html mistake and who the website fine but if you were testing the site on another browser or for example the same browser but a different version, you may see that your website doesn’t look right any more. A lot of these issues come because you have error in your html code (for example maybe you forgot to close a tag or used a tag that was only supported by certain browser). A good way to catch this is by validating your HTML. For example use https://validator.w3.org/#validate_by_input to validate our html and make sure it’s all good. You’ll learn a lot through this process. This could save you hours/days of troubleshooting down the line.

W3C validator. Copy and paste your html directly here.

Tip 8.6 – Learn and study about CSS reset/normalization

The browser takes your html/css and renders them. Depending on which browser or which version of the browser you or your users are using, it may display your website differently. For example, maybe in Chrome, unless it’s specifically specified in the css file, h1 is displayed as 24px with margin of 14px while in Safari, h1 is displayed as 23px with margin of 15px. To avoid the different browser rendering your website differently or in some ways, making it look completely broken because of spacing conflicts, normalize your css file by telling all browsers to follow certain default behavior. Read more about CSS rest by going here: https://meyerweb.com/eric/tools/css/reset/.

This is a good interview question where you can quickly identify someone who really know css or someone who is a total beginner.

Tip 8.7 – Use Inspect Element

Using Inspect Element, you can debug issues in your html/css a lot faster. You can visually see how much space each element is taking and tweak its css properties directly in the browser. All good developers must know how to use Inspect Element very well.

Step 9: Re-create sites in step 5 or 6 until you can do each under 3 hours from scratch (spend up to 6 hours)

Practice makes you perfect. A good front-end developer, I would expect them to create a website like step 7 in 2 hours. As you re-do these exercises from scratch, make sure your codes are indented, class names are clear, you’re not using un-necessary html or css to over-complicate your page, etc.

Step 10: Spend 30 minutes learning about LESS and SASS

By now, you would have learned the css has its own limitations. For example, imagine that your website was using 5 colors consistently and you wanted to change what color is being used. Do you search and replace all previous colors? What if there was a way to create a variable and just change one line in your file to change all the color themes throughout all of your site? What if you wanted to “nest” some of the elements inside another css? These are just some of the things you can do with LESS or SASS. For SASS, you’ll have to know how to do server-side programming so you can pick that up after you’ve learned one of the back-end programming language.

Spend just 10 minutes reading about LESS particularly about variables and nesting and then move on to the next section.

Next Step? Learn Responsive Web Design!

With majority of web traffic now coming from mobile, it’s imperative that all front-end developers know how to create a responsive website. On the next part of the tutorial, we’ll share tips on how to create a responsive website. If you’ve mastered the concepts in this tutorial, you could learn responsive web design in just a few hours.

Start learning about responsive web design, part 2 of this tutorial.

Michael Choi
About author

Founder of Coding Dojo and Data Compass.

Leave a Reply

Your email address will not be published. Required fields are marked *