This part's title might be a little bit deceiving; as you might think of it as hacking the website, and shutting it down. Sorry to disappoint you, but this is not what the title amplifies. The first part of this series finished at the website's web server replies back to your browser with the necessary HTML, CSS & JS files so that the browser can render the website. What the title indicates is to break down the website to its components (HMTL, CSS & JS), and have some fun playing with them. In order to do so, we need to open a browser (firefox...E.g.), navigate to google.com or any other website and turn on the developer's tools.
First things first. I'll start by giving a simple explanation to each component.
HTML
* stands for hyper text markup language.
* responsible for the structure of a web page.
* consists of elements represented in it by tags.
CSS
* stands for cascading style sheet.
* from the name, it describes the style of a HTML page and
how HTML elements should be displayed.
JavaScript
* the programming language of HTML and the web.
* used in writing the elements' handlers to interact with the backend.
Let's get to the fun part.
In order to turn on the developer's tools, you need to click on the settings menu icon which usually looks like three vertical lines or dots, then choose Web Developer (Firefox), and check the toggle tools tab, you should be getting a result like this.
From the image, you can see that Google's home page HTML is located on the left of the image and right next to it is the CSS. Now we're going to play with the HTML code, and try to do the following:
- Change Google Search Button To Your Name Search
- Delete I am Feeling Lucky Button
- Delete the whole html code
Let's start with the first one:
In order to do so, we need to activate pick an element from the page button, located next to the inspector tab to the left, by either clicking on it or by clicking Ctrl+Shift+C from the keyboard. Then, we pick the element we want to edit so we're going to pick Google Search for this one. The tools immediately highlights the html code for this button to you. What we're going to do is to change the value attribute to Your Name instead of Google, press ENTER, and voila you have your own search button 😃 .
The second one:
we'll follow the same steps as in one, but instead of changing the attribute value, we're going to delete the following line:
<input class="RNmpXc" value="I'm Feeling Lucky"
aria-label="I'm Feeling Lucky" name="btnI" type="submit" jsaction="sf.lck"
data-ved="0ahUKEwi1opyl4bzkAhUI0uAKHd4BBqAQ19QECAo">
As the image shows, we successfully deleted the button. Can we do the same to the whole page, though?
The third one:
we'll do the same steps in two, but this time, we're going to delete the whole body tag code and see what happens.
As we can see from the image, the page is totally white; no google logo image, no buttons, no tabs, nothing at all. This is mainly because the code inside the body tag is the structure of the page. So, does this means you deleted google forever, and you might go to jail for this?! 😟. Absolutely not! What you just did is only deleting the copy of HTML code your browser got from Google's web servers for the request you sent earlier. If you enter google.com again in the browser's address bar and hit go, the process we talked about in part 1 happens again, and you get another copy of the HTML code from Google's web servers so that your browser renders it and the full page shows up again like nothing happened.
Here's what I did after I played a bit, I changed it to totally Somaa's Search Engine 😂
Cover Image Icon License: icons8 Free License.
Top comments (2)
The developer tools are a great thing to use for learning, and there's few better ways to learn than to have fun while doing it! I like this approach.
Thanks 😃. Having fun while learning, I find it amazing as it makes you wanna try different things out, and makes it hard for you to forget what you actually learnt because this fun part you did several years ago sticks in your memories forever, and makes hard for you to forget.