OK, so you have a wireframe and you know all the code, but how do you start going from one to the other?
Start at the largest blocks and work out what tag would best represent them. Can you find a header, main or footer type of area?
Then just keep refining each block down into more specific tags.
You don’t need to make these images for your design, they are just to highlight the mental process you will take. For example above you have spotted a grid layout and can then make a div in HTML and set it as a 2 column, 2 row grid using CSS.
Remember block level elements take up the full width of their container.
You then continue breaking down each box of the website until you know what tags or styles you will need to make that design.
Now use those tags to make a template page. This is a page that doesn’t contain page specific content. So it will have the header and any footers along with the container areas where the main content will go. Save this as a template that can be used for each page.
A good place to start is just setting any min-heights and widths along with a background colour or border to get the elements looking roughly like your wireframe. The background colour or border makes it easier to see how the areas of the page will look.
For example the above page is made with the HTML and CSS below.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta author="John Doe">
<title>Replace with page title</title>
</head>
<body>
<header style="background-color:salmon">
<div id="logo" style="background-color:olive">Logo</div>
<div id="submenu" style="background-color:dodgerblue">
<ul>
<li><a href="/">Topic 1</a></li>
<li><a href="/">Topic 2</a></li>
<li><a href="/">Topic 3</a></li>
<li><a href="/">Topic 4</a></li>
</ul>
</div>
</header>
<main>
<nav style="background-color:tomato">
<a href="/">Menu 1</a>
<a href="/">Menu 2</a>
<a href="/">Menu 3</a>
<a href="/">Menu 4</a>
</nav>
<div id="maingrid">
<div style="background-color: teal; min-height: 12rem">
Picture
</div>
<div style="background-color: cyan">
Features
</div>
<div style="background-color: coral">
Text
</div>
<div style="background-color: beige">
External links
</div>
</div>
</main>
</body>
</html>body {
margin: 0px;
padding: 0px;
}
header {
min-height: 5rem;
display: flex;
justify-content: space-between;
}
#logo {
height: 2rem;
width: 150px;
margin-top: 1.5rem;
margin-left: 1rem;
}
#submenu {
margin-top: 1rem;
height: fit-content;
}
#submenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#submenu ul li {
display: inline-block;
padding-right: 1rem;
}
nav {
margin: 10px;
text-align: center;
padding: 1rem;
}
nav a {
padding: 1rem;
}
#maingrid {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 10px;
margin: 10px;
}
#maingrid > div {
min-height: 5rem;
}Once everything looks correct you can remove the background colours or borders. Add in any logos, menu and footer information that will stay the same across the pages and then save it as template.html. Any time you need a page to use this layout you can make a copy of template.html as a starting point.
Most websites will have a couple of different templates used throughout the site. Think of a news site. You have one template for the home page and maybe a listing page for each subject (Sport, Technology etc), and then a different page layout for the articles themselves. You can use your first template as a starting point for your additional templates because your header and footer should be consistent throughout the website. So just change the layout in the main section for the new template.
