DEV Community

Cover image for Master Frontend Development πŸ’» By Cloning These Websites πŸ’―

Master Frontend Development πŸ’» By Cloning These Websites πŸ’―

Chris Hansen on September 14, 2021

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. Th...
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

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
 
abdullahsajjad026 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

Thank you πŸ’― Appreciate you dropping by and sharing!

Collapse
 
hemantssingh776 profile image
Hemant singh

Hey chris thank you for the suggestions. I wanted to ask you that while cloning should I use my brain and use google to code or should I just see and write from inspect element. As I can easily understand the code which is written. Currently I am cloning apple website.
Looking for an reply!!!

Collapse
 
hyggedev profile image
Chris Hansen

Hey there, thanks for dropping by πŸ‘‹

Good question. Usually, I try my best to just analyze the website. Starting from big, then begin working my down to smaller components. So if there is a 'section' break that section down. Whats in the section. Maybe a banner? A banner with children. Theres probably a container containing the children. Should you use flexbox or grid here?

(if your not a complete beginner, you MUST not read on! 🀣 )

Since you're doing apples website, let's take a look at the navbar. The Navbar is full width. It's 100% across, or 100vw. However its contents are contained. So it's probably safe to assume theres a container. So far, we have a navbar, and a container, and nav elements. So you can give the container some pre-defined widths, maybe something like max-width: "1400px" with a margin: "0 auto". Some padding, 1rem maybe. Then, set the parent container of the nav elements, "container" in this case, to flex. Then add justify-content: "center", align-items: "center", and flex-direction: "column." Remember I said mobile first approach is easier, at least IMO. So it looks awkward now, but set a responsive query as easy as this: @media screen and (min-width: 790px) { flex-direction: "row" }. Then, once the screen size drops below this, another another media query somewhere, or add javascript, and make the navbar disappear completely. Then in the DOM, create a separate, mobile menu, that only displays at the correct breakpoint. This is if your'e working with plain HTML and CSS anyway. Otherwise, if your'e using javascript, you can simply use javascript and state to toggle things 😎 .

One last section, if you scroll down to the "Apple event" and "Fitness+", etc section below the apple watch, you can see it's just a section, with small components. Break this down in your head mentally. It's just a full-width, 2 column section, containing big blocks with some content inside. Turn the section into a grid, with either flex or grid. So maybe a display: "grid", grid-template-columns: "1fr 1fr". Inside each block is a flex container. So something like a display: "flex" and justify-content: "flex-start" or "flex-end" depending. Each block has a background-image, probably set to a background-size of "cover" and positioned "center". The text is also contained, with a max-width of something like 300 pixels?

I could be off, as I'm just glancing at once screen and typing on another LOL. But I hope this helps you. This is my mental process of I break down over-complicated layouts! Give a share once your done i'd love to check it out!

Collapse
 
hemantssingh776 profile image
Hemant singh

Thanx for the helping me out on this.

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

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

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

I really appreciate that! πŸ‘Œ Means a lot! Thanks for dropping by πŸ’―βœŒοΈ

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

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

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
 
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

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
 
kcubeterm profile image
Krishna Kanhaiya

Really nice suggestion. (ΰΉ‘β™‘βŒ“β™‘ΰΉ‘)

Collapse
 
hyggedev profile image
Chris Hansen

Hey, thanks for dropping by πŸ‘‹ Appreciate it πŸ˜‰

Collapse
 
hurdacitelefonu profile image
HurdacΔ± Telefonu (Δ°stanbul)

Nice article, thank you!

Collapse
 
hyggedev profile image
Chris Hansen

Thank you for dropping by! ✌️

Collapse
 
destinedcodes 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
 
ginnamwal profile image
Ginna

Thank you! A lot of helpful information.

Collapse
 
hyggedev profile image
Chris Hansen

πŸ‘‹πŸ™ŒβœŒοΈ

Collapse
 
zippytyro profile image
Shashwat Verma

Thanks for this man! Could add stripe too.

Collapse
 
hyggedev profile image
Chris Hansen

Thanks for dropping by! That's a great suggestion! πŸ’―

Collapse
 
jpmurara profile image
JPMurara

πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»

Collapse
 
hyggedev profile image
Chris Hansen

πŸ‘‹ πŸ™Œ ✌️

Collapse
 
perrycodes profile image
PerryCodes

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

Collapse
 
hyggedev profile image
Chris Hansen

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

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
 
ashif4ai profile image
ASHIF ALI

Thanks, It will help me alote.

Collapse
 
hyggedev profile image
Chris Hansen

That makes me stoked! πŸ’―

Collapse
 
hoor23 profile image
Hoor Saeeda • Edited

Hi Chris,
Hope you are doing well, just wondering do we have to clone these websites via JS frameworks. As I am a beginner who knows only HTML, CSS, bootstrap, and JavaScript.
Also, do we have to clone all of the pages of the website or home page is just enough?
Best regards

Collapse
 
posandu profile image
Posandu

How about dev.to ?

Collapse
 
hyggedev profile image
Chris Hansen

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
 
hyggedev profile image
Chris Hansen

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

Collapse
 
omkakatkar profile image
Om Kakatkar

Brave detected your Discord clone as a phishing site. Couldn't proceed to check it out. Nice blog never the less

Collapse
 
brianh profile image
Brian

Don't forget to use DivMagic to make your job easier while cloning these!

Collapse
 
theonlyabdull profile image
Abdullahi Salaudeen

really helpful

Collapse
 
deevyn9 profile image
Deevyn9

Really helpful information, thank you