Making a Website Template

By Susan Metoxen | June 14, 2025

Every professional web developer starts a new project the same way: by copying something that already works.

Rather than retyping the same <!DOCTYPE html>, stylesheet link, navigation, and footer from memory every time, developers keep a clean starter file — a template — that has all the reusable pieces in place. New project? Copy the template, rename it, and start building the part that’s actually new.

In my courses, students build their own template from scratch over the first several weeks. I could hand them a finished one — it would be cleaner and faster — but then it wouldn’t be theirs. Building it piece by piece means you understand every line in it. And when something breaks later, you know where to look.

By the time the template is finished it will have a complete HTML framework, an external stylesheet with Google Fonts, a styled navigation bar with pseudo classes, and responsive media queries. Every time you start a new website after that, you copy it and you’re already halfway done.

If you skipped the template work and copied a practice project instead, you have probably already discovered the problem: a lot of code to clean up before you can build something new. This article has everything you need to catch up or start fresh.

The website template looks something like this when it is completed:

A website template, showing the header, nav, main section and footer.

Every time you start a new website, you simply copy your template to get started on your new website.

I will break up the template into 5 parts, starting with Part A and ending with Part E. These 5 parts correspond to 5 different modules in my training program. Here are the 5 parts:

  • Part A: HTML Basics. The structure of every HTML page — DOCTYPE, head, body, and semantic elements. Covered in lessons 2.1, 2.2, and 2.7.
  • Part B: CSS Basics. Attaching an external stylesheet and adding Google Fonts. Covered in lessons 3.04 and 3.07.
  • Part C: Navigation. Converting navigation to an unordered list, styling the nav bar, and adding pseudo classes. Covered in lessons 6.3, 6.4, and 6.5.
  • Part D: Responsive Websites and Advanced Links. The viewport meta tag, media queries, and advanced footer links. Covered in lessons 6.1, 8.2, and 8.3.
  • Part E: Final Clean Up. Adding Font Awesome and Bootstrap CDN links so they are available on every page. Covered in lessons 10.2 and 10.3.

What are these modules, anyway? In teaching my course, I have broken up the curriculum into 14 modules. You. can access them all on this website. The template described in this article is the code I require my students at Saint Paul College to use in their templates. In that course we learn HTML/CSS basics, and then we also learn how to use Font Awesome and Bootstrap. In my curriculum, students add to their templates in Module 2, Module 3, Module 5, and Module 6.

Part A. HTML Basics (Module 2)

In Module 2, we cover the <!DOCTYPE html>, the <html>, <head> and <body> tags, the charset, and the semantic elements, <header>, <nav>, <main> and <footer>. We also add some <a> tags (links) to the navigation and add the HTML entity for a © to the footer.

Step 1. Add HTML Structure (Lesson 2.2)

Create the index.html file for your template, and add the structural elements:

  1. Create a folder named “template”. Place it in the folder where you keep your other websites. (In my courses, students are required to keep their websites organized in a “websites” folder, with each website we make in class inside of the websites folder. The templates folder is one of the websites in the websites folder. )
  2. Create a file named “index.html” in your template folder. On Windows, save it as a Hypertext Markup Language or HTML file.
  3. Add <!DOCTYPE html> at the top of the file.
  4. Add the <html lang=”en”> </html> tags. Note that the closing tag goes at the end of the page. 
  5. Add the <head></head> tags
  6. Add the <body></body>tags
  7. Add  title and meta-charset to the <head> with <meta charset=”utf-8″> and <title>Website Template</title>

Your template will look like this after this work:

Step 2. Add Structural Elements (Lesson 2.2)

Now we need to add the structural tags to the template. For my course, I require students to use these 4 structural tags, although there are more.

  • <header> with <h1>Website Template</h1> in it
  • <nav> (We’ll fill this in later)
  • <main> with <p>Main Section</p> in it
  • <footer> (We’ll fill this in later)

Check your work against the screenshot below to make sure you have placed them in the right place.

Note that if you check this in the browser right now, the only text you will see is from the <h1> and <p> tag we added.

Step 3. HTML Entities (The Copyright Tag) (Lesson 2.7)

In Module 2 we learn about HTML Entities, and we are going to add one that is on almost every website footer, the copyright symbol. We’ll add some copyright language as well, because all websites need a copyright, right? The HTML entity to make a copyright symbol is &copy;

Type in your code so it looks like the example below:

Step 4. Website Links: Relative, Absolute, and Mailto (Lesson 2.8)

Every website needs links, right? We will add three commonly used types of links that you will be able to copy when you add more links to your website.

First, add relative links to the navigation. For the template, I have chosen the three most common page links you will find on web pages: Home, About, and Contact. The code for a link looks like this:

<a href=”index.html”>Home</a>

Copy the code above and paste it in between your <nav> opening and closing tags to make your first navigation link. Add two more links for About and Contact. The file name for the About page is about.html and the file name for the Contact page is contact.html.

When you check the links in a browser, you will notice that they are too close together. Since in Module 2 students don’t know about margin or padding yet, we can add more spacing with another HTML entity, the non-breaking space, or &nbsp;

Check your work agains the screenshot above and make any corrections.

Now we will add an absolute link to the footer. For an absolute link you need to use the full URL, including https://.

Here is the code for an absolute link:

<a href=”https://saintpaul.edu”>Saint Paul College</a>

Add this code to your <footer>, and place a <br> tag after it to force a line break after it. At the end of this step your code will look like this:

Last but not least we will add a mailto link to the footer. Copy this text into the footer and add a <br> tag to it. Change the email address to your own email, and the Email Me text to your name.

<a href=”mailto:me@mycoolwebsite.com”>Email Me</a>

That is it for Module 2! Now check your work against the full template:

On the left side you see all of the code we added, and on the right side you see how it looks in a browser. It doesn’t look like much in the browser, but we will continue to add to it.

Part B. CSS Basics (Module 3)

In Module 3, we make two sets of changes to the website template. First, we set up a separate CSS file and reference it in the HTML file. Then later in the module we learn how to install Google Fonts. I have students add a Google Font to their template, primarily so that they remember how to do it.

Adding and Referencing a Separate Stylesheet (Lesson 3.04)

It is considered a best practice to put CSS styles into an external stylesheet. There are two steps to adding an external stylesheet. First, you need to create the external stylesheet in the same folder as the index.html file, and then you need to reference it in the HTML file.

Step 1. Go to your templates folder

Step 2. In the text editor, create a new file. Use Save As to name the file,  “style.css”. Make sure you save it in the template folder. 

Step 3. Open your template/index.html file

Step 4. Copy this code to the head:

<link rel=”stylesheet” href=”style.css”>

Adding Google Fonts (Lesson 3.07)

I have a separate article on how to choose and install Google fonts. If you would like a Google font in your template, see this blog post: Installing Google Fonts. Be sure to add the font you pick to the body selector.

(It is required to include a Google Font for my MinnState students, but if you aren’t in one of my courses you may skip the Google Fonts. )

The screenshot below shows the code for a developer who has chosen Dancing Script as the font for <h1> and <h2> headings, and the Roboto font for all other text. Note that Roboto is a more readable font and will be the website default because it is added to the body selector. Dancing Script is a fancier font that will be used on the h1 and h2 headings only.

Putting it all together, this is what the code in the template looks like. This example is a simpler option for Google Fonts, that uses only one font for the entire website.

At the end of this part, the only change to the index.html file is the addition of the link to the stylesheet. The style.css file shows only the Google font applied to the entire website, and on the browser screenshot you can see that the font has changed to the Google Font, Montserat.

Part C. Navigation and Footer Links (Module 5)

In Module 5 we change the navigation to an unordered list and add the CSS that makes an unordered list into a navigation bar. Since most websites use horizontal navigation, this is what we want in our style.css template. We also add a bit of styling to the footer using email, sms, and telephone links. To make the navigation from an unordered list takes several steps, and so I have my students create the entire nav in JSFiddle.net, and then move it to their template. JSFiddle is an online coding playground that makes it quicker to see the impact of each of the changes to the CSS. The screenshots you see below are from JSFiddle.

Step 1: Change the Nav to an Unordered List (Lesson 6.3)

For this segment you may work either directly in your template or in JSFiddle.

In Part A, you created a navigation. As explained in Module 5, a navigation is a list, and a list needs to be coded as a list. Change your navigation so it looks like the following code by adding the <ul> and <li> tags. When you click the Run button, the results in the white area should look like what you see below.

As you can see from the screenshot of JSFiddle above, this creates an unordered (bulleted) list. We will fix that with some CSS.

Step 2: CSS for Vertical Navigation (Lesson 6.3)

In order to make the unordered list look like a vertical nav bar, we need to make two changes to the CSS.

  1. Remove the bullets from the list. Use the descendent selector of nav ul, with the property-value of list-style-type: none.
  2. Remove the default underlining. Use the descendent selector nav a, with the property-value of text-decoration: none. 

When you make those changes in your JSFiddle, click run to see the result. Your screen should look like this:

Step 3. Horizontal Navigation (Lesson 6.4)

Most navigations are horizontal, right? That’s what we need in our template. This is what you need to do to make the navigation horizontal:

  1. Add a new descendent selector nav li and set the property:value to display: inline. 
  2. Add a second property value to your existing nav li selector to add 5px of padding (spacing) to each nav item. 

Click the run button. Your code and result should look like this:

Note that I placed the nav li in between the nav ul and nav a. That matches the order of the HTML, so is a bit more logical.

Step 4. Add Pseudo Classes (Lesson 6.5)

You know how when you hover over and click links, the links change colors? Developers do that with pseudo classes. Most links have four pseudo classes, and the code looks like this:

I generally make the link and visited classes the same color in the navigation. Add this code with whatever colors you like to your navigation. When you are finished, the code and result will look like this:

Hover over you links to make sure they work.

Last, but not least, you need to move this code from JSFiddle to your website template.

  1. Copy the HTML from <nav> to </nav>, and replace what is in your index.html
  2. Copy all of the CSS and place it in your template/style.css file.

Part D. Responsive Websites and Advanced Links (Module 6)

Module 6 we add some advanced links to the footer, and set up the template so that it works on tablets and smartphones with media queries.

Advanced Links and Footer Design (Lesson 6.1)

Because it can be difficult to remember how to set up some advanced links, I have students add them to the footer. That way they can always find an example when they need it. This also creates an attractive footer design.

The link shown to Saint Paul College uses the target=”_blank” attribute to open it in its own tab or window. The next link is a mailto link, that launches the website visitors email client to send an emai. The next one uses “tel” to automatically dial (very helpful on mobiles) and the last one, “sms” starts a text message.

Update your footer so it looks like the screenshot below. Note that the &bull; entity creates a bullet between the three links.

Some CSS improves the footer, by centering it and adding a border at the top.

Check your code in a browser. It should look like this:

As you can see, we now have an attractive footer on the template.

Adding the Viewport (Lesson 8.2)

This next step is an easy one. To make responsive websites, you need to add the Viewport meta tag. Here is the code for it:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Copy this code into the website <head>. At the end, your <head> will look like this:

Add Media Queries (Lesson 8.3)

Media queries are how you can change your CSS so that it appears differently at based on the width of the screen. Just copy this code into the bottom of the style.css file in your template folder. 

/*CSS without a media query--applies to all sizes unless overridden*/
h1{
  font-size: 4em;
}

/* CSS Adjustments for Tablets */
@media only screen and (max-width: 1024px) {
  h1{
    font-size: 1.8em;
  }
}

/* CSS Adjustments for Smartphones */
@media only screen and (max-width: 768px) {
  h1{
    font-size: 1.5em;
  }
}

What this code does is set up your media queries so that you can make adjustments for tablet and smartphone sizes. I set up the h1 tag as the base example, since h1 tags inevitably are too large for smaller devices. Media queries are complicated, and you can learn more about them by studying Module 6.

Part E. Final Cleanup (Template Lab)

Last but not least, we will make some enhancements to our template to make it ready for copying. If you have been following along, your template looks like the Before image. After you finish this section, your template will look like the After image.

In addition, in this section we’ll add a few more snippets of code that will improve your template.

Meta Title and Description

While the title and the description don’t appear on the web page, they are very important because this is what will appear in search results. For the <title> we will go to a better format that includes the page title as well as the website title. Here is the code for the <title>. Insert this code into website head underneath the <meta> tags.

<title>WEBSITE NAME::PAGE NAME</title>

For SEO purposes, you will want to have a unique title for each page using this format. Web pages should also have a meta description that is unique to each page. This is what will probably appear in Google Search Results, so it’s very important to have a great title and description.

The meta description is new code. Copy this code and place it with the other meta data:

<meta name="description" content="This is an example of a meta description. This will often show up in search results so it is important to write a high quality description for each page of a website">

Here is a screenshot so you can see the best order for the code:

Center the <header> text

Now we are going to center the <header> text. Simply add this code to your CSS file:

Design and Center the Navigation

Now we are going to design a basic a nav bar.

Step 1. Add a background color and perhaps a border to your navigation. Choose your own colors – don’t use mine. Use any color EXCEPT the colors in the screenshots. 

Step 2. Add 5 pixels of padding.

The code for these two steps looks like the screenshot below, but with your colors:

Step 3. Change your nav a:link, visited, hover, and active colors so that you have good contrast with your new background color. As you can see with the example at left, I found that white text looked best on the fuchsia background. The code looks like this:

Save your files, and check your navigation link colors to make sure they are clear in all 4 states. If not, then find your existing nav a colors and change them. 

If you picked a dark color for your nav, then try white for the link and visited colors. 

When you look at your code in the browser, you will see there are two more fixes to make. We want the navigation to be centered and full-width.

Step 4. To make your navbar full width, you need to remove the margin that the browser adds to the body. Add margin: 0 to your body selector to override the default margin. This is what the code looks like:

Step 5. To center the text in the navigation, you need to select the <ul> tag inside of the <nav>.

Save, and check your navigation. It should look like this, but with your color and font choices:

Let’s make one more quick change to the navigation. You may have noticed that the navigation is a bit off center. We need a few more fixes to take control of the spacing of the menu items within the nav bar. 

Step 1. Add margin of 8px to the top and bottom, and 0 to the left and right. The code shown below is the shorthand.

Step 2. Add 0 padding. 

Here is a before and after screenshot of the navigation:

Design the <main> section

First, we will add some simple text to the <main> section in index.html, so that it isn’t empty.

Add an <h1> tag to the main section, i.e. <h1>PAGE TITLE</h1>

Add some placeholder text in <p> tags. Copy this text for placeholder text.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Iaculis nunc sed augue lacus. Egestas tellus rutrum tellus pellentesque eu tincidunt. Mi tempus imperdiet nulla malesuada. Viverra nam libero justo laoreet sit amet. Morbi quis commodo odio aenean sed. Nulla facilisi cras fermentum odio eu. Aliquet nibh praesent tristique magna sit. Arcu risus quis varius quam quisque id diam. Diam in arcu cursus euismod quis viverra. Amet est placerat in egestas erat imperdiet sed euismod nisi. Malesuada bibendum arcu vitae elementum curabitur vitae. Ipsum nunc aliquet bibendum enim. Accumsan sit amet nulla facilisi morbi.</p>

The code looks like this:

On a typical website, the footer, header, and nav are full width, but the main section has a maximum width applied. We’ll use 1000px for the template, but this is a value that could change based on the website. 

Step 1. Add a main selector to your CSS file.

Step 2 Apply a max-width of 1000px to the main section. 

Step 3. Center the main section with margin: 20px auto. 

Step 4. Add 10px of padding

When you are done, the website will look like this:

Style the Footer

We already have a footer, but let’s add one more design to it using the border-top property. What this does is separate out the footer from the rest of the page.


Check the Copyright

Check the copyright you have on the website. It should be copyrighted to yourself on the template. 

<small>&copy; John Smith. All rights reserved.</small>

Add link colors

We already have colors for the links in our navigation. The nav a selector is only for the links in the navigation. Let’s set the colors for our other links.  The code below uses only a as the selector and will be the selector for all other links on the page. 

Place this code ABOVE the nav CSS in style.css.

/* Website Links except the nav */

a:link{
	color: #b300b3;
}
a:visited{
	color: #b300b3;
}
a:hover{
	color: blue;
}
a:active{
	color: black;
}

Correct Order for CSS

The websites we make in class are fairly simple, and except for the media queries the order of the CSS doesn’t generally affect the outcome of your website. However, the order of the CSS matters! The CSS at the bottom of the code overrides the CSS at the top. 

Reorganize your CSS into the order shown at below. Note: On the screenshot at below, I hid the property/values, so you could see the order. 

One Last Thing: Nesting and Indenting

Now that you have finished your template, take a moment to check the nesting and indenting of your code. We will be copying your template for future labs, so it’s important not to carry over indenting problems to new lab assignments. 

Not sure what this means? I added a FAQ to WebDevStudents on it. See the last question:

https://webdevstudents.com/modules/module-5/#faq

Frequently Asked Questions

Why should I make a website template?

The purpose of keeping a template is that you have the code that you will need in EVERY website. The template includes all of the code that you will only want to type one time in your lifetime, like, “<!DOCTYPE html>”. Having the template also makes sure that you have key elements included, like the semantic elements. There is also more complex code, like coding for a nav bar or coding for media queries that you will want to include in every website and can be harder to remember.

Why don’t you just give us the code for the template?

Good question! Most of the students I teach are coding beginners, and so I feel it is important for the to assemble their own template, so they understand it before they use it.

How did you decide which code to include in this template?

There isn’t a black and white answer to what code should be included in the template. As you learn to code, you will decide what you want to include in your template. For example, I include some placeholder text in the <main> section that always is deleted, so one could argue that the code shouldn’t be there. I have my students include it so that they can see the spacing in the <main> section.

Posted in Readers Favorites, Web Dev Students