Wireframes
When working on commercial projects, it is common for web page designs to be provided to web developers in the form of a wireframe. A wireframe is a low-fidelity design that provides enough information about a page for the developer to start coding. Usually, they will not include much visual design information and are focused on the main structure of a page. The following figure is an example of a wireframe for a new home page:
Figure 2.12: Example of a wireframe
Activity 2.01: Video Store Home Page
Suppose you are a frontend developer working for a tech start-up. You have been asked to build a home page for the online video store. You have been given the following wireframe from the UX designer:
Figure 2.13: Wireframe as per the UX designer's expectation
Using your newly acquired HTML5 knowledge, you can start to convert the wireframe into working HTML code. At this stage, you should just be concerned with writing the structural HTML tags and shouldn't worry about content right now.
The aim will be to achieve a web page similar the following output screenshot:
Figure 2.14: Expected output of video store home page
The steps are as follows:
- Create a file named home.html in VSCode.
- Use the following code as a page skeleton. Again, do not worry about not understanding the styling part of the code:
<!DOCTYPE html>
<html>
<head>
<title>Video store home page</title>
<style>
header,
nav,
section,
footer {
background: #659494;
border-radius: 5px;
color: white;
font-family: arial, san-serif;
font-size: 30px;
text-align: center;
padding: 30px;
margin-bottom: 20px;
}
header:before,
nav:before,
section:before,
footer:before {
content: '<';
}
header:after,
nav:after,
section:after,
footer:after {
content: '>';
}
</style>
</head>
<body>
<!-- your code will go here -->
</body>
</html>
- Start adding the HTML5 structural elements inside the body tag one by one, the same as we did in Exercise 2.01, Marking up the Page.
- As with Exercise 2.01, Marking up the Page, we will just add the tag name for content such as header and footer.
If you now right-click on the filename in VSCode on the left-hand side of the screen and select open in default browser, you will see the web page in your browser.
Hopefully, you are now getting a feel for the process of putting basic web pages together. We will build on this knowledge in the coming exercises.
Note
The solution to this activity can be found on page 580.
We are now ready to start making our web pages more realistic by learning some CSS page layout techniques.