2.Build your first web page — Content Layout
This is the second of building your first web page tutorial designed for kids and teenagers.
In case you missed the other entries, here is the list:
1. Build your first web page — Text and Image
3. Build your first web page — Link and Button
Easy-to-follow web layout
A good layout can help users to easily catch the main points of your web page, so users can get information quicker. By default, the browser will render from left to right and top to bottom as showing in our previous web page.
It is a common practice to put main content in the middle where our eyes are looking at and leave some margin between elements.
Use div container to organize content
Firstly, we put related content inside div container, which is the abbreviation of division, on a web page, it is more like a section.
Let’s take the school menu as an example. I can see there are three sections: a title section, a section for hot food and the last section is for cold food. So I am going to put them in different sections as the following.
Title section :
<div>
<h1>School Lunch Menu</h1>
</div>Cold food section:
<div>
<h2>Cold Food</h2>
<p>Cheese Sandwich</p>
<p>Chicken Sandwich</p>
</div>Hot food section:
<div>
<h2>Hot Food</h2>
<p>Baked Chicken Breast Bites</p>
<p>Pasta Bowl with Bolognese Sauce</p>
</div>Use text-center to put the content into the middle
Set class attribute of div container to text-center will tell the browser to put enclosed content into the middle of the screen.
<div class='text-center'>
<h1>School Lunch Menu</h1>
<div>Use row and col to create table-like structure
Then, I believe it would make more sense to put hot food and cold food divisions in one row.
<div class='row'> <div class='col'>
<h2>Cold Food</h2>
<p>Cheese Sandwich</p>
<p>Chicken Sandwich</p>
</div> <div='col'>
<h2>Hot Food</h2>
<p>Baked Chicken Breast Bites</p>
<p>Pasta Bowl with Bolognese Sauce</p>
</div></div>
As you can notice, we set class attribute of hot food and cold food divisions to be col which is the abbreviation of the word column, this will tell the browser that they are two columns. Then we two columns into one row by putting them into another container with the class value of ‘row’.
If you still have problems with understanding, thinking this way. First, we create a row section and create two column sections inside. Then we put hot food content in the first column division and the cold food into the second division.
Here is the full example, you might be interested there are a few lines inside the header section on the top web page. The purpose of them is to tell where browser loads text, image and section styles so as to render them as our expectations.
Now, we have a web page with the nice layout but seems it’s too close to the left side of the screen. Let’s put all content into another div container and set its class attribute to the container, this is what looks like.
Also, I want to add a new column for Drink division to the right side of Hot Food division, can you try here? The final web page should look like below:
