An easy way to learn web design - gHacks Tech News

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.





  • We need your help

    Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

    We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats (video ads) or subscription fees.

    If you like our content, and would like to help, please consider making a contribution:

    Comments

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

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

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

      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.

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

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

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

      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.

    Leave a Reply