Author: Jakub - HTML/CSS Curriculum Manager 02.09.2021

Web design - where to start

There’s this standard question that comes up every step of the way: I want to start creating websites but I don’t know how. I don’t know what I need to know and what I need to learn. I hope this article will brighten up the topic a bit and show you the right direction.

Two key layers

At its core, every website consists of two key layers: structure and appearance. HTML is responsible for the first layer and CSS for the second.

HTML is responsible for the content of the page
CSS defines how the content will look

Now you have the first problem - you know that you need to learn two languages: HTML and CSS. Fortunately, it’s not that diffucult - the basics can be mastered literally in a few days.

HTML as its core

HTML works on a simple principle. It uses what are called tags to build the content of a page. Look at an example:

    
<h1>Header</h1>

This above code will be interpreted as a header by the browser. It will look more or less like this:

As you can see there is nothing complicated here. It’s just a matter of mastering the basic tags and then using them to build the right elements on the page.

What you need to know about HTML

To start with, mastering the most important, commonly used tags is enough.

Text tags: headings, paragraphs, lists
Tags for images and links
Semantic tags describing structure like article, header and section
Tags: div and span.
Array and form tags

These basic tags can be learned in a short time and you can use it to build almost everything. HTML is cool because even basic knowledge will let you create your own pages - at least when it comes to their content and structure. And this basic knowledge you can enrich constantly.

CSS at its core

Of course, content alone is not enough. You certainly want your pages to simply look nice. And that’s why you need another language that is CSS. This language works on simple principles. We have so-called rules, which define the appearance of the page elements:

    
h1 {
    font-size: 34px;
    color: blue;
}

This rule ensures that the header created with the h1 tag will have a text size of 34 pixels and a color of blue. This is how it might look in a browser:

Header

And that’s how this game works. HTML will allow you to create an element and CSS will allow you to define how that element will look.

What you need to know about CSS

There are a few key areas in CSS that you need to know well to begin with.

Using the most important selectors: element, class
Formatting text elements (size, color, line height, etc)
The box model: specifying sizes, spacing
Positioning of elements
Some sort of system for arranging content e.g. flexbox.
Styles for links, arrays, forms

This set of skills will allow you to start working freely and without any problems. It can be mastered in a short time and then developed endlessly with more advanced techniques such as creating responsive websites, animations etc.

What’s next

The skill set I suggested is crucial if you want to start working on your own sites. Of course, just mastering HTML and CSS is not enough. It’s best to start working on your own sites as soon as possible. They don’t have to be complicated. Just think of a project and try to make it happen using your newly acquired skills. It can be your personal website, a business card of a real or fictional company, a website presenting a product - literally anything. The most important thing is to try to use what you know in practice because only then you can talk about gaining real, useful skills. Good luck!

Jakub - HTML/CSS Curriculum Manager