Master Frontend Development 💻 By Cloning These Websites 💯
Tags: webdev, beginners, html, css
Published: 2021-09-14 16:49:28

> ### 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](https://cloned-discord-v1.netlify.app/)

--- 

### 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](https://extract.pics/)
[Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj)

**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! <a name="content-start"></a>

### 1. [Netflix](https://www.netflix.com/browse)
![Netflix website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqg12fvhs2k9c9hbl5u8.png)
When logged in Netflix is a pretty simple design. Horizontal rows, galleries, with a big featured banner. 

### 2. [Hulu](https://www.hulu.com/welcome)
![Hulu website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sacyxwsukp01xybyrae.png)
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](https://www.apple.com/)
![Apple website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8mtxir9d4p1s2xr4tye.png)
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](https://www.airbnb.com/)
![Airbnb website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jc2hh2p3q760qms0wnc.png)
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](https://www.spacex.com/)
![Spacex website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vw6qgl0fvwfjgfhhtd1.png)
Super easy design. SpaceX is basically multiple fullscreen images with fade up content and a link section. 

### 6. [NVIDIA](https://www.nvidia.com/en-us/)
![NVIDIA website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/be8du0m4pscnynxt63jf.png)
Another easy, but professional looking design. Just a banner, grid layout, and rows. 

### 7. [Razer](https://www.razer.com/)
![Razer website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyl2yn83hlk0pkeizsbo.png)
A mix of a large home banner, full page featured sections, and big box design. Have fun with this sick color scheme! 

### 8. [Salesforce](https://www.salesforce.com/)
![Salesforce website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tjcr2ukebke04x8beux.png)
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](https://www.adobe.com/)
![Adobe website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7b5aw6v0zzyixd9ht29.png)
Another big box design. But also features some cool background gradients. 

### 10. [Microsoft](https://www.microsoft.com/en-us/)
![Microsoft website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ffgea0miiie3elrfslq.png)
Features a modal, big banners, multiple featured sections, big call to action. Pretty straight forward, but professional looking design. 

### 11. [Blockchain](https://www.blockchain.com/)
![Blockchain website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho6vku9a1wtoosnwtv79.png)
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](https://www.paypal.com/us/home)
![Paypal website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9068vgcl7juba19nk5hn.png)
Features a big banner, call to action, and reverse rows. Straight forward, but effective design. 

### 13. [Slack](https://slack.com/)
![Slack website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/150ivrl50o3kryjq2a42.png)
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](https://discord.com/)
![Discord website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsxs58awvwhsptx5ioct.png)
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](https://www.amazon.com/)
![Amazon website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5u79fd5sm59fmr1ga6zk.png)
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](https://www.playstation.com/en-us/)
![Playstation website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx0xnnrlnsy27cvws5uz.png)
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](https://www.nintendo.com/)
![Nintendo website section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/equfj9z84m2z88t1154h.png)
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](https://www.twitter.com/hyggedev) 
 for byte-sized web dev content! 

---

<a href="https://www.buymeacoffee.com/hyggedev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

--- 

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

{% link https://dev.to/hyggedev/great-beginner-friendly-api-s-to-start-practicing-frontend-development-52kl %}

{% link https://dev.to/hyggedev/how-to-stay-focused-as-a-self-taught-frontend-web-developer-7gp %}