DEV Community

loading...
Cover image for Master Frontend Development 💻 By Cloning These Websites 💯

Master Frontend Development 💻 By Cloning These Websites 💯

Chris Hansen
Hey there 👋 I'm Chris. I Create fast, modern, client-side facing websites with technologies like React and Javascript. Also follow me on Twitter and IG ✌️
Updated on ・6 min read

UPDATE

I cloned one of these websites! I haven't built a website with pure html, css and js for a while, so I gave #14 Discord a go. This is how it turned out. Not by best work, but I worked pretty fast! 🤣
Discord Cloned


Why clone websites?

Frontend development has everything to do with the client side. Everything the user can see and interact with on their web browser.

Studies show that if a website does not load within 2 seconds, users bounce. How do you think users react if a website design is not up to par with modern designs and trends?

That being said, design has just as much importance as all the frontend programming going on in the background. After all, developers are tasked to implement a professional design into a working website all the time. It's very much an important piece of a frontend developers arsenal. Get good at it!


The goal

Master this frontend skill, by cloning these websites as close to identical as possible.

Try to incorporate functionality, like modals and drop downs. Include responsive design, like mobile navigation, and grids.

All websites listed below are similar, but just different enough to force different design concepts. For example, majority of these websites have:

  1. Large homepage banners
  2. Big block designs
  3. Reversed grid columns
  4. Full or half page menus
  5. Sticky or absolute positioned navigations
  6. Galleries
  7. Dropdown / accordions
  8. Minor animations like fade, or type effects
  9. Two grid columns
  10. Responsive design and more!

TIP: You can also use web scrapers to download all the assets you find on websites.
Extract Pics
Image Downloader

BONUS 🔥
If you want to go full on leet mode, add javascript functionality. Like routing, dynamic content, 3rd party APIs ( i. google maps ) etc.

⚠️ If you push your project up to the web, make sure to not claim your designs or assets as your own!


Websites for you to clone!

1. Netflix

Netflix website section
When logged in Netflix is a pretty simple design. Horizontal rows, galleries, with a big featured banner.

2. Hulu

Hulu website section
Just like Netflix, the logged in experience in Hulu is pretty similar. Has a large featured banner, and basically rows of movies or tv shows with every few rows having a featured section.

3. Apple

Apple website section
You'll know what I mean by "big block" design. Apple does this well. It's clean, intuitive and pretty straight forward. If you break everything down into smaller components, you'll see how easy it would be to implement the design.

4. Airbnb

Airbnb website section
Airbnb is such a beautiful website! The assets are amazing. Break this design down into smaller components, and you'll see how it's just a bunch of big rows and small rows. Blocks either spanning multiple columns, or the entire row.

5. SpaceX

Spacex website section
Super easy design. SpaceX is basically multiple fullscreen images with fade up content and a link section.

6. NVIDIA

NVIDIA website section
Another easy, but professional looking design. Just a banner, grid layout, and rows.

7. Razer

Razer website section
A mix of a large home banner, full page featured sections, and big box design. Have fun with this sick color scheme!

8. Salesforce

Salesforce website section
Another great website to polish your css skills. A mix of banners, rows, columns, reverse columns, big box design, but also has featured list, multiple call to actions, and fun images.

9. Adobe

Adobe website section
Another big box design. But also features some cool background gradients.

10. Microsoft

Microsoft website section
Features a modal, big banners, multiple featured sections, big call to action. Pretty straight forward, but professional looking design.

11. Blockchain

Blockchain website section
Learn about blockchain while you clone this one. This design incorporates a few more difficult design concepts. It also features a big banner, call to actions, gradient effects, but also has big box designs as links and dynamic accordions. So not only does the accordion tab drop more content below it, it changes the image beside it! You probably have a tool of choice for this 🤔

12. Paypal

Paypal website section
Features a big banner, call to action, and reverse rows. Straight forward, but effective design.

13. Slack

Slack website section
Slack features a fun homepage banner. In the banner is a toast banner, a call to action, a google sign in button, and a row of icons featuring companies that use Slack. The rest of the layout is a simple grid system with a typical reverse row design. Minimal animations, like hover effects.

14. Discord

Discord website section
Probably my favorite looking website on the list. It has fun vibrant colors, a minimalistic homepage banner featuring a call to action, reverse row grid layout, and a nice big featured section.

15. Amazon

Amazon website section
The king of e-commerce. This is a straight up "show off" mockup. If you can nail Amazons design, your frontend dev design skills are up to industry standard. Features a slightly more complex grid layout, with content spanning one or more rows and columns. Has a search bar in the navigation. Also has recommended section, hover effects, carousels, etc. Have fun with this behemoth!

16. Playstation

Playstation website section
Playstation.com has a nice large homepage banner featuring a slide show with a nice fade in effect. You can code this from scratch, or use your favorite library. Cloning website really gets you thinking about your tools. Also features single row gallery, large featured banners, dynamic content on click, multiple full screen call to actions, and minor animations. This is probably my second favorite looking website. Really enjoy the subtle animations and UI. It also really helps you polish multiple design concepts.

17. Nintendo

Nintendo website section
Ahhhh, childhood memories! Well, kind of, more of a Sega player. But I digress! Nintendo.com has a nice colorful homepage banner with a minimal call to action beneath it. Has a continuously scrolling single row gallery which is new on the list. So this will offer some great practice. Again, you can use a library for this as you don't need to re-create the wheel every time. Other than that, straight forward big box grid design and single row galleries. One row will help you practice "quick favoriting" items.


Conclusion! 😎

That's a wrap on "Master Frontend Development 💻 By Cloning These Websites 💯" I really believe cloning one or multiple of these website, will drastically improve your CSS. There's a lot of analytical thinking that comes with cloning websites, as you break down designs from larger to smaller components. And you also need to think about the best tools as you approach new problems. Then there is responsive design. A mobile or desktop first approach? For example, do you think Microsoft.com should prioritize the desktop or mobile experience? If it was up to me, I'd like to think most people wait till they can access a desktop to make very large purchases like desktops and laptops. Therefore I'd probably prioritize the desktop. This is a big part of a Frontend Developers job! Whether you're freelancing or working for a company. Designs are either up to you, or by professional designers. Master this part of Frontend Development!


Follow me on Twitter

for byte-sized web dev content!


Buy Me A Coffee


Check out these other beginner friendly articles also written by me! ⤵️

Discussion (39)

Collapse
official_fire profile image
CoderZ90

Wow thats Great! I never knew that website like extract.pics/, etc. even existed Thankyou so much for sharing it 😊. I try to make website clone but for that i need to manually download each image. But this made my life easier lol

Collapse
hyggedev profile image
Chris Hansen Author

Ikr! 🔥 It makes cloning websites that much easier. And completely removes the obstacle of not having the same assets! You just get to code it! Thanks for dropping by and sharing 💯✌️

Collapse
official_fire profile image
CoderZ90

😊

Collapse
abdullah_sajjad profile image
Abdullah Sajjad

Nice! This is a very good idea and websites shared are also good to clone. Furthermore, you can go to this link to get any resources related to Front-End Web Development and learning code.
resourcesmark.vercel.app/

Collapse
hyggedev profile image
Chris Hansen Author

Thank you 💯 Appreciate you dropping by and sharing!

Collapse
asdfsafd profile image
dnokov

@hyggedev Hey Chris, this is an awesome post and it inspired me to do it myself as I'm a backend developer and I'm thinking of doing this to up my CSS/JS game. Isn't it some kind of an copyright violation, if I were to use their images/colors?

Collapse
hyggedev profile image
Chris Hansen Author

Hey 👋. That's cool! It definitely offers a great amount of practice.
Hmm, I don't think it counts as a copyright infringement if you are cloning for the sake of practice. For instance, you would not claim to be the owner or designer of the original design, nor would you be redistributing your design for sale.

From what I understand, images on the web can be downloaded and "used", but can not be claimed as their own without attribution or permission. And of course it cannot be re-sold.
If I clone a website, I will specifically add an attribution to the owner to avoid any possible confusion. I will also clearly say something along the lines of, "Clone of Airbnb.com", "This project showcases my ability to take a professional design and implement into a functional website with custom html and css.."

Don't take my word for it. I would definitely do a quick search, but I believe if you take the right precautions, it's all good.
I hope that clears things up ✌️

Collapse
testerslol123 profile image
Danny S

Cool. Didn't know that there is extract pics for this. Gonna give it a try.
Also I will start convert those to react code for my starter and portfolio project.

Thanks, really appreciated!

Collapse
hyggedev profile image
Chris Hansen Author

It's friggin' awesome right!? Have fun! You're building a react portfolio for yourself, or are you building a boiler-plate in React for other people!??? I'm doing something similar if you are! Good luck ✌️

Collapse
testerslol123 profile image
Danny S

Actually I'm building react portfolio, but I'm still quite clueless when doing this.
Maybe I should start with create-react-app first.

That's quite interesting! Good luck for you too.

Thread Thread
hyggedev profile image
Chris Hansen Author

Sweet! 😎 It does NOT take long to get the basics and fundamentals of React down. I would really recommend the official React docs and no doubt, use create-react-app. It's the most painless way to start. Also get a hang of the basics in Javascript. Definitely understand ['DOM', 'variables', 'functions', 'loops', 'objects'] and you'll pick it up soon. Unfortunately, the only React tutorials I currently have expect some knowledge in React, and
incorporate some other styling library, however I'd definitely recommend: Brad Traversey and The Net Ninja on Youtube. The two are extremely reliable learning resources! Have fun 💯

Collapse
bpellicer profile image
Bernat

Hey! Nice idea. But do you mean doing these webs static with only HTML and CSS or using something like React, Angular + CSS and API's??

Thx!! 😇

Collapse
hyggedev profile image
Chris Hansen Author

Hey there ✌️ Appreciate you dropping by! Well, I think it depends on your level of experience. There is no problem with just using HTML and CSS alone 👌 However, you may not be able to execute some of the "functionality" that is required to do so, but that is totally fine. But if you do have a framework under your belt, I'd say clone a website or two using both! Clone one with HTML and CSS, and another with a framework. Use a third party API, get mock data, get creative! So power to ya if you can use Angular! 💯🔥

Collapse
spock123 profile image
Lars Rye Jeppesen • Edited

Impossible now to work with frameworks that don't have Typescript, Rxjs and Observables built in.. it feels so dated to work with promises now

Thread Thread
hyggedev profile image
Chris Hansen Author

I'd say learning typescript is worth it! It also stands out amongst job candidates. Maybe look into Vite, by Evan You. It's an extremely fun frontend tool, that allows you to switch from .js to .ts and back on the fly. No set up required. As for Promises, I think with es17 and async await is going no where soon. 💯

Collapse
dongphuchaitrieu profile image
Đồng Phục Hải Triều

You did a great job! Really nice suggestion!

Collapse
hyggedev profile image
Chris Hansen Author

I really appreciate that! 👌 Means a lot! Thanks for dropping by 💯✌️

Collapse
yiradesat profile image
Destiny Saturday

I never knew Nwicode - Mobile App Builder PRO - Affiliate Information ever existed
You can try it too
bit.ly/3hCNw05

Collapse
jack_garrus profile image
Nadia G.

Very useful article, thank you!

Collapse
hyggedev profile image
Chris Hansen Author

You're very welcome ✌️ If you clone one of these websites, drop by and share!

Collapse
kcubeterm profile image
Krishna Kanhaiya

Really nice suggestion. (๑♡⌓♡๑)

Collapse
hyggedev profile image
Chris Hansen Author

Hey, thanks for dropping by 👋 Appreciate it 😉

Collapse
hummingbird84 profile image
Ginna

Thank you! A lot of helpful information.

Collapse
hyggedev profile image
Chris Hansen Author

👋🙌✌️

Collapse
zippytyro profile image
Shashwat Verma

Thanks for this man! Could add stripe too.

Collapse
hyggedev profile image
Chris Hansen Author

Thanks for dropping by! That's a great suggestion! 💯

Collapse
jpmurara profile image
JPMurara

👏🏻👏🏻👏🏻

Collapse
hyggedev profile image
Chris Hansen Author

👋 🙌 ✌️

Collapse
hurdacitelefonu profile image
Hurdacı Telefonu (İstanbul)

Nice article, thank you!

Collapse
hyggedev profile image
Chris Hansen Author

Thank you for dropping by! ✌️

Collapse
ashif4ai profile image
ASHIF ALI

Thanks, It will help me alote.

Collapse
hyggedev profile image
Chris Hansen Author

That makes me stoked! 💯

Collapse
perrycodes profile image
PerryCodes

Your 'Blockchain' url could probably drop the "Spanish version of the site" path!

Collapse
hyggedev profile image
Chris Hansen Author

Haha that's freaking hilarious. When I was making the article, for some reason Chrome kept asking me if I wanted it translated... and I don't speak or write Spanish LOL. Thanks for taking your time reading and finding that! 💯

Collapse
srini profile image
Sri-Ni, Thirumalaa Srinivas • Edited

Interesting and motivational for devs!
Mimicry is the best form of flattery and learning.

Collapse
hyggedev profile image
Chris Hansen Author

I totally agree. When it comes down to it, if you have the ability to use best practices, write clean code and are able to clone the site, that's essentially job experience 💯

Collapse
posandu profile image
Posandu

How about dev.to ?

Collapse
hyggedev profile image
Chris Hansen Author

Sure, that would be fun and challenging! My blog was mostly aimed at being able to clone the UI of a more static site. But, like I mentioned, if you want to use some mock data, more power to you! For example, if you want to fetch users, check out my other article about beginner friendly APIs!

Collapse
deevyn9 profile image
Deevyn9

Really helpful information, thank you