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

Post 241 of 262

This is the first in a series of blog posts that will explain how to use a free website template to build and publish a complete website. The series will explain what a website template is, how you download a template, how you use code editing software to make changes in the template and add your own content, how you create multiple pages and add a navigation menu, how you make changes to the design and finally how you publish your website on an own domain so that the world can see it.

New posts will be published with a few days in between, allowing the series to be dynamic and include feedback from readers and answers to questions that may come up on the way. To follow this tutorial as new posts are published, you can subscribe to the feed or follow Andreas on Twitter. Feedback, questions and requests can be posted as comments to each entry.

Introduction

So, you have decided to build a website? Great! You are in for a lot of fun, a journey that will be full of surprises and useful experiences. But you will also come to a lot of intersections where you will need to choose directions, often without knowing what comes ahead. In this series of blog posts I will share some of the experiences I have learned during my years as a professional web designer. Not to provide the perfect guide to building websites as it is virtually impossible to create a tutorial that is suitable for everyone, but rather to explain one of the many paths you can follow and hopefully provide some inspiration on the way. A quite good way I’d say, but definitely the only one.

But let’s start from the beginning…

The first decision to make: The starting point

First of all, there are plenty of ways to build websites. It can be done using a variety of online services (free or commercial), or through different kinds of software (code editors or visual editors), or by hiring a web designer (professional or non-professional) to do it for you, or by using content management systems with different kinds of design themes – or by using website templates. Websites can be hosted on many different hosting services or on an own server, and accessed through a generic service URL or through an own domain name. For a person who wants to build their first website, the many options can be a bit overwhelming. And to make it even more confusing, each option has a wide range of quality levels, both regarding the user experience and the resulting website itself. I will write more about quality and why it matters later.

With so many possible starting points, which one is the best? Well, there is usually no good answer to that question. It all depends on the person who will run the future site, and what purpose the site will fill. If you want to run a blog, then a good way to start could be to use one of the many blog networks or a blog script. If you want to run an online store, then a e-commerce service or a content management solution built specifically for online stores may be a better starting point.

But if you want a regular website such as a presentation of yourself or your company and you want complete control of both the design and the content, then it can be a good idea to start with a website template. Beside giving you quick results – you can have your first page online within only a few minutes – you will also be able to learn about the code that websites are made of: HTML (also called the markup, the code that makes up the content and the structure of the site) and CSS (the stylesheet, the code that decides how the content is presented). And you can learn about it in small steps. A website template allows you to start with the one thing that is most important, the content of the website. Once you have the content in place, you can dive deeper into the code as you learn more and start playing around with design elements and visual styles.

The focus of this tutorial: website templates

Free website template: andreas01-wideThe main content of andreasviklund.com are website templates, pre-designed homepages that contain sample content that shows what a website can look like. The templates are free to download and free to use, and they can be modified in any way you may want to. Building a website from one of the templates on this site doesn’t cost you anything, and the templates are built in a way that makes them easy to edit and easy to learn from. Some templates are more advanced than others, allowing you to choose from multiple layouts and color schemes. But in this series I will use one of the less advanced templates to give you a simple start.

The free website templates on andreasviklund.com are built with a philosophy that ensures that the templates keep a high quality and that they are fully functional in all web browsers. This is important since you want your website to work for everyone who visit it no matter how it is accessed. A website that is accessible for everyone and that is built using well-written code that follows modern web standards will also be easier to find using search engines, which is one of the most common ways of finding websites on specific topics and also an important factor if you build a business website and want your company to be found by potential customers. In future posts, I will explain how you make sure to follow the established standards and how you can check for (and fix) errors in any code you add. But first things first…

Feel free to browse through the free templates gallery to see the different designs that are available, and write a comment to this post if you want to suggest a template that I should use as the example in the forthcoming posts.

OK, let’s move on!

Coming up in the next post: Choosing a template, downloading it and finding an editor for your operating system.

Click here to read part 2

, ,

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.

58 comments:

LisaOctober 19, 2010 at 17:08Reply

variant-duo

VandyAugust 5, 2013 at 13:29Reply

Hi,

I am making websites as I want to build up my portfolio. So I offer free website creation. In exchange I ask for your honest review. The service includes: wordpress installation, theme installation, security plugin.

First come first served. You can contact me [email protected]

Crille VuorenmaaOctober 19, 2010 at 17:53Reply

I have to say variant-duo to :)

FlanuxOctober 19, 2010 at 19:50Reply

Great, i like your templates !!

Flanux

JulianOctober 19, 2010 at 21:11Reply

yeah, i’d go for variant duo, too

JoelOctober 20, 2010 at 10:43Reply

I really like your new site!
Thanks for a nice article!

step loanOctober 22, 2010 at 06:06Reply

very nice

DmitryOctober 22, 2010 at 10:09Reply

andreas01-wide (as on a post picture)

ChrisBOctober 22, 2010 at 15:16Reply

andreas01-wide

XAQUITOOctober 24, 2010 at 20:27Reply

Use any template!

MusOctober 25, 2010 at 16:47Reply

Thanks! Super post…

Hans LauterbachOctober 25, 2010 at 21:16Reply

very interested…
use any template!

Andreas ViklundOctober 26, 2010 at 01:06Reply

OK, I will be using Variant Duo along with a new template that I just uploaded called “Learn CSS” that was built specifically for this series. Part 2 will be published later today. Feel free to check out the new template and let me know what you think. It can be downloaded from http://andreasviklund.com/templates/learn-css/

teknolojikbilgiOctober 27, 2010 at 08:34Reply

Thanks a lot worked for me

teknolojikbilgiOctober 27, 2010 at 08:36Reply

Thanks a lot worked for me
I use it.

JoelleswissOctober 27, 2010 at 19:34Reply

How do you add pages to a template?

Pratyay ChatterjeeNovember 2, 2010 at 14:42Reply

Thanks a lot sir !! its been a great help for beginners like me!!!

KimNovember 11, 2010 at 14:35Reply

Great site. I completed the first 3 video tutorials and what a relief. I was taking another HTML CSS course on line and its been great but it takes so long because they go through history of html and start from step one and go through each one, one by one. I am getting anxious and losing interest because it was taking so long. I stumbled across your site because I was viewing someone elses site in the same field I am getting into and found they used you for their site. I have the beginning of my site started but can’t finish it because I could not find anymore tutorials for linking the pages and making them work and completing content. Should I try to find this information through Word Press or some other information portal? Thank you for the great start and I hope to be able to finish and have my site up soon.

RogerApril 16, 2011 at 23:37Reply

Enjoyed reading your post here Kim. Hope it all goes well for you. Please come back and post a link to your finished site when your done (if that’s allowed here). I’d be interested to see it. Probably other here will also like to see it knowing that it’s output has been influenced / guided by this great tute series by Andreas Viklund. (I’m working my way thru them too.)

delldNovember 22, 2010 at 13:03Reply

thanks helped me a lot

Kate M. WisemanDecember 14, 2010 at 01:40Reply

I am getting on in years now however I have by no means lost the will to be taught new things. The very best thing I’ve purchased in a long time is my fantastic netbook netbook and the best things I have used it for is to learn useful data like this. Thank you.

Sameer KhanJanuary 6, 2011 at 06:46Reply

Hi..Dude i too like your templates alot..Very Nice If you have an E-book about this post please Send it..Thanks

złotoApril 15, 2011 at 13:36Reply

It is great that there are always people who try to help others. In this case Free templates – great for those who cannot afford paid one and do not have much php/html/photoshop experience. Thanks!

TomAugust 9, 2011 at 17:36Reply

Looks really interesting, great to have it adapted for newbees, should make it easier to start with, thanx alot!

MatsAugust 25, 2011 at 12:04Reply

Great tutorial! Going to part 2 now.

james hanssensAugust 28, 2011 at 17:30Reply

Hello Andreas ,
I want to put my familytree on the website from my provider ,
which I want to transfer from my uncle’s data .

Alas our community site is too simple to put it on and my webmaster tells me
I have to use the people’s site instead and learn some HTML practises .

So I ‘ll do and study your experiences .
Wish me good luck anyway and
thanks for your explanations ,

the greetings from the Netherlands ,city Vlissingen

James

hmcahyo – percakapan bahasa inggrisOctober 5, 2011 at 15:58Reply

what a cool tutorial… can’t wait the next tutorial :)

IvanNovember 12, 2011 at 10:10Reply

Yes nice startup guide.

Refurbished iPadsDecember 14, 2011 at 17:07Reply

A great tutorial! Some really nice website designs in your gallery too Andreas. You sure do have a talent for good taste. Looking for stuff like this to learn as am new to web design. Thanks.

Jim.

Angela RJanuary 5, 2012 at 16:11Reply

Great tutorial!! Took me 2 hours to create my first website – with absolutely NO KNOWLEDGE whatsoever about web design! Didn’t know what CSS was, or an index, and thought Notepad was a long ago pre-version of Word found on introductory computers! When I first downloaded the template and looked at it, I thought: “What is this? I thought this was supposed to be plug & play?!?!” Since I have no computer background whatsoever, I decided to find someone to do the website for me. Realized it was not going to happen any time soon as there was no way I could afford to “hire” someone for this task. So, back to this site, to look at the tutorial. Two hours later, I’m totally amazed at what I had accomplished! Still tweaking the site, but enjoying every minute of learning about web-design and custom tailoring the index and script-sheet to my preference. Thanks sooo much!

Andreas ViklundJanuary 6, 2012 at 00:25Reply

Thanks, that is the kind of comment which makes it worth the effort of writing tutorials and publishing templates! I’d love to see the result of your work, feel free to post the URL once the site goes live. :)

DomänerFebruary 25, 2012 at 13:37Reply

Thanks Andreas, wow, this tutorial really rocks, i agree with Angela R, was ready to give up first, but gave it another go, and i got it to work! so thank you again!

charlotte-photographerMarch 16, 2012 at 14:35Reply

Andreas, people have warned me about using a free template. Till now I’ve always paid for templates, but one of yours looks really good. Is there any truth the the whole “security issue” with free templates? I don’t see why just because it’s free it’s automatically going to be full of holes. You have great looking templates, btw.

Andreas ViklundMarch 17, 2012 at 00:46Reply

One fairly common problem has been that templates have included code that allows the template designer to insert links in the designs. None of the templates on andreasviklund.com include any such feature, they are all completely safe to use as they only contain regular HTML and CSS (and in the case of the newest templates, some javascripts/jQuery for image gallery features). The positive thing with free templates is that you can download them and review all code yourself, to see that there are no hidden backdoors anywhere. Keep in mind that CSS templates and CMS themes are not the same thing. I can personally guarantee the safety of all CSS templates, but I can not answer for CMS theme versions hosted on other sites than andreasviklund.com, even though the themes are based on my original designs. If you have any doubts for any specific design, send me an e-mail and I’ll help you find the answers you search for.

Jan BohlkenDecember 3, 2012 at 11:26Reply

Hey Andreas, good to read your response. I experinced problems like charlotte-photographer wrote above with one of my projects. Therefore I am lucky to read your comment and your explanation that none of your templates use any “criminal featrues”.
Thank you and go on with your great job! JB

DenisApril 16, 2012 at 15:30Reply

I’ve hear about this from my friend. I’ve tried and created my own site). Template is simple by i like it, thanks for the article, you’re helping people!

ForcsApril 16, 2012 at 15:33Reply

Nice article. It was good to read this.
Thnx for a work.

okizoMay 22, 2012 at 07:12Reply

it is nice and easy, keep it up.

Elena from Compte SuisseMay 25, 2012 at 15:14Reply

Thanks Andreas. I just got a free website template and I was wondering what to do with it and your tutorial is a good place to start. I went through all the 6 parts and I really found everything I was looking for!

Thanks a lot.

rorySeptember 12, 2012 at 00:55Reply

If I use this template, can I use my own URL such as http://www.demo.com and not have to use the andreasviklund name in my URL? Thanks! Great stuff by the way!

çin fuarlarıSeptember 12, 2012 at 16:19Reply

is this a responsive site layout?looks very clean and pro

FAUZUL FIDZIKRISeptember 16, 2012 at 15:19Reply

Thank you very much to Mr. Andreas up Tutorial: Building your first website using a free website template (part 1). Many people ask me, where can I find and download a nice theme and free. I always recommend at andreasviklund.com

Aziz ŞanSeptember 19, 2012 at 08:55Reply

Thank you very much for the information that you have provided us with the tutorial.

custom id cardOctober 2, 2012 at 16:42Reply

thank you for your great work. There a lot of people who want to have a web but lack skills. Instead of bugging devs like me they can actually build very nice sites using your templates. You are real asset to web makers wannabes community. I really appreciate your work and already shared your site with couple of people who want to build a site.
Best of luck!

laptop murahOctober 15, 2012 at 20:40Reply

very nice tutorial ,, simple to follow instruction .. appreciate! thanks for sharing this

RomeoOctober 19, 2012 at 16:09Reply

I just want to say thank you very much for your generosity.

I’ve used one of your template in our school web sharing ideas. I find your web templates the easiest to customize because of it’s simple yet awesome designs.

I hope to see more of your great, simple creations.

You are such a kind, generous person to share your time consuming creations for free.

God bless your heart.

Again, thank you very much.

P.S. I made sure I left you footer link available so you will get the credit you deserved.

JeanNovember 22, 2012 at 17:46Reply

First, thank you with all of my heart!

I can’t say that I am new to wed designing, but, clearly, my skill-level is no where near yours. I’m thankful and excited about having found your web site. Today, I starting reading your first tutorial and you can be sure that I will be following along and reading whatever you write.

I’ve already picked out a template, and I consider it an honor to be able to display the source of that template.

My very best, heart-felt wishes to you. I wish you much success in all of your endeavors.

With much gratitude,
Jean

Trish GantDecember 2, 2012 at 12:06Reply

Beautiful websites! I especially like the Inland series but also the LUFT premium site.

Dan TessDecember 2, 2012 at 23:33Reply

Thank you, I’m just getting into WordPress and enjoyed the site.

Zeeshan JamalDecember 22, 2012 at 21:34Reply

Thanks a lot. Worked for me… :)

DanzJanuary 26, 2013 at 05:11Reply

Thanks man

LindseyFebruary 5, 2013 at 05:02Reply

I wondered whether you could look at a free site I created and perhaps tell me which of your templates would be best suited? I am showcasing a portfolio – need a gallery – and as you click on a pic – so it enlarges. I had a site before the free one and managed it but by trial and error as I was learning about HTML and CSS as I redesigned its template. Then decided to opt for the free site – but feel it doesn’t look professional enough.

http://lind229.wix.com/lindesign

Thanks Andreas ( this is fantastic what you are doing here)!

Buccaneer64March 15, 2013 at 02:11Reply

Andreas,

Our many thanks, from the Class of 1964 (old folk, yeah?). We discovered your free Andreas01 CSS template, and chose this for building our 50th (remember, “Old folk”) reunion website. That, and your tutorials have helped us to reconnect and share our life experiences.

So, we thank you very much for your help, and sharing your experience, knowledge and creativity with the rest of us. We hope we have done right by you with recognition of your template(s).

http://www.Buccaneers64.com

ChandraMay 17, 2013 at 15:21Reply

I love your templates and I would like to consider to use one of your templates in my website http://www.solarpanelkitsinfo.com .
Is it permitted if I want to redesign or make some tweaks to one of your free website template?

regards,

Zeeshan JamalMay 27, 2013 at 00:03Reply

Another nice tutorial by you. I am always inspired reading your tutorials and this gave me an inspiration to write one. Please once check the blog on the topic how to make a website and let me know if it is worth of.

Thanks

VandyAugust 5, 2013 at 13:30Reply

Forgot to add my reference website: http://buildingawebsiteforfree.weebly.com/

NancyNovember 5, 2013 at 02:34Reply

This and the previous tutorials have been fantastic and have taught me a lot about the structure of templates.This is an excellent site. I have downloaded a few templates for my blogs.

belal rezaJanuary 19, 2014 at 10:25Reply

you can dive deeper into the code as you learn more and start playing around with design elements and visual styles.

Menu