New template: Learn CSS

Post 237 of 262

I have just uploaded a new free template. This time it has a somewhat different title: Learn CSS. The reason is that the template was built to serve as a learning example in the tutorial series I started last week, called Building your first website using a free website template. This is what the template looks like:

Direct download: Learn CSS template (.zip, 204kb)

In the first part of the tutorial I asked for suggestions on what template I should use, and most comments suggested Variant Duo. Because of the high interest for that template, I will of course be using it as an example. But I also wanted to have something new, a template which could evolve along with the tutorial based on your feedback, suggestions and requests. For example, the first step in using Learn CSS template means that the starting point is a light-on-dark colorscheme. As the tutorial progresses, the template may end up with inverted colors, or with a third column. Alternate versions will be released on the Learn CSS template page for each step in the tutorial so that anyone can start at any point, and user-submitted code will be welcome if anyone would want to contribute with own ideas and modifications.

The title refers to one of the targets with the tutorial, to give people interested in learning the basics of HTML and CSS a chance of doing so. But like all my templates it can also be used in the most traditional way, by editing the sample content and using the design as it is.

Part 2 of the tutorial will be published later today and it will explain how to download and unpack the template, as well as how to find a code editor that you can use to edit the template. The basic structure of the template will be described and the target is to reach the point where everyone knows the difference between HTML and CSS.

, ,

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.


XAQUITOOctober 26, 2010 at 14:43Reply

Andreas: everything that you thought, it seems an excellent starting point, since “stick your hand” is the best way to modify a web template and view “what changed”.
Their templates are exceptional, but I think that for the tutorial, this template is missing lines. Gridlines, underline, etc.
This will be good! Greetings!

Tracy JolivetteApril 25, 2012 at 17:23Reply

I am going through your tutorial to create my website – a basic informational website that I wanted to look simple and elegant. Your website and templates (learn css as well as the one in the tutorial) fit the bill perfectly.
I wanted to thank you for giving me what looks like the perfect starting and ending point, enabling me to work on fine tuning my fledgling business without spending uselessly. I’ll let you know what I end up with when the project (and tutorial) are complete!