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.
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 stylsheet 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, mosty because it puts you in the action right away, no need to go through all the boring theory.
Enjoyed the article?: Then sign-up for our free newsletter or RSS feed to kick off your day with the latest technology news and tips, or share the article with your friends and contacts on Facebook or Twitter.Related Articles:
New DesignMicrosoft Office 2007 Design Families
Open Source Web Design Free Templates
Web Design Tool DENIM
New Microsoft Design Direction
Thank you Daniel ..
It’s very usefull tool …
I just know it right now …
Very help to learn web design :D
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.
I uninstalled Web Developer Toolbar when I found Firebug. Much much better tool ;)
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.