My new year’s resolution this year was to land a remote job as a web developer. I’m glad to say that, so far, I’ve been very fortunate!
If, like me, you also dream of working from home in the field of web development, this article is for you. In this article, I want to help aspiring web design students to learn the basics of HTML and CSS by cloning a webpage.
Our first assignment at microverse consisted of cloning a page straight from the web. That meant choosing a webpage with our browser, analyzing its design, and trying to copy it as best as we could. All by writing all the HTML and CSS on our own.
I found this to be an amazing learning experience. It was a great way to push us to ask a lot of questions about HTML and CSS. Doing this pushed us to learn new ways to code in all sorts of elements into a webpage. Learning by doing is a great philosophy if your intention is to learn how to write code.
If you want to take on this exercise, I have several suggestions for you before you start:
Pick a webpage to clone
Try to find a coding partner
The teaching method at microverse consists of collaborative learning. We get paired with a coding partner, and we tackle coding problems together. We do this by sharing our computers’ desktop on video calls. This is a great way to learn coding, because you and your partner can hold each other accountable. However, if you can’t find a coding partner, don’t worry, read on. You can still follow the steps from this article, even if you plan to go solo.
Learn the basics
If you are an absolute beginner there are several tools you can use to learn the basics before you get started.
One of the most important things about coding is learning how to teach yourself to code.
Grid Garden: an online game for learning the basics of CSS Grids.
Familiarize yourself with your coding environment
Don’t be afraid to mess up
Whatever you do, don’t worry about messing up your code. Remember that there is no time limit for your learning. You can always start over in case you break something or mess something up. In coding, never be afraid to get your hands dirty!
Cloning a website: first steps
Okay! Now you’ve gone through the basics. By now, should have familiarized yourself with your working environment. Let’s go on to actually analyzing the webpage design, and then trying to copy it by coding the HTML and CSS.
Step 1: Break the page down into parts
A youtube video page: cloning it can be an enlightening exercise!
Try visually analyzing the webpage you have chosen, in order to identify some of these parts. Once you have done this, pick one of these parts. I suggest you start with the navbar, or the header of the page, but really, the choice is yours. This will be the first section you will clone.
Step 2: Explore the source code
Now, try right-clicking on an element from the section you picked. This can be a button, text, an image, etc. You should see an “Inspect element” option from the drop-down menu. Click on it. That should take you to a source code view. Here you should be able to see the code corresponding to the element you clicked on.
By inspecting elements on the page, we can see the code behind them.
Try navigating the source code from this screen. You will notice different elements from the page light up as you move the cursor through the source text. These are the elements that correspond to the pieces of code the cursor is currently on. This is a great way to start to understand what pieces of code are responsible for which elements on the page.
Step 3: Good old copy and paste
You can use the technique from the previous step to copy sections of code you’d like to test on codepen. This can be anything from the page: text, a button, a text box, a video; anything. The idea here is to test as many different pieces of code as you can by copy/pasting. You should also google the code you are copying. This will help you can get a sense of how each HTML tag works and what it does on the page.
The process is very simple. Pick something like a button from the page, right-click on it and select “Inspect element”. Now copy the corresponding HTML tag from the source code into your codepen workspace.
Let’s try to copy the search button from the youtube search bar.
You should see the changes taking place live on codepen as you do this. If the element you copied looks broken or doesn’t work, don’t panic! This is actually a good thing! Remember that the goal here is not to get everything right from the start, but to learn. So if the code you copied doesn’t work, relax: sit back, and take some time to debug it. Ask Google why your button, image or text, is not working the way it should, and try to implement a solution.
Once we paste the code on codepen.io, we can see the button, but the size is not the same. Time for some debugging!
Try not to spend too much time doing this, as you may fall into a coding rabbit hole (something very common these days). Just give it a couple of minutes, and if you can’t find a solution move on. It’s also important not to get bored in the learning phase. Just work at a pace that minimizes frustration, and maximizes learning!
Don’t worry if you’re not creating anything new or original right now. In this initial stage, the important thing is for you to get comfortable with testing code. Try altering it a little, documenting yourself, and seeing how it all works together.
Step 4: Now, come up with your own code!
Time to start getting creative! Once you feel comfortable testing the code, try integrating it into your own CSS Grid or CSS Flexbox. You should have learned how to position elements on your page from the CSS games. So go on, give it a try.
By now you should be able to use the same process you’ve been using on the previous step to write your own code. Try writing some code. If it doesn’t work, google around a little bit and come back, try something new, and so on until it works.
Try using this workflow to completely clone the part of the page you picked in step 2. Once you’re done with that part, repeat the same steps for the rest of the parts on the page. Just repeat the same process until you’re done!
The sky’s the limit!
Now that you know how to clone a webpage, you can use the same guidelines to clone any other webpage on the internet! You can repeat this exercise as much as you want. Make sure that each time you get better and better at HTML and CSS coding.