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!
Last year I applied to microverse. Microverse is an online school for people who want to learn web development, that costs $0 until you get a job. I got admitted to this year’s January class, and I’m totally stoked to be in the program!
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
For this exercise, I will be using a youtube video page. This is the page we cloned for our exercise at microverse. However, you can apply the principles laid out here to your preferred webpage. Go ahead and 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.
If you don’t know what HTML and CSS are, or how they work, I recommend you look up one or more introductory articles. Read them, and then come back.
Once you got the bare essentials down, you can try gamified tutorials. These are a very innovative way in which you can actually learn to code by playing games. You can use one or several of the following games to get a better hang of how you’re going to be cloning your webpage:
Flexbox froggy
Grid Garden
CSS Diner
Flexbox froggy
Grid Garden
CSS Diner
Grid Garden: an online game for learning the basics of CSS Grids.
Familiarize yourself with your coding environment
At microverse, we use specialized tools to test and share our code, such as code editors and Git/GitHub. Keep in mind that for professional web development , you will have to learn how to use these tools. However, for this exercise, it’s not necessary. For now, you can use an online tool to do the same thing.
One very popular web app you can use for this exercise is codepen. With this tool, you and your partner, can start working on web design right away. You can share your work among yourselves and others, without the need to install any software.
Codepen.io: an online tool for HTML/CSS/JavaScript live testing.
Make sure you familiarize yourself with codepen before continuing with this exercise. For this you can use an online tutorial, or whatever resource is available to you. Remember: teaching yourself is key.
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
The first step to cloning a webpage is to break down the work you’re going to have to do into separate parts. One widely used standard for this is to organize webpages based on semantic HTML. Semantic HTML uses some standard elements for webpages. Such as the navigation bar (navbar), headers, sections, articles, and the footer. Most pages will contain one or more of these elements in their design.
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.
On codepen you should see three text areas: one for HTML, another one for CSS, and finally one for JavaScript. For this exercise you will only be using HTML and CSS. Make sure you know how to get CSS Grids and/or Flexbox working on codepen. There should be plenty of tutorials online on how to do this.
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.
This is an effective way to get your coding skills ready before you join a program such as microverse! The steps on this article are just suggestions. Feel free to expand on them and add whatever you feel will improve your learning skills! I hope you enjoyed it, happy coding!