An easy way to learn web design

Daniel Pataki
Jun 14, 2008
Updated • Nov 13, 2013

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.


Previous Post: «
Next Post: «


  1. Daniel said on June 14, 2008 at 11:37 am

    Wow, thanks for that praise, glad I helped! I think in any field the best way to learn is to copy. I don’t mean rip off, just copy, and then when you’re comfortable, start going your own way.

  2. Thinker said on June 14, 2008 at 9:10 am

    I uninstalled Web Developer Toolbar when I found Firebug. Much much better tool ;)

  3. Cheryl said on June 14, 2008 at 8:41 am

    Thanks for the tip. I don’t have my own blog right now but this definitely looks like something I could use in the future.

  4. Rin said on June 14, 2008 at 5:52 am

    Thank you Daniel ..
    It’s very usefull tool …
    I just know it right now …
    Very help to learn web design :D

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.