First page | Second page | Third page

Learn CSS using a free website template

This is a simplified and scaled-down version of a website template which was originally created for a step-by-step tutorial called "Building your first website using a free website template", written by professional website template designer Andreas Viklund. The main purpose of the tutorial was to provide an example of how a free website template can be used to build a functional, accessible and technically good website, even with no prior experience of HTML and CSS. By following the tutorial, the reader would get familiar with the concept of working with code using small steps.

However, another template was used as the example for the tutorial instead of the Learn CSS template, so this template will be used for future "how to"-articles instead. In this form, I started off with the original Learn CSS template and reduced it into its basics, the main menu and the main content. Unused CSS was removed and the width was set to fit smaller screens such as the one on my mobile phone, an iPhone 4.

What does "mobile-friendly" mean?

There are numerous ways of building websites specialized for displaying on mobile devices. This template is only one example of how it can be done, and the focus is on simplicity and core features - showing the content and the navigation. This template can be used as an add-on to websites built from the original Learn CSS template, through code that only activates the mobile-friendly version if the site is browsed from a mobile device - but that will require additional code to work. Consider this a starting point, and feel free to go to andreasviklund.com and let other template users know how you choose to work with mobile traffic on your site(s).

The template can of course also be used as any other template from andreasviklund.com. It is free to use for both personal or commercial use, and free to modify in any way anyone may want to.