- Copying the code from a website lets you use an existing web design as a template for your own site. This is common for beginning coders.
- To clone an entire website, use a website copying tool like HTTrack on a PC.
- While you can copy most of a website's structure, the site may not look the same on your computer due to complex code.
- While it's common for developers to experiment with each other's code, never plagiarize content when publishing your own site.
Using Chrome Developer Tools to Copy Code (Any Device)
Go to the website you want to clone in Google Chrome. If you'd rather copy a website's code without downloading the entire website and its subfolders, you can do so easily in the Google Chrome web browser. This method is great if you're familiar with HTML and CSS and only care about the code—not archiving all of a website's content. You can copy a site's HTML and linked CSS files and create local copies of them on your computer, but you may need to modify the code slightly to fix any broken references. While you won't want to replicate another designer's website exactly for legal reasons, it doesn't hurt to adapt existing HTML and CSS from another site and work it into your own code.
Right-click the page and choose Inspect. This opens Chrome's Developer Tools, which you can use to view the code of individual elements, style sheets, and entire web pages.
Turn on the element picker. At the top of the right panel, you'll see an icon of a square with an arrow at its bottom-right corner. If this icon is gray, click it to turn it blue. This allows you to select specific elements on the page. Now, as you scroll down the page, each element will highlight in blue and display some basic properties of that element.
Click an element to see some basic properties. After you click an area of the page, you'll see some code appear in the right panel, as well as some basic style information such as text color, font information, and accessibility info over the element. As you scroll down, you'll also see the code in the right panel change to reflect where you're pointed with the element picker.
Click the three-dots at the top-right and choose Open file. Alternatively, you can click Ctrl + P on a PC or Cmd + P on a Mac. A list of files linked to the current page will appear, including the site's index.html or styles.css.
Click the index file. Look for a file called index or index.html—it'll have a blue sheet of paper icon. This displays the code of the page you're looking at right now in the upper-right corner of the window.
Copy the code and paste it into a text editor. Now that you have the code, you can highlight it in the "Index" window, right-click the highlighted area, and then choose Copy to copy it to your clipboard. For a longer page of code, click inside the box containing the code and press Ctrl + A (PC) or Cmd + A (Mac) to select all code at once. Then, right-click the selected area and choose Copy. Once you've copied the code, paste it into a new text file on your computer in an app like Notepad or TextEdit, then save the file with the .html file extension.
Copy the CSS file(s). Some websites work their CSS code into the index file itself, while others have one or more separate CSS files containing layout, style, and formatting code. Copying that code is easy: Click the three dots at the top-right and select Open file. Look for files that end with .css, such as styles.css or default.css—the index page you copied relies on code in those CSS files for layout and style. Select a file, then copy and paste it into a new text file on your computer. Be sure to give it the same name as it appears on the live website so the index page you downloaded knows how to reference the file. Additionally, note the directory the CSS files are in—if you want to be able to view the website exactly as it appears online, you'll need to mimic the file structure of the remote site or modify the HTML code so the site knows how to reference the CSS file.
Using SiteSucker to Clone a Site (Mac OS)
Download SiteSucker from the Mac App Store. SiteSucker is a Mac app that makes it easy to download a complete copy of a website. The app is not free, but you may find it to be worth the small fee for its convenience. You can download it from the Mac App Store. SiteSucker generally ignores JavaScript on websites, so sites that rely on JavaScript may not look the same after downloading. However, if you know HTML and JavaScript, you may be able to fix broken layouts and references.
Open SiteSucker and enter the URL of the website that you want to copy. With SiteSucker's default settings, every page on the website will download to your computer. SiteSucker will follow every link it finds but will only download files from the same web server.
Open SiteSucker and click Settings. Here you can configure custom options, including the folder you'd like to save the site to on your Mac, download limits, and file types to ignore. To choose a destination folder, select a location from the bottom menu on the General tab. If you're downloading a larger site and don't want to fill up your hard drive, you can click Limit to set limits, including the maximum number of directory levels, files, and file size. Click the File Type tab to choose which types of files to download and ignore. For example, if you don't want to download images, you can uncheck the "Images" option. Advanced users can adjust the settings for SiteSucker, but if you just want to copy a website you don't need to worry about changing anything. Click OK when you're finished.
Click the Download button to begin saving the website. SiteSucker will start downloading all the content from the website. This can potentially take a very long time, and you can monitor the progress in the bottom part of the SiteSucker window. If the website requires a username and password to log in, enter it when prompted. By default, SiteSucker will check your Keychain first to see if your login information is already stored. If it isn't, you'll need to enter this information manually.
View your copied website after the download is complete. Once you have finished downloading the site, you can view it offline just as if you were online. SiteSucker localizes the pages so they point to the downloaded files instead of the original online address. This allows you to view the entire site without an internet connection. Click the Log button to check for errors, such as files that could not be downloaded.
Using HTTrack to Clone a Site (Windows or Linux)
Download and install HTTrack. If you want to copy an entire site, or many pages from a site at once, on a Windows or Linux system, you'll want the help of an automatic site downloader. One popular website copier is HTTrack, an open-source program available for Windows and Linux. This program can copy an entire site, or even the entire internet if configured (im)properly! Download HTTrack from https://www.httrack.com. While you can download most of the website's structure, the downloaded files may not look exactly the same. Many modern websites use elaborate CSS and JavaScript to enhance their site layouts, and this code may not download or implement properly when saved to your computer.
Open HTTrack and click Next. HTTrack has a simple wizard that will walk you through the process of downloading a website.
Create a project and click Next. First, enter a name for your project, such as the name of the site you're downloading. Then, choose a folder on your computer to which you'll save the downloaded files. If you leave the default download location intact, HTTrack will create a new folder with your project's name at that location and save the website in that new folder.
Select Download web site(s) from the drop-down menu. This ensures that HTTrack will download all of the content from the website, including pictures and other files. Some files, such as streaming videos, will not be downloaded.
Enter the address you want to copy. You can enter in multiple websites if you'd like to copy multiple sites in the same project directory. By default, HTTrack will grab every possible link from that website that stays on the same web server. If the website you want to copy requires you to log in, use the “Add URL” button to enter the website address as well as the username and password. You can click the Set options… button to configure advanced options, including Scan Rules, which lets you choose certain file types and extensions to exclude. You can also set Limits, such as a maximum download rate or total maximum download size.
Click Next and then Finish to start the download. Once you have entered your URLs, you can begin the copying process. Depending on the size of the website, the download process can take a significant amount of time and bandwidth to complete. HTTrack will show the progress of all the files you are copying to your computer.
Check out your copied website. Once the download is complete, you can open the copied website and browse it directly from your computer. Open any of the HTM or HTML files in a web browser to view the pages as if you were online. The files are localized by default so the links point to the downloaded files and not to the website. You can also open these files in a web page or text editor to see the code that makes them work. Click View log file to check for errors, such as files that could not be retrieved.
Comments
0 comment