Main (List) Page Development
When a website has many pages, there is a page with a list of contents linking to each content page. The main page can be the same as the home page. For HTML and CSS practice purposes, we'll create different pages to explain different CSS techniques.
The image below is the target design of the main page example. In this example, we utilize components prepared in the previous chapter. The list layout is implemented using Flex Box.
In the practice section below, we'll explain how to implement the target design using the following steps.
- Add a background image
- Create a basic structure of the page with the following components
- Top bar
- Card (only one card component)
- Back button (to the home page)
- Footer
- Replicate the card component and complete the list design
Practice
Objective:
Create a list page with Flex Box
1. Create a new HTML file for the home page
- Create a copy of the index.html file and change the name to main-page.html.
- Change the
<title>section to HTML & CSS Introduction Practice. - Also, delete the existing content of the
<body>element that was created in the previous practice. - The code should look like the one below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Google Font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Custom CSS-->
<link rel="stylesheet" href="css/practice.css">
<link rel="stylesheet" href="css/component.css">
<title>HTML & CSS Introduction Practice</title>
</head>
<body>
</body>
</html>
2. Add a background image
To add a background image, we can use the technique explained in the previous chapter. For the main page, we use a green block wall image and add a translucent layer on top of it. You can choose a background image you like.
For this page, we use the <head> section of the HTML file to set CSS as the CSS code is only applicable to this page.
This is the code for implementing the background image with a translucent layer on top.
<style>
body{
background: url(img/green-blocks.png) repeat center top/cover;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bg-cover-layer{
background-color:rgba(255,255,255,0.7);
height: 100vh;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="bg-cover-layer">
</div>
</body>
At this point, this web page has a background only with no co
Subscribe now for
uninterrupted access.