An easy way to learn web design

I spent a little time today on a WordPress theme for one of my clients. He asked me to copy his webpage design and turn it into a WordPress blog. This took me about a fifth of the time it takes to design a blog on my own, and the coding was much smoother and easier. I realized that this is a great exercise to start learning HTML and CSS.

In fact, I'm teaching my girlfriend CSS design and we went through the same process, taking an existing page and recreating it. First of all, you see the design right in front of you and you don't need to keep in mind where you want to get to. Second of all, you can use some awesome tools to help you on the way if you're a beginner.

My favorite tool is of course Web developer toolbar, which is a Firefox extension that can aid you in web design. A great trick to know is to press ctr+shift+y to view style sheet info on a page. This will draw a rectangle around elements you hover over, and when you click, it will display the styling behind those elements.

Update: Web Developer Tools are now integrated into Firefox. Just hit F12 to display them in the web browser. They are now also part of Internet Explorer and Google Chrome.

This is awesome if you're starting out because it's a cheat sheet you can use to check how the designers did this or that, but you can also use it to take a look at what colors where used, how a float is accomplished and so on. There are also some other tools in there like changing the stylesheet on the fly, resizing the viewport and so on.

In short, copying a website is much easier than creating your own design. If you take the burden of trying to create something cool and new on your own off your back, you will be free to actually learn the methods behind coding a good site. My girlfriend also finds it very helpful, and she's a complete CSS newbie, so I guess many people could find this method appealing, mostly because it puts you in the action right away, no need to go through all the boring theory.

Advertisement