So you know HTML, what next? Pt. 1

This is THE question: once I know a bit of HTML and CSS, what do I do next? This is a tutorial for those who know a little bit of HTML & CSS, but not sure where to begin, or rather — where to continue.

Something google suggests when you type “tutorial for those who know a bit of HTML and CSS”

How do I know how much I know? Well, you can consider yourself a beginner in case if you:

  • at this point you probably are familiar with what is HTML & CSS;
  • and you know the differences between them;
  • you know what is <div> and how you can apply CSS styling to it;
  • you can create the simplest HTML page put there tags like <p></p>, <h1></h1>, <img …/>, <div></div> etc.
  • you know what is tag, attribute, attribute value.

If not, totally recommend to check:

If yes, first of all, YES, YOU CAN MAKE SIMPLE WEBSITES NOW!

I know, it seems impossible for you at this point, but this is true! The best way to continue is to make your own websites and practice, practice, practice.

And this is something you can (and should) start to master while creating your first websites:

Disclaimer: After I have written it I realised the article is incredibly long, so here is the table of contents:

So you know HTML, what next? Pt. 1

  1. Learn what DOM HTML is.
  2. Learn box model properly.
  3. Setting <div> properties.
  4. Metric system.
  5. Mastering <ul>, <table> tags.
  6. Speaking of references.

So you know HTML, what next? Pt. 2

  1. Menus
  2. How to create block-style website.
  3. Card layout.
  4. Responsive layout.

Learn what DOM HTML is

As explained in better words here, DOM HTML basically represents the tree structure in HTML tags — <html> tag has <body> tag inside, that might have <div> tag inside, that might have <p> tag inside. This is the tree structure. The tags that have tags inside are called “parent tags”, those tags that are inside are called “children tags”, if the tags are on the same level, they are called “siblings”.

Representation of DOM from w3schools.com

Let´s look at the example:

Here Document is your HTML Document that has <html> tag. The tag is the “parent” here for <body> and <head>, and the <head> and the <body> are the “children”.

Representation of parent-child DOM structure from w3schools.com

For <body>, elements like <a> and <h1> are “children”, and to themselves they are “siblings”.

This is that simple. The code that you see represented on the picture could looks like this:

<html>
<head>
<title> My title </title>
</head>
<body>
<h1> My header</h1>
<a href=”w3schools.com”>My link </a>
</body>
</html>

This might not be obvious (or too obvious) for you right now, but after i while you will get why this is important.

Learn box model properly

There are inline elements and block elements in HTML (more detailed explained here: http://www.w3schools.com/html/html_blocks.asp).

Essentially, every HTML element you know represents a small “box” that can either come as “block” — meaning would take the whole with of the element they are placed inside & they are placed on the new line. Good examples of block elements are <h1>, <p>, <div>.

Inline elements, unlike “blocks”, take as much place as they are supposed to. They appear on the same line as long as there is enough space on the screen. typical examples are <a>, <img>, <span>.

This can be easily demonstrated with our last example: http://codepen.io/riittagirl/pen/kXpWGG

By adding red border to every element allows us to see how elements behave.

Margin, border, padding, content.

Now that we know that elements essentially represent boxes, we can go deeper into how those “boxes” work.

Every tag ( with an exception for self-closing tags) has some kind of content. Like <p>:

<p> Some text goes here. The breaks will be ignored. The spaces will not. </p>

The content of <p> in this case is plain text. Lets go ahead and style it a bit.

In index.html

<html>
<head>
<title> My title </title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente tempora laudantium, repellendus, alias incidunt cumque eum odit natus autem aliquam, impedit dolorem tenetur vitae maxime ea, aspernatur nulla ipsam tempore.
</p>
</body>
</html>

In style.css

p{
border: 2px solid red;
}

We see now it has a red border. The border is technically always there, we just need css to display it.

Paragraph with red border

If we want to create some more space between the border and the content, we can use css property called “padding”. Padding is the distance between the content and the border of any element.

Let´s add a line to style.css

p{
border: 2px solid red;
padding: 20px;
}

And the outcome:

Now we have some padding

Now lets add more space between the top of the page and the paragraph.

This time we will use css “margin” property:

p{
border: 2px solid red;
padding: 20px;
margin: 80px;
}
Spot the difference?

You can play with the code here. Or read more explanation here.

Setting <div> properties

Play with different properties that you can apply for div, like background-size, background-position, box-sizing, margin, padding.

Metric system

There is many ways to specify width, height, font-size and many other CSS properties, other them px (pixels), like percentages (%), em (relative to browsers default font-size), vh (viewport height), vw (viewport width).

So go ahead and experiment with those, see how they behave on screen resize.

Start mastering <ul>, <table> tags

<table> tags are meant to make tables (surprise, surprise!).

Although this is not the most common thing to use on websites now, it is widely used to different sorts on systems like company CRM´s.

See references here.

<ul> tags are slightly more complicated. “Ul” here stands for “unordered list”. And, as you might expect, you can create lists with that.

See references for that here.

Speaking of references

You are encouraged to be curious. For that you can check different kinds of sources for HTML & CSS:

For references:

More CSS tricks:

Even more:

Some online books:

For those who wanna start JavaScript:

If you liked this, click the💚 below so other people will see this here on Medium. Also, Subscribe and enjoy more tutorials from me!

Like what you read? Give Margarita Obraztsova a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.