How to clone a website

my name is Maggie I am a web and graphic designer from the Philadelphia area today we are going to explore why we would want to clone a web site and how would we go about doing this let's begin with the why why would we want to clone a web site or portions of a web site through cloning a web site we can copy we can view the code associated with that web site this can be a great starting point for designers and developers from here we can modify and develop a web site without having to write the code from scratch cloning portions of a web site really can be a great starting point we are not encouraging you to just go and copy an entire web site and call it your own we always want to be cognizant of plagiarism copyright issues and IP theft so how do we go about cloning a website there are a lot of different ways in this video we're going to take a look at the chrome development tools and we're going to see that they are a great resource to inspect the code and to clone and copy all of the code or just pieces of the code let's try it out we come to Coke add amis platform and we find tortoiseshell optics this project is a responsive design web building project so I take a closer look at the finished project and I want to find the finished code I select one of the elements do a right-click control click and choose inspect here I have opened Google Chrome development tools on the top I can see the HTML as I scroll through I can see the different sections of my page from my header all the way down to the footer as I select my different elements I can also see the CSS here I see the CSS for the footer and for the item with the class of container I can see the max with the margins information on the background color I can choose different elements and take a closer look at the CSS I can change the color if I'd like to when we change the color these changes will only be when reviewing them once we refresh our page these changes will go away we know that if we gave everyone the ability to change the look of a website that this wouldn't work but we can from the Google Chrome development tools copy the code and use it on our local hard drive on our computer or we could take it and clone it and use it in a different project as I move through the Chrome development tools I can see that I have the option to open the file when I choose open file I'm going to see all of the files that are associated with this page I know that the CSS for this page is Styles dot CSS I could select all of this CSS and copy it and put it into my text editor and use the CSS if I wanted to find the index.html if I wanted to find the HTML I would type in index and for this project this will bring me to the HTML for this landing page tortoise-shell optics again I could copy and paste this HTML and put it on my computer and use it in my text editor now let's come to a website like Twitter let's say that we wanted to clone we wanted to use some of the HTML the CSS the JavaScript that is accompanying this page and we can clone some of the features from this site I come to the about page and I see that I have this feature what's happening in the world and what people are talking about right now again what I can do is I can select this heading and I can do a ctrl click or right click and inspect the element and this will open up Google Chrome development tools as I take a closer look I can see the HTML and the accompanying CSS with this page when I take a closer look into CSS I see the name of the CSS sheet associated with this page I see that this line is it wrapped in an h1 tag and that it has the class of live type masthead headline type bold 36 color neutral white as I scroll down I can locate the JavaScript files associated with this site and open these files to find the code associated with the JavaScript features on this page I am going to open content dot j s n about dash home dot j s once i open these files i can clone the code for the features of this site for the features of that element on the page as we take a closer look at a website like twitter we're going to find that there will be a lot of pages associated with this website as well as a lot of code we use tortoiseshell optics as our first example because it was a very simple website with a CSS sheet and an HTML sheet as we get into more robust sites like twitter will find that there will be more files associated with this page let's take a look at how we would copy the source code for a site like Twitter I open up Google Chrome development tools and I can see all of the HTML for this page I'm going to click sources and then I'll see the HTML one more time and now I can select it and copy it I can see that there is an awful lot of lines of HTML with Twitter site once I have it all selected I'll choose edit copy I come to a text editor of my choice now I have actually created a folder on my computer and named it oh one Twitter I'm going to come to file new and I am going to paste the HTML into this sheet I'm going to save as index.html now let's get the CSS I can come to elements and I see the CSS in the middle of my Chrome development tools I can click main CSS one and in the source I see the code here now it looks like there's just one line but I'm going to find that there's an awful lot of information here and that the code has gotten a bit jumbled so I'm going to copy all of this code as I move around I can see that I have selected all of the CSS again I'll choose edit copy and I'll come back to my text editor and I'll create my CSS sheet I'll come to file new and I'm going to paste my CSS my CSS has come in very jumbled I'm not going to worry about that right now though I'm going to come file save as and I'm going to give the name of main CSS I'll hit save now I'm going to come back to my index.html and I'm going to come to the head of this document I want to make sure that I set the path to link main.css to the local file on my computer as I take a closer look to I can see the name of the JavaScript files that are attached to Twitter's website I'm focusing on the CSS right now so I'm going to come on in and again I will not have this path that is located now in href I come to file save and let's take a look and see what we have to the left of my computer I have the path to the file index.html that is on my computer the local project and to the right I can see that I am actually on Twitter's web page let's compare the two I start coming down and as I take a closer look I can see the different pieces that are not there I can see that the color has traveled my type has traveled what I have begun to do is build out the structure the HTML and the CSS and as I take a closer look I can see the different features where I'll need the Java scripts let's take a look at editing some of the HTML and the CSS so if I was using this project and building a website based on Twitter's design I might begin right with the navbar as I take a closer look at my header I can see that I have my nav icon and that I come into my nav menu I can come through the first part within the span tags that says let's go Twitter I am going to change this I'm going to type let's clone I can see all of the different things that I'd want to come in and change but for this video we're just going to scratch the surface let's save in preview I refresh and I've changed it to let's clone as I start looking around the source code of a site like Twitter there is a lot of information there so I will take it piece by piece I want to change a bit of the background color and as I scrolled through I know that there are multiple background colors I am going to use the development tools one more time to figure out what part of the CSS I am going to target so I open back up Twitter I have twitter.com and then I have the copied source code that's on my computer I want to figure out what this background color what the class name is for the CSS of this background color so again I'm going to do a ctrl click and I'm going to inspect this elements and as I come in I can see on main dot CSS that the rule is background color dark blue let me change this color let's go for pink what I could do as well is I could actually copy this line right here with the change that I have made I am going to come to edit copy now I'm going to come back to my text editor I am going to take this rule and create another CSS sheet I'm going to name the sheet child dot CSS I'm going to paste this rule here and come to file save as child dot CSS I'm going to put my rules on a separate sheet this way I can keep the code better organized I'm going to come back to my index.html and make sure that this CSS sheet is also attached I'm going to select the line of code that has main dot CSS linked for the CSS I'm going to come after that line of code I'm going to paste I will change the link to child dot CSS I need to make sure that I put my second CSS sheet below main dot CSS this way the new rules that I'm making will override the rules in main dot CSS I come to file save all and I'll preview again to the left I have the index.html that is on my computer that is in the local folder and to the right Twitter's website that's live on the web I've made two very basic changes to this website and we familiar our self with how we go about finding the source code and copying and pasting it to a folder on our computer you may be interested in recreating a site and not cloning it if so check out our video on going from a design to a website this video focused primarily on HTML and CSS subscribe to code academy z' youtube channel for videos on replicating JavaScript functionality from webpages thanks for watching this was Maggie with code Academy join the conversation by subscribing or dropping a comment below and if you would like to take your skills to the next level join code Academy today thanks so much

Channel: Codecademy

Views: 347,447

Keywords: codecademy, code academy, clone, website, portfolio, html, css, building a website, how to make a website, cloning websites, building websites for beginners, beginner HTML, beginner CSS, web development for beginners

Id: sePm-Bz1J34

Length: 13min 26sec (806 seconds)

Published: Fri Feb 08 2019