Tutorial: Building your first website using a free website template (part 1)
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
The 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.
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:
variant-duo
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]
I have to say variant-duo to :)
Great, i like your templates !!
Flanux
yeah, i’d go for variant duo, too
I really like your new site!
Thanks for a nice article!
very nice
andreas01-wide (as on a post picture)
andreas01-wide
Use any template!
Thanks! Super post…
very interested…
use any template!
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/
Thanks a lot worked for me
Thanks a lot worked for me
I use it.
How do you add pages to a template?
Thanks a lot sir !! its been a great help for beginners like me!!!
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.
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.)
thanks helped me a lot
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.
Hi..Dude i too like your templates alot..Very Nice If you have an E-book about this post please Send it..Thanks
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!
Looks really interesting, great to have it adapted for newbees, should make it easier to start with, thanx alot!
Great tutorial! Going to part 2 now.
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
what a cool tutorial… can’t wait the next tutorial :)
Yes nice startup guide.
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.
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!
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. :)
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!
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.
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.
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
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!
Nice article. It was good to read this.
Thnx for a work.
it is nice and easy, keep it up.
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.
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!
is this a responsive site layout?looks very clean and pro
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
Thank you very much for the information that you have provided us with the tutorial.
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!
very nice tutorial ,, simple to follow instruction .. appreciate! thanks for sharing this
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.
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
Beautiful websites! I especially like the Inland series but also the LUFT premium site.
Thank you, I’m just getting into WordPress and enjoyed the site.
Thanks a lot. Worked for me… :)
Thanks man
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)!
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
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,
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
Forgot to add my reference website: http://buildingawebsiteforfree.weebly.com/
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.
you can dive deeper into the code as you learn more and start playing around with design elements and visual styles.