Cloning the design of popular million-user and million dollar websites, like Instagram, Twitter and AirBnb has become a popular trend amongst up and coming web developers. The idea being that not only can you build this enterprise level website, but you can add it to your work portfolio so that future employers could rank you over other candidates.
And as someone who has had to interview probably hundreds of candidates for various developer roles, I can say that personally, it doesn't do very much for me.
And there are quite a few reasons for that, such as the amount of time that it takes to do so and the fact that you are typically only cloning a few pages and are only concerned with the front-end portion and not the more complex business logic.
You might have a server-side implementation as well, sure. But in all actuality, it typically isn't production level code, so there isn't too much to learn about your skills as a whole in this regard.
So let's go into some detail as to why I think that site cloning isn't the best use of your time, particularly if you are relatively new to coding.
You're only cloning the design
You might see a sample website look and behave like Instagram or Twitter, but under the hood there is almost zero chance that cloned website was able to replicate any real functionality.
And that's because enterprise level websites with millions of daily users don't necessarily function like your typical websites do. Which is why on average they have multiple teams of developers, designers and product managers working on them daily.
There's also a good chance that most of these websites use various design and front-end frameworks and there isn't really a person sitting behind that desk typing that <div> element. At least not anymore.
Production level websites also make use of dozens of 3rd party libraries to make them work. Typically, you can't really tell what design elements were coded by a developer, or if they were generated by a framework.
And if you think that coding something from scratch is more favorable than using a 3rd party library to a company, then you might be a bit off in that regard.
I personally appreciate the effort that alot of developers go through to showcase some level of their skill. But on average when I am hiring for a mid level developer position, I'd much rather take the person that has experience with the 3rd party implementation. And that's because that is what they would be using during the course of the job.
If you are solely just looking to practice your front-end skills though, with nothing else in mind, then cloning a website isn't the worse thing that you can do. But just be mindful that it has a limited return on investment in terms of time.
It's time consuming
One of the primary reasons why I personally don't recommend cloning websites, is because on average, this takes a substantial amount of time to do. Typically dozens of hours can go into a relatively limited design. At least to have something both accurate, responsive and functional.
And that time can be used for something with a much higher return on investment, such as working on your own personal website or learning how to implement different API's and frameworks.
These two things are much more appealing for a company looking to hire.
One of the toughest parts about developing a well-designed production level website is the actual frontend design portion. Because the better the design, typically the more elements are on the page and the more they will be layered together in complex ways
From a time perspective, you could relatively easily write a database query, use a 3rd party library to read from that database and return that data back in a neat JSON package. You might even have code that you can reuse to do just that in a fraction of the time.
But the same can't really be said for a design. Typically because every design is very unique on a website. At least when it comes to large enterprise level websites that rely on multiple designers and multiple business managers.
Lack of server side coding
As mentioned above, typically when you clone a website you are only really copying the visual elements. The rest of the 80% of the business logic is pretty much hidden to you. Because most companies don't go around telling everyone how their internal logic works.
But it is a safe bet to assume that most enterprise level websites use dozens of 3rd party libraries and dozens of API's.
And this is the code that you should be putting more focus on, because it's the majority of the code that most web developers spend their days writing.
So if you're just looking to practice your front-end skills only and want nothing to do with server-side code, then for sure, this might be a way to go. But these days, more and more, front-end development requires a developer to also know the server side.
It doesn't really help your portfolio
If you were to clone the homepage of AirBnb, put it on a static site host and add it to your portfolio, it wouldn't really help your portfolio in any major way.
For one, anybody looking at it would immediately know that this isn't your design. And secondly, there is no clear indication as to how long it took to build and whether your actual rendered code is any good.
Not to mention that you aren't the only person out there cloning these websites. And because of this, it limits the amount of questions that you can be asked about that particular project. Just at the top of my head, here are a few questions that I might ask if you were to show me a cloned website during an interview:
Which framework did you use?
How long did it take?
Did you use any design frameworks?
And that's really it. It doesn't really give me too much insight into your overall programming ability.
It's a waste of code
My main reason for avoiding spending dozens of hours copying somebody else's work is because at the end of the day, you probably won't be able to reuse any of this front-end code.
That design was specifically created for a company, their current needs, their branding guidelines and for their development team. The odds that you will be able to use that very unique 'like' button animation on a photo sharing application at some point later on in your career, is relatively low.
You might not even end up working for a photo sharing website (more than likely). In which case, that code that you wrote doesn't do you much good.
I personally have done the same, time and time again. I've built hundreds of widgets and modules throughout the years that don't really have a real-world use, but that were challenging and fun to code. And most of that code has pretty much been lost through the ages.
Looking back, I kind of wish that I had spent more time writing reusable code with real-world use or that I had spent more time working on my online branding and presence.
And lastly...
If you have the bandwidth and you feel like you need to practice your over front-end only design skills, then no practice is bad practice. So spend a day and implement a complex design.
But if you are looking to optimize your time and get the best return on investment for your time, especially when it comes to your career, then I always recommend developers work on their own designs and their own personal projects.