Brush Up on Your HTML and CSS By Replicating Another Website

Last week, I decided I wanted to do some web design practice for my latest project. However, there was one problem – I’m not much of a creative type.

The solution I came up with was to use HTML and CSS to replicate the design of an existing website. My aim was to create something which would look and function exactly the same.

The mission

Want to try it out? Then here’s your mission.

Important: This project is meant to be for personal coding practice only. I don’t recommend that you use a copied design for a website you intend others to view.

First, choose a website. I recommend, if it’s your first time doing this, that you start small and don’t choose anything too dynamic like Facebook or Twitter.

Instead, choose a simple static site or blog. You can choose a WordPress site, and if you want, you could even choose to replicate a WordPress site without WordPress, or vice versa.

The site I chose was Darren Rowse’s ProBlogger. It’s built on WordPress, and I’ve been replicating it also on WordPress.

So once you’ve chosen your site, you can move on to inspecting the site and writing the code.

Inspecting the website

You could attempt to replicate the design of your chosen site by looking only at its facade, if that’s how you’d like to do it, but I recommend you inspect the website’s source code.

For this, your browser’s built-in developer tools will be invaluable throughout the project.

Take a quick look before you write any code – this will give you a basic idea of the HTML structure.

Setting up the code

Now it’s time for the fun part – writing the code.

Because this is just an exercise in web design and you don’t need the world to see it, you can just save your HTML locally and view it in your browser. So the only thing you’ll need to set up is a text editor.

If you do want to share your ‘creation’ with others, you can use Dropbox to host your HTML. Take a look at this blog post for steps on how to do that.

But in my case, I’m on WordPress, so I need my code to be properly hosted on the world wide web. As the world won’t be seeing your site, it’s OK to use a free host. The one I went with was 000WebHost.

So get your environment set up, and then you can start coding. Developer tools will be a great help to you when doing this, and if there’s anything you can’t figure out, you can always just go back to the source code and see how it’s done.

Try to achieve the same result with a different method

Now, the idea with this project is not necessarily to copy the code verbatim. If I wanted to do that, I might as well have just saved the HTML and CSS of the original website.

Often, there are things the original website doesn’t do such a good job of. There’s no reason why you can’t achieve the same result with a different, more efficient, method.

ProBlogger’s header, logo, navigation menu and background are all rolled together into one gigantic image. So in my replica, I’m replicating the same look, but with pure CSS.

Pure CSS is often better than images, as it doesn’t require an HTTP request and takes up less file size. There are actually a lot of examples on the web of pure CSS replicas – such as the Apple navigation menu and the Twitter logo.

Conclusion

My ProBlogger replica is still a work in progress, but that doesn’t mean you can’t start your design emulation today. It’s a great way to brush up on your HTML and CSS without being creatively minded.

As I’ve said, the purpose of this is not to copy someone else’s design for your own website – that’ll get you into big trouble. It’s OK for practicing your coding skills, just don’t implement it on a site you want the world to see.

What website design will you be emulating? Tell us in the comments!

Recommended Training – Treehouse

Treehouse

Although this site incorporates a number of different training recommendations, our top recommendation is Treehouse.

Treehouse is an online training service that teaches web design, web development and mobile development through videos, quizzes and interactive coding exercises.

Treehouse’s mission is to bring programming education to those who can’t get it, and is committed to helping its students find jobs. If you’re looking to turn programming into your career, you should consider Treehouse.

Read Code Conquest’s full Treehouse review »