Want to do some web design practice for your latest project? Why not use HTML and CSS to replicate the design of an existing website? Your aim should be to create something which will look and function exactly the same.
The mission
Want to try it out? Then here’s your mission.
First, choose a website. If it’s your first time doing this, 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 we’ll use as an example in this tutorial is Darren Rowse’s ProBlogger. It’s built on WordPress, and we’ll imagine we’re 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 it will be easier to 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. This page has steps on how to do that.
But our example is on WordPress, so we need our 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. A recommended host is 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 you wanted to do that, you 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 our replica, we could replicate 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
You can start your design emulation today. It’s a great way to brush up on your HTML and CSS without being creatively minded.
Of course, 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!
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
