As is the case when you are building any website, your best bet is to start with your most basic building blocks: the content of your site! Let's take what we see in the mockup and map it out in some basic HTML. I'll be using the application called Sublime Text to do this, but you are free to use whichever text editor you like.
Firstly, you will need to create a new folder called index.html. Within this document, we are going to do the equivalent of what you just did in Photoshop with layers: you will map out the order of your content and think about which elements fit into which overall group.
If you have not already worked with HTML, feel free to grab the contents of this boilerplate document. When creating an HTML document, you will always need to start with these basics: a declaration that the document is an HTML, a head section, and a body section.
The beginning and end of each of these sections is marked by either an opening tag or a closing tag. This is a common behavior in HTML. Anytime you will be adding an element, you will specify its type in an opening tag, and you need to make sure to close the element with a matching closing tag once you've added its content (and before moving onto the next element).
Don't worry too much for now about the head section of the document, as we will look at the next chapter. Within the body section -- what a user actually will see of your page -- you should map out the folders that you saw in the Photoshop document. Think of an architect making a blueprint. They wouldn't start by drawing a specific door; they would start by mapping out the general frame of the house, and then would fill in specific elements.
In order to map out this organization as notes to yourself, instead of as actual code that people would see, you can use what are called comments. These can be annotations, explanations, random to-do notes to yourself, or anything else. But don't worry: users won't see them! Feel free to write as many notes to yourself as you feel would be helpful as you map out your HTML structure. To open and close comments in HTML we'll start with<!-- and finish them with-->.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Masthead-->
<!--Two Columns-->
<!--Left Column-->
<!--Right Column-->
<!--Grid Row-->
<!--Four Columns-->
<!-- Column 1 -->
<!-- Column 2 -->
<!-- Column 3 -->
<!-- Column 4 -->
<!--Full Width Image-->
<!--Green Row-->
<!--Buying Row-->
<!--Footer Row-->
</body>
</html>Here, you can see that I have mapped out each folder that appeared as a group of layers in the Photoshop file. Their names are written as HTML comments and will help me fill in the actual HTML in an organized way later.
As each of these folders constitutes a sort of "row" on the page (whether big or small), you can add a "div" tag for each of them that includes the class "row." A div in HTML means division, which is exactly what we are trying to do here. We are trying to divide our content into different groups, so why not use a div tag? :)
You can then assign each tag a class in order to eventually associate it with particular style rules inn CSS or particular interactions with elements via JavaScript. That way, you can target the exact elements that you're looking for.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Masthead-->
<div class="row">
</div>
<!--Two Columns-->
<div class="row">
<!--Left Column-->
<!--Right Column-->
</div>
<!--Grid Row-->
<div class="row">
</div>
<!--Four Columns-->
<div class="row">
<!-- Column 1 -->
<!-- Column 2 -->
<!-- Column 3 -->
<!-- Column 4 -->
</div>
<!--Full Width Image-->
<div class="row">
</div>
<!--Green Row-->
<div class="row">
</div>
<!--Buying Row-->
<div class="row">
</div>
<!--Footer Row-->
<div class="row">
</div>
</body>
</html>Now you have the basic structure of your page mapped out in different content chunks within your HTML document. You can already start to see the parallels between arranging content as layers in Photoshop and as different content groups within your HTML! You'll always start with the broad stuff first. Think about your content or mockup on a more global scale when you're starting to build out a mockup and integrate smaller elements, like individual images or text, later.
