HTML and CSS Basics, part 11: Building the first layout
Let's combine what we've learned so far and build an actual layout
By: Ajdin Imsirovic 19 September 2019
This series of posts is titled HTML and CSS Basics. If youâre just starting out with web development, it is crucial to read and understand this series of posts.
This is the eleventh post in this series of articles.
After covering many basic topics of CSS, now we can finally build an HTML5 and CSS3 layout, confident in the fact that weâll be knowledgable enough to do so without any major hiccups.
Like before, weâll rely on Codepen for our layout development.
Weâll build the layout in several steps:
- The mockup
- The HTML
- The CSS
First weâll prepare a rough draft of what our website will look like. Then weâll convert the actual structure into HTML, and finally weâll turn it into a nice-looking website layout with the help of CSS.
The mockup
For a simple mockup you can simply sketch it out on a piece of paper, or use any software that has the ability to draw squares.
Itâs as simple as that!
Hereâs a mockup I drew in MS Paint, in about 5 minutes.
There are two important things to remember:
- if itâs a simple layout, it shouldnât take more than 5 minutes to draw
- itâs not a work of art, just something to have as a guide
Assuming youâre just starting out with web development, you should spend as little time on mockups as humanely possible. But you should still do it, just to have an idea of what youâll be building.
Our layoutâs HTML code
Hereâs the mockup translated into HTML code:
1
2
3
4
<header>This is the header.</header>
<aside>This is the sidebar</aside>
<main>This is the main content area.</main>
<footer>This is the footer</footer>
Pretty easy, right?
One of the reasons why this is so easy is because the Codepen web app actually hides some complexity from us.
The hidden complexity includes some additional, required HTML code.
Basically, this:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<!-- meta tags go here -->
</head>
<body>
<header>This is the header.</header>
<aside>This is the sidebar</aside>
<main>This is the main content area.</main>
<footer>This is the footer</footer>
</body>
</html>
As we can see above, there is a âwrapping structureâ of sorts, around our actual Codepen example code.
This wrapping structure is necessary for a well-structured HTML page. But Codepen is helpful in hiding this complexity.
If you still want to see what the full page looks like, you can download it right from Codepen, and then open the local page in a code editor such as VS Code.
The download button in the Codepen layout can be found in the bottom-right corner of any Codepen example.
Itâs the button titled âexportâ. Click on it, then click the âexport zipâ option:
Note also that weâre using semantic, HTML5 tags: <header>
, <aside>
, <main>
, and <footer>
.
Why are they called semantic?
Semantic, in a loose translation, means âmeaningfulâ. In other words, the very type of the element weâre using, hints at its meaning.
This is much better than writing an HTML structure like this:
<div>This is the header.</div>
<div>This is the sidebar</div>
<div>This is the main content area.</div>
<div>This is the footer</div>
Although the above code is valid, itâs still much better to use semantic HTML 5 tags, like we did.
Our web page at this point doesnât look like much. Letâs make it look the way it should with some CSS code.
Our layoutâs CSS code
At this stage of our simple layout development, it would be beneficial to look at the completed example on Codepen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
body {
margin: 0;
}
header {
height: 70px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: yellowgreen;
border: 1px solid gray;
}
aside {
margin-top: 10px;
position: absolute;
top: 70px;
width: 300px;
height: calc(100% - 160px);
background: yellow;
border: 1px solid gray;
}
main {
margin-top: 10px;
position: absolute;
right: 0;
top: 70px;
width: calc(100% - 310px);
height: calc(100% - 160px);
background: yellow;
border: 1px solid gray;
}
footer {
margin-top: 10px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 70px;
background: blue;
border: 1px solid gray;
}
This is the output of the above code in the browser:
You can easily see the full page view of the above Codepen here.
Note that the above layout does not show the best practice in building website layouts!
It is just a simple example to see how we can start combining what weâve learned to start building rudimentary layouts.
Weâve got quite a long way to go before we can build a nice-looking, standard-compliants layout in HTML and CSS.
Before we can do that however, we need to explain the new CSS property: value
pairs we used in the above example.
Using the calc()
function in CSS
The CSS calc()
function is most commonly used to calculate 100% of width and/or height, minus some specific width/height.
Thatâs exactly how weâre using it in the above exampleâs CSS code, on line 18:
height: calc(100% - 160px);
Weâre setting the height of our <aside>
and <main>
elements to cover the entire height of the screen, minus the height of the <header>
, the <footer>
, and their vertical margins.
Weâre having a similar scenario on lines 26 and 27:
width: calc(100% - 310px);
height: calc(100% - 160px);
This time weâre calculating both the width and the height of the <main>
area.
Weâre not going to be improving our layout with any additional CSS styling in this post.
However, we do have another important thing to look at, closely related to the previous post in this series, namely, the most commonly used CSS selectors.
Thereâs one kind of a very commonly used CSS selector that we didnât cover, because itâs not really a selector: the humble comma : ,
.
Weâre using the ,
when we want to group shared property: value
pairs across multiple unrelated selectors.
In other words, when a CSS property: value
pair is applied to more than one CSS selector, each selector that the property: value
applies to is separated by commas.
For example, letâs say we have two CSS classes, .a
, and .b
:
.a {
font-family: Arial, sans-serif;
border: 1px solid red;
}
.b {
font-family: Arial, sans-serif;
border: 1px solid green;
}
Thereâs a popular general rule in coding, called DRY.
Itâs an acronym that stands for: âDonât repeat yourself.â.
Itâs an easy way to remind developers that repetition in code is bad.
You might here a co-worker sometimes proclaim: âYour code is not DRY enoughâ.
This means you need to refactor your code, i.e re-write it while keeping the exact same functionality.
In CSS, we have the ,
character to easily keep our code dry. Hereâs the above example, refactored using the ,
:
.a, .b {
font-family: Arial, sans-serif;
}
.a {
border: 1px solid red;
}
.b {
border: 1px solid green;
}
Note that the space character above, after the .a,
IS NOT the descendant selector!
Letâs now build on the Codepen example, and group the CSS selectors where needed.
Grouping CSS selectors to optimize our CSS code
Hereâs the updated code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
body {
margin: 0;
}
header {
height: 70px;
top: 0;
left: 0;
right: 0;
background: yellowgreen;
border: 1px solid gray;
}
aside {
margin-top: 10px;
top: 70px;
width: 300px;
height: calc(100% - 160px);
background: yellow;
border: 1px solid gray;
}
main {
margin-top: 10px;
right: 0;
top: 70px;
width: calc(100% - 310px);
height: calc(100% - 160px);
background: yellow;
border: 1px solid gray;
}
footer {
margin-top: 10px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 70px;
background: blue;
border: 1px solid gray;
}
header, aside, main, footer {
position: absolute;
}
Weâve taken out the position: absolute
and listed out all the selectors using it, like this:
header, aside, main, footer {
position: absolute;
}
Weâve removed the position: absolute
from each individual CSS element selector.
Next, letâs further improve it by extracting all the shared CSS property-value pairs:
body {
margin: 0;
}
header {
top: 0;
background: yellowgreen;
}
aside {
width: 300px;
background: yellow;
}
main {
right: 0;
width: calc(100% - 310px);
background: yellow;
}
footer {
margin-top: 10px;
bottom: 0;
width: 100%;
background: blue;
}
header, aside, main, footer {
position: absolute;
border: 1px solid gray;
}
header, footer {
left: 0;
right: 0;
height: 70px;
}
aside, main {
top: 70px;
margin-top: 10px;
height: calc(100% - 160px);
}
Separating selectors that share the same functionality is a common practice in CSS, and youâll see it in many, many projects, because itâs a way to make the CSS code leaner, and ultimately makes the CSS files smaller in size - which makes them faster to download from a server to a browser. Thatâs why this practice is so popular.
Conclusion
In this article, weâve covered a lot:
- How and why to use mockups,
- HTML 5 semantic tags,
- Weâve used our current knowledge of CSS to build a simple layout,
- We saw how to use the
calc()
function in CSS - We also saw why and how to keep our CSS dry using the comma separator
In the next article weâll fill in a big missing piece of the CSS puzzle weâve buit in this series: responsive web layouts with media queries.
This will help us bring our first layout closer to the modern standards and the way that website layouts are built in the real world.