Tutorial: Building your first website using a free website template (part 2)

Post 236 of 262

This is part 2 in a series of blog posts that will explain how to use a free website template to build and publish a complete website. Read part 1 for an introduction to the tutorial and for instructions on how to follow it and how to submit feedback that will affect future parts.

In the first part of this tutorial series, I asked for suggestions on what template I should use as an example. In the comments to the post, several readers suggested that I should use the Variant Duo template. Since this series will be written based on feedback and suggestions from those of you who follow it, I will be using Variant Duo as one of the examples. But I also wanted to have a somewhat more advanced template that would provide some customization options, so earlier today I released a new free template made specifically for this tutorial. It is called Learn CSS and I will be using it to show how small changes to the stylesheet can be made to give the template and the website you build from it a more unique look. In that process, I will also release alternate versions based on the changes that are made throughout the series. But learning more about CSS is a topic for future parts. In this part I will start from the beginning.

Free or commercial templates?

When you have decided to build a website using a website template, the first thing to do is to find a starting point that fits your needs. There are a lot of websites that offer high-quality templates, both free and commercial. In general, commercial website templates are more advanced and include a lot more material than free templates do. Such material can be various kinds of scripts, source files for the design, fonts, user guides and/or stock photos that can be used on your website. This is useful in many cases. For example, source images for the design allows you to modify backgrounds and header images, and if the template uses a header or a navigation menu where the images contain texts (such as website name or button link titles) you can use the source files to edit the texts. But this can also make it harder for a beginner to get started since you may need to use image editors to make several changes before the template can be used at all.

The templates on andreasviklund.com do not include any image source material, but it is not needed since all text seen in the template are written directly into the HTML code, allowing you to edit all content without being forced to use an image editor. Further on, my website templates are not created with any specific topic in mind, so any template can be used for any kind of website – unlike many commercial templates which are often created for a specific category of sites. For example, commercial hosting company website templates can show a photo of a server rack in the header while business website templates can include a photo of people in suits at a business meeting. The lack of specific topics provides more freedom, but at the expense of a more generic look which means that the template design doesn’t stand out as unique in any way. This is of course not always true. There are generic templates in the commercial market as well as free templates with specific topics, but it is less common.

First step: Finding and downloading a template

The target of this tutorial is to build a simple and useful website from a generic template from the andreasviklund.com template gallery, so the first thing to do is to browse through the different templates to find one that looks suitable. On the templates page you can see thumbnails that give you an idea of what the different templates look like. If you click on one of the images or on the title for any template, you will come to a page with more information about that template.

On each single template page there is a download link (for some templates several download links for different versions of the template), information about the size of the download, the date when the template was released and a link to a live demo of the template. There is also a short description of the template and one or several screenshot thumbnails. The thumbnails can be clicked to see the images in larger formats including full size images. There is one screenshot for each layout option that the template includes, and some templates have screenshots showing the alternate versions of the template where the design or layout has been modified. For example, andreas08 is available in two versions where one version has got different colors and the option to use background images.

Once you have found a design that you like, click the download link to download the template to your own computer. The templates are packed in a .zip archive, so it is one single file to download for each template. As mentioned, I will use Variant Duo as the example here. You can download it directly through this link.

Second step: Unpack the template

Once you have downloaded the template, open (or unzip) the .zip file and you will find a folder that has the same name as the .zip file, in this example “variant-duo”. Rename the folder to “My website” or anything else you may want to call it, and open it. You will find three files in the folder:

  • index.html – The HTML file. This file includes the actual content (title, headers, texts and code to show content images) and the general structure of the template.
  • variant-duo.css – The CSS file, also called the stylesheet. This is the file that defines how the content in the HTML file is presented when viewed in a web browser.
  • sample1.jpg – The only image used in the template, a wide photo (980×250 pixels) showing flowers that is used as the header image in the template design. It is displayed through a line of code in the HTML file.

With the template unpacked to your computer, you can browse it by opening it in your web browser. When you start working with the template, you will be editing these files and preview all changes through the web browser. It isn’t until at a later stage when the template has been modified into a complete website that it will be published to the web, so when viewing the template in the browser you are only looking at your local files for now.

Third step: Finding software to edit the template

As explained in the first part of this series, there are many ways to build a website – even when you have decided to use a website template as your starting point. For editing a template on your own computer, there are two different kinds of editors that you can use.

The first kind is the visual HTML editor that opens up the template in a similar way as a web browser does but allows you to edit the content. Visual editors are often called WYSIWYG editors (“What You See Is What You Get”), which means that you see the entire template design while the code that forms the design and creates the structure of the content is not shown. Using a visual editor is a simple way to edit a website template, and many visual editors include website templates to give website builders a quick start. One such example is Style Master (a commercial editor available for Windows and Mac, costs $59.99), which includes a number of my templates. Another example is the free NVU editor (freeware available for Windows, Linux and Mac).

The second kind, which is the kind I will use in this tutorial, is the code editor. Unlike a visual editor which displays the design, a code editor shows the HTML and CSS code that websites are made up from. The code is basically only plain text so any text editor can be used to edit it. But specialized code editors include tools that make editing easier, for example by giving different parts of the code different colors to make it easier to see what you are editing. Learning to edit the code directly is not as easy as using a visual editor, but it gives you full control and a greater understanding of how the web works. And by using a website template as a starting point you don’t need to know what all parts of the code does, so you can learn things in small steps. I will be using a freeware code editor called Notepad++ (available for Windows only) in this tutorial, but there are editors with similar functionality for all operating systems such as Smultron for Mac and BlueFish for Linux (both are free).

This is what Notepad++ looks like when index.html and variant-duo.css are opened in the program (click to see a larger version):

There are also editors which allows editing in both WYSIWYG mode and in the code itself. For further reading about editors I recommend Wikipedia’s List of HTML editors and the HTML editor article which also explains why code editors give more control over the result. If you have any questions regarding editors, write them in a comment to this post and I will do my best to answer.

Moving on…

Continue to part 3 where the structure of HTML is explained and where the code editing starts…

, , ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

27 comments:

LivOctober 27, 2010 at 14:53Reply

Tank you for introducing me to this world! I have already unpacked, opened up my eyes and taken my first few steps into this fantastic new world. I mean that both literally and in a metaphorical sense.

I have also, quite empressed with myself actually, already managed to do some successfull editing all on my own! It makes me eager to learn more, realising it is not impossible to use a template in creating a website for a total beginner like me.

/Liv

XAQUITOOctober 27, 2010 at 21:15Reply

Good job, Andreas. Please, keep using this two words: “For example”. It’s the best way to understand and know what is being done, especially when a novice who reads.

MackOctober 28, 2010 at 11:39Reply

Andreas Please keep this going can’t wait for next Tutorial, i really like your templates
thanks for putting the effort in to make them, learning as i go.

GaryNovember 3, 2010 at 19:02Reply

Really good stuff, Andreas. I especially like that I’m not having to plow through this in Swedish!! Looking forward to Part 3 – soon I hope?

cheapwebdesignNovember 9, 2010 at 22:31Reply

Really helpful information, thank you so much, looking forward to more topics.

cheapwebdesignNovember 9, 2010 at 22:31Reply

Really helpful information, thank you so much, looking forward to more topics.

cheapwebdesignNovember 9, 2010 at 22:31Reply

Really helpful information, thank you so much, looking forward to more topics.

loverichNovember 14, 2010 at 05:19Reply

Thank you I get new idea from your topic i ‘ll try to edit my template thank for ideas so i can lean a lot more and develop my skill.

AlNovember 14, 2010 at 23:54Reply

NVU is no more, replaced with Kompozer

Al

David HDecember 1, 2010 at 13:51Reply

I have downloaded Notepad++ but when I try to open variant-duo.css I get a page of code that runs on and cannot be edited. What am I doing wrong?

David H

David HDecember 2, 2010 at 10:02Reply

Got it. I didn’t unzip the files properly.

David H

Mikael SinkoDecember 20, 2010 at 15:39Reply

Jag skulle vilja ha en portal för dom som vill söka praktikplatser; för ungomar arbetslösa etc.
Kan någon föreslå något?

JefitaDecember 21, 2010 at 00:14Reply

I am so glad i found your site! I spent months putting up a site for my mother’s writings, & realized then I have so much to learn. I now need to put up a site as an affiliate, to help my family financially…this is a HUGE learning curve for me, so finding a clear concise tutorial to this half of the equation, is a blessing…thank you for taking the time to help. I am so enjoying this & look forward to the coming tutorials…

FlirtcoachSeptember 3, 2011 at 10:59Reply

Good beginners guide – I will show it to a friend who just starts with this stuff.

KellySeptember 14, 2011 at 21:24Reply

HELP! I am such a beginner at this process, that I can’t figure out how to ‘open file in my web browser’ to look at it! : I am so embarrassed to even say that, but what do I do? I downloaded the template I want to experiment with (basic noise), unzipped it, and saved it, but when I go open the file by double clicking it, it only opens to a screen that shows the picture icons of the individual parts of the template. WAIT! I right clicked the icon and chose edit and it opens up either into the picture edit screen, or a notepad. So I assume that this is what I need to find in order to try to edit each part of the template. But what does opening in my web browser mean, and how do I do that? Will it look like the actual template when I do eventually figure out how to open it in the browser? THANK YOU SO MUCH for any help in this. I am a dental assistant by trade, and my computer knowledge, before this, goes as far as emailing friends and goofing around on Face Book! I am below a novice for sure!

Sicnerely,
Kelly P

Marken MöbelNovember 5, 2011 at 16:52Reply

Thanks for this detailed tutorial, we are currently working on improving our site and also think about changing the template. I will give our graphics guy the link to the site, I’m sure he can use the tutorial for the new template.

mac menDecember 9, 2011 at 00:12Reply

Hi very good job, Andreas. Please, keep using this two words: For example. It’s the best way to understand and know what is being done, especially when a novice who reads.

MolecatJanuary 25, 2012 at 02:29Reply

Great tutorial Andreas! I am trying out the example you generously provide in this tutorial, and am sad to say the link to Part 3 appears to be broken! I really hope it is not too hard to restore.

RwylieMarch 2, 2012 at 00:38Reply

How do I open the template in my browser?

Andreas ViklundMarch 2, 2012 at 00:45Reply

It depends on what operating system and web browser you use. Typically, just double-click on the .html file and it will be opened by the software on your computer that is set to open HTML documents by default. You can also, in most cases, right-click on the index.html file and select “Open with…” and then Internet Explorer, Safari, Chrome, Firefox or whatever browser you have installed.

SkiurlaubMarch 20, 2012 at 17:49Reply

Thanks for sharing your knowledge. At the moment we are planning to build up a new project and are always looking for tips like you present here.
For an absolute beginner would you rather recommend to use a WYSIWYG editor as there is no requirement of any programming langauge? For me it sounds like that therewith the benefit of the ease of use is given.
Anyhow I like how you explain things step by step. Even I can pretty much follow-up ;)

web designerJanuary 14, 2013 at 13:06Reply

Hi..
This tutorial was amazingly detailed. I learned more by creating the website via your tutorial than I did in my Graphic Design and Photoshop classes put together. Thank you so much! A very annoying cloud has been lifted off of the intimidating monster that is Photoshop.
Thanks again!

gayatriJanuary 22, 2013 at 12:51Reply

really nice tutorial!!!

Bernhard TrappeMarch 15, 2013 at 12:40Reply

Hi,
sniffing around to learn something about CSS I found Notepad++ in your tutorial. What I liked most was the idea of editing the php and css document simultaniously as shown on your ‘notepad++-screenshot.png’. When I tested notepad++, I got only 2 Tabs and not the commander like view that I expected. Any Idea?
Regards
Bernhard

ElenaAugust 9, 2013 at 23:46Reply

Hello! Thanks for posting these tutorials and templates. Two quick observations – when I open some of the links, I am bounced to a new tab. What about having them open as separate tabs, so that users can move between the open tabs? Also, is there a free or open source editor that you recommend that displays both the code and the visual html? Your tutorials were posted a while ago, and things change so quick! Thanks!

surendraSeptember 24, 2013 at 16:23Reply

hi
i have a problem my template website shows name of the free template website as title though i change it specially when i type the url in facebook
please help
thanks & regard
surendra

MaryamOctober 24, 2013 at 18:14Reply

Simply great.Keep up the good work!

Menu