How to build a fancy web page with cool layout with HTML and CSS
Table of contents
Hello again, I hope by now you are familiar with how HTML and CSS work. And in this post, we are going to go deeper into CSS - layout.
Why
Layouts make a big difference in the design, some layouts make a page looks better and easier to read, while the rest make it look boring. Look at this news website, every news takes up a small block on the page, so the photo is right next to the text and it's easy to see what it is about, and each line is not too long and easy for eyes to follow.
Imagine each piece of news takes up the whole width and they just go from top to bottom like this, boring.
This is why we should make fun layouts of our pages.
How
Now how? Let's take this example from the last post, and we will make the three colourful blocks sit next to each other.
Flexbox
There is this concept called flexbox in CSS that allows us to arrange the layout. So we need to have a container element (the parent) and we give it display: flex;
so the browser knows that we want to use flex layout on all the items inside the container (the children).
Let's try. Firstly, we add a <div>
element around the three sections and give it a class sections
.
Now in the CSS file, add display: flex;
to the class sections
like this.
Let's check what happens to the page now.
Amazing. The three sections are now sitting next to each other. But why???
Because if you set a container to flex
, the default direction is row
, so for every child element you add, it will go to the right side of the previous one instead of the bottom.
And there are four directions for flex layout:
flex-direction: row;
- next child element goes to the rightflex-direction: row-reverse;
- ... to the leftflex-direction: column;
- ... to the bottomflex-direction: column-reverse;
- ... to the top
Let's try it out.
If we add flex-direction: row;
in the styles for sections
, nothing is going to change because it is the default and the items are laid out from left to right.
Now try flex-direction: row-reverse;
. Now the sections are laid out from right to left.
What about flex-direction: column;
? Now it looks like the example we had before without flex. Because the sections are laid out from top to bottom.
And flex-direction: column-reverse;
is going to make the sections go from bottom to top.
That's the basic idea about flexbox, but it can do a lot more than this, check out this tutorial to learn more about flexbox.
Okay now let's change flex-direction
back to row
because that's what we want.
But it doesn't look good yet. How can we add some gap in between the sections?
Like this, gap: 24px;
.
And now we can see the gaps on the page.
Why is the middle section bigger? Can we make them the same width? Yes.
Now we have to go change the styles for each section (the children elements) instead of the parent sections
.
We add width: 33.3%
, which means making the section 33.3% of the width of the parent container. 33.3% because we have three elements that makes up 100% of the width in total, if we divide them equally, each will get 33.3% of the width.
Now it looks pretty good. You can check the completed code here.
Another example
What else can we do? Let's make a page that looks like this magazine cover with flexbox.
So I have this photo of my housemate's two cats, Katara and Gingi and I will make a magazine cover of them. You can right-click and download the picture or use your own one.
Now let's create the basic structure of the webpage, create a folder and add an index.html
and index.css
in it, and we will drag and drop the picture in it too like this. And in index.html
, we will create a basic scaffold of an HTML file.
So now we will get a blank page. First of all, let's add the image to the page.
So we add an <img />
element and give it an src
attribute (src is short for source, so the attribute specifies where the image should come from), the value should be the name of the picture, ./
means the current folder. So ./katara_and_gingi.png
means in the current folder, find the image called katara_and_gingi.png
.
Also, let's give it a class cover_figure
so we can style it.
Now in the CSS file, let's give the whole page a grey background (line 2) and make the picture 70% of the body width (line 6).
We should see this now.
Pretty cool. But we are going to move the cats to the middle and add a big title on top like the magazine and put some texts on the left and right hand side of the page.
Now the title, let's add a div
with the title "Katara & Gingi" in it. And give it a class title
.
And in CSS, let's make it big and bold and red.
It should look like this now.
Okay now, the texts on the sides. How are we going to make the texts appear on the two sides of the cats? Flex!
The idea is this. We have a flex container and put the texts and cat in it and make them sit next to each other.
Now let's translate it into HTML code.
So let's wrap a container div (line 9 and 23) around the image, and inside the container, then we can have a div before (line 10 - 16) and after the image (line 18 - 22).
Now on the page we will see the text appear above and under the image.
So in our CSS file, we are going to give the container display: flex;
. At the same time let's style the text to make it look nicer. So add the styles like below.
You should see this.
Better but not exactly nice. We want the texts to go to the bottom. To do that, we can use align-items: flex-end;
in the container, meaning all the items inside the flex container should align to the end of the container which is the bottom.
So now we have the texts aligned to the bottom.
Let's also fix up the details, the text on the right should align to the right. So we give text-align: right;
to the text_right
class.
And now we have this.
Then we want the big title to go behind the cats like the magazine cover so it gives you a feeling of layers and makes it look fancier.
In styles for title
we add position: absolute;
which takes out the title element from the body so it doesn't take up space anymore. For more explanation for position
property, please check this tutorial. And then add z-index: -1;
, which put the element behind other things. So things that appear later in the HTML code will be on top of the earlier one, but you can overwrite it with z-index, everything has a default z-index of 0, if you specify an element's z-index to be 1, it will appear on top of all other elements, we are saying here the title should have the z-index of -1, so it will go behind all the other elements.
Now check your page. The title goes behind the image now.
But we want to move the title to the middle.
Here we go.
But now we can't see the title, we want to move the cats down a little bit. We can do this by adding some spacing to the container element.
pretty good now.
Now let's do some final cleanups.
line 3 - 4: give it some spacing between the edge and text.
line 16: make the cats slightly smaller so the page doesn't go longer than the window.
line 24: make the text slightly bigger.
line 26: give it more spacing in between the text.
Finally we have this.
Check out the completed code here.
And now go on make it for your cats and dogs, for your family and friends!