0:00
Here's how to clone any website from the
0:02
internet to your local storage.
0:04
Recently, I came across the Melon mobile
0:06
website, and this website is absolutely
0:08
beautiful. It is built with web flow,
0:10
and everything about it is perfect. The
0:13
color selection and branding are on
0:14
point. The layout, the saddle, pop-up
0:17
animations as you scroll. The other
0:18
animations of each button all come
0:20
together to create this beautiful
0:22
synthesis of HTML and CSS that I could
0:25
look at all day. I know I could just
0:27
open Web Flow and try to recreate this,
0:29
but I'd like to learn how to code this
0:30
myself. So, today I'm going to show you
0:32
how to download the source code of any
0:34
website from the internet. That way, you
0:36
can pop that source code into Visual
0:37
Studio Code and study it, learning how
0:39
to build it yourself. First, I would
0:41
like to thank our channel members and
0:42
patrons for making this video possible.
0:44
Before we begin, I want to use this
0:46
opportunity to tell you that there's so
0:48
much I can't share on YouTube. Whether
0:50
it's because of platform rules or
0:52
because some skills need deeper hands-on
0:54
explanations. Many of my videos got
0:56
deleted. And that's why I created a
0:58
policy point learning community for you.
0:59
A place where I can share everything.
1:01
When you join, you're not just getting
1:03
another course. You're getting access to
1:04
complete ethical hacking guides, the
1:06
tools and techniques I wish someone had
1:08
handed me when I was starting out. And
1:10
here's the kicker. This is the stuff I
1:12
don't teach on here. No watered down
1:14
content, no clickbait, just raw,
1:16
actionable knowledge. On top of that,
1:17
you'll join an exclusive community on
1:19
Discord. I pinned the link in the
1:21
comment section below, but it's not for
1:23
everyone. The link is only available for
1:24
those who are serious about the journey.
1:26
Now, cloning a website online is easy.
1:29
I'm going to show you three methods of
1:31
copying the source code of any website,
1:33
each with different technical
1:34
requirements. For our first method, you
1:36
don't need any specialized tools, just a
1:38
browser. I use Firefox and/or Chrome,
1:40
but you can use any browser you want.
1:42
First, take the link of the website you
1:44
want to copy and paste it into your
1:46
browser. I will be using Melon Mobile.
1:48
Once on the page, right click on the
1:50
screen and select inspect. This will
1:52
show you all the HTML and CSS code for
1:55
that website. From here, you can launch
1:57
VS Code and create an index.html
2:03
file. Then copy the code from the HTML
2:06
and CSS files into these local files.
2:08
This works and is simple to do, but all
2:10
the images will need to be downloaded
2:12
manually. But our second method is fully
2:15
automatic. It will download everything
2:17
for you to do it. First, make sure you
2:19
have the URL of the main page of the
2:21
website you want to clone. Then go to
2:22
save web to zip and paste the website
2:24
URL into the input field. Then click on
2:26
save. This will fetch all the code for
2:28
the main page as well as all the assets
2:30
like images and graphics and save them
2:32
into a zip file. Once the zip file is
2:34
downloaded, all you need to do is
2:36
extract it. Then drag that folder into
2:38
Visual Studio Code. While on the
2:40
index.html HTML file. Click on go live
2:43
to open the website on local host. You
2:45
can go back to Visual Studio Code and
2:47
play with the code to change things and
2:49
analyze it to see how the website is
2:51
built. This method works well for simple
2:53
websites, but if you want to clone a
2:54
website built with ReactJS or any other
2:56
framework where you don't just want the
2:58
CSS and HTML, but also the JavaScript
3:00
files and all the node modules and
3:02
Webpack files used on the website, then
3:04
this last method is what you should use
3:06
first. Open Chrome and go to the
3:08
extensions tab. Then click on the Chrome
3:10
web store. Search for and install an
3:12
extension called Save All Resources.
3:15
Once this is downloaded, restart Chrome.
3:17
Then go back to the website you want to
3:18
copy. Right click on the screen and
3:20
click on inspect. Then switch to the
3:22
resource saver tab at the top here. This
3:25
will take you to this interface where
3:26
you can add more URLs if you want, but
3:28
I'll keep the default and click on save.
3:31
This will download all the code for the
3:32
website, including the Webpack files,
3:34
all the JavaScript files, icons, all
3:37
React code. Once it is done, it will
3:39
give you a zip which you can extract and
3:40
put into Visual Studio Code. This video
3:43
is for educational purposes only. Please
3:45
like the video, subscribe, and hit the
3:47
bell and tell me where you are watching
3:48
this video from in the comments down
3:50
below. Thanks for watching and I'll see
