If you’ve ever created a trang web from scratch, you know that it can be a complex, time-consuming project. There are so sánh many elements đồ sộ consider, from the color palette đồ sộ the navigation đồ sộ optimizing the load tốc độ — and that’s just the beginning.
But luckily, starting from scratch isn’t usually necessary. Instead, you can clone an existing trang web or parts of a trang web, and then customize the cloned code đồ sộ fit your needs and make a totally new site. This process can be a much more efficient way of creating a trang web. So whether you’re cloning a trang web for a client or for your personal portfolio, here are the steps đồ sộ follow, as well as some things đồ sộ keep in mind when working with a cloned trang web.
First, some ground rules
The process of cloning a trang web is common in trang web development. But you obviously don’t want đồ sộ just copy someone else’s trang web — you want đồ sộ ultimately make your own unique site. Thankfully, there are simple steps you can take đồ sộ avoid outright copying someone else’s external-facing work.
First, think of cloning a trang web as a starting point — lượt thích a template — that you get đồ sộ tweak and personalize. Then you’ll be able đồ sộ add your own ideas and designs đồ sộ that template. The idea is đồ sộ make the trang web totally your own so sánh that you won’t have legal issues đồ sộ worry about.
To that kết thúc, watch out for nội dung that’s copied over when you clone a site. You’ll need đồ sộ replace any written or visual nội dung.
How đồ sộ clone a trang web using Google Chrome
One way đồ sộ clone a trang web is with Google Chrome Developer Tools (DevTools), a toolkit for developers that’s conveniently built directly into the Chrome browser.
Follow these steps đồ sộ clone a trang web using Google Chrome:
- Select an element on the page
- Right-click on the selected element and choose “Inspect”
- At the top, you can see the site’s HTML
- As you scroll, you can see all the elements of the page, from the header đồ sộ the footer
- As you select elements, you can see the CSS, which shows details lượt thích the maximum width and margins
- Click on the three dots at the top-right of the page and select “Open File,” which shows you all the files associated with that page
- Type in the tệp tin that you want, such as styles.css or index.html, then select the code and copy it into a text editor or into a Codecademy workspace if you’re signed up for Codecademy Pro
This method also works with JavaScript. You right-click on the element, choose “Inspect,” and scroll through the elements on the page. When you find the JavaScript files, you can open and copy them over đồ sộ your text editor.
Cloning a complex website
Simple websites likely have just one CSS and HTML tệp tin, but more complex sites, lượt thích Twitter, can have several. If you want đồ sộ clone a site lượt thích this, follow these steps.
To copy the HTML, select an element and click “Inspect” đồ sộ open the DevTools. Next, click “Sources” at the top. You’ll see the HTML appear on this tab, and you can select it, copy it, and then paste it into a text editor. Save the tệp tin with a .html extension (myfilename.html).
To copy the CSS, click on “Elements” at the top navigation bar of the DevTools. You’ll see the CSS in the middle of the page. Click on main.CSS, which will open up the code. Select and copy the code, then open a new sheet in your text editor and paste the CSS. Save the tệp tin with a .css extension.
Working with a cloned website
Once you’ve copied the code into your text editor, it’s ready for you đồ sộ edit and make it your own. Working with a cloned trang web is also a great way đồ sộ learn how đồ sộ code, since it gives you a look at the inner workings of a live trang web. Here are the programming languages you’ll work with as you edit a cloned trang web.
HTML
HTML stands for Hypertext Markup Language. It’s used đồ sộ create the structure of a trang web page, including paragraphs, images, and bulleted lists. HTML uses elements đồ sộ make components of the page act a specific way. For example, đồ sộ designate text as a paragraph, you would use the tag
before the paragraph and
đồ sộ kết thúc the paragraph. The items in brackets are called tags.CSS
While HTML gives websites their basic structure, lượt thích headings and paragraphs, Cascading Style Sheets, or CSS, gives these elements a style. For example, with CSS you can change the size and color of your text and links. You can also create interesting layouts with sidebars and create effects with CSS.
CSS starts with a selector, which selects the HTML element you want đồ sộ change. For example, for an H1 heading, you would use h1 as the selector. That’s followed by brackets { }. Inside the brackets, you have the property and the value. Here’s what it would look lượt thích for a heading:
h1 {
color: blue;
font-size: 5em;
}JavaScript
JavaScript is a programming language that lets you add more complexity đồ sộ websites. It’s used alongside HTML and CSS đồ sộ bởi things lượt thích zoom in or out on an image, display real-time updates, play audio or Clip, animate 3 chiều graphics, and change the color of a button when you hover over it with a cursor. JavaScript can also be used đồ sộ create mobile apps, build trang web servers, and design and create browser games.
Getting started with trang web design
As you can see, the steps đồ sộ cloning a trang web are pretty straightforward. The real work comes in once you’re ready đồ sộ start modifying the cloned website; and đồ sộ bởi that, you’ll need đồ sộ know your way around HTML, CSS, and JavaScript.
New đồ sộ programming? HTML is a good starting point for learning trang web design and how đồ sộ get the most out of cloned websites. Our Learn HTML course walks you through the basics, including tables and forms.
Learn CSS is a course that builds on your HTML knowledge and teaches you about colors, text size, typeface, alignment, and positioning elements. After that, you can look at Learn Intermediate CSS, which teaches you how đồ sộ create more advanced visual effects and layouts.
If you already know HTML and CSS, our Learn JavaScript course will help you build more advanced websites with JavaScript fundamentals. Once you have the basics down, our Building Interactive JavaScript Websites course will help you put everything you’ve learned into practice.
Want đồ sộ learn it all? Sign up for our beginner-friendly Front-End Engineering path.
Whether you’re looking đồ sộ break into a new career, build your technical skills, or just code for fun, we’re here đồ sộ help every step of the way. Check out our blog post about how đồ sộ choose the best Codecademy plan for you đồ sộ learn about our structured courses, professional certifications, interview prep resources, career services, and more.