Let’s face it: our homepage is not that spectacular. A picture of a cat, some text shadow and a custom font isn’t exactly ground-breaking. If you are looking to develop your web skills and have a bit of an eye for design, here is a guide for getting you started.

The first thing to know is that web design is all about experimentation. It’s a do stuff sort of place. It might be tempting to pull out a pen and paper every time you want to design a new page, and many people start out that way. But it can be a very frustrating experience. HTML and CSS can be incredibly inflexible one way, and also completely open in another. For example, you can do anything you like with squares, any <div> tag is basically a rectangle, but how do you make triangles? If you doodled a nice pretty triangular design you might be in for a bit of a shock when it came time to create the HTML.

So it’s time to play around, and you know what? It’s a great time to play around. There are more web gurus than ever and a ton of good resources available for free online.

Online Playgrounds

Messing around with HTML/CSS and Javascript can be annoying on your local computer. You need at least an editor and a web server, then you are constantly going through the edit-save-reload cycle. After a while you can get used to it, but there are some good online services that let you hack away for free.

• CSSDeck is simple and effective and includes lots of more complicated examples. Check out the Cats Everywhere home page here.
• Codepen is a bit fancier, with paid-for plans for people wanting some extra features. (cats Everywhere home page)
• JsFiddle is one of the older sites and has more of a focus on JavaScript. Check out the home page.

Browser Tools

One of the most frustrating parts of web development is debugging when something goes wrong. There has been a lot of work done in this area, and the major browsers now have good tools for debugging web pages directly in the browser.

• Google Chrome comes with Developer Tools
• Firefox has the Firebug add-on.

Learning just the basics can save you hours and hours of painful debugging.

References

I always find it best to have a good solid reference by my side. Sometimes I just can’t remember whether it is text-align: center; or text-align: middle; and spend half an hour wondering why it doesn’t work. Here are some of the more popular online references:

• HTML Dog has HTML and CSS that are clean and straight-forward.
• Mozilla provide HTML Element and HTML Attribute references. These are much more complete than HTML Dog and include links to relevant specifications and browser compatibility.

Tutorials

If you are looking for something a little more guided introduction to HTML/CSS and JavaScript then we have collected links to a whole pile of tutorials for you. All these can be completed online for free:

• HTML Dog does raw beginner HTML and CSS with a slight canine focus.
• Mozilla Developer CSS Tutorial is a “from scratch” CSS tutorial. It will take you all the way from basic syntax to the box model and layouts.
• Dive into HTML5 covers a lot of the nifty new features introduced in HTML5, which is available to most contemporary browsers and phones.
• Mozilla Learn contains whole bunch of links to Mozilla and third-party content.