Challenge: Analyze The Code Of Public Websites
Did you know that you can read the HTML code of any website on the internet? When you visit a web page, a server sends a HTML document to your browser (this is explained in more detail in How does the internet work?). The browser analyzes the code to display it and you can do the same!
-
Open a website on your computer or laptop. I recommend https://example.org/ because it is very simplistic and therefore easy to learn from.
-
Open the development tools (dev tools) by pressing F12 on your keyboard. Alternatively, you can right click anywhere on a page and select 'inspect element' (or 'view page source'). This might be
called slightly different depending on the browser you use.
-
Analyze the HTML code and learn from it. You can also make changes and see how it affects how the web page is displayed.
'Inspect element' opens the dev tools with the 'Elements' tab active. There you can see all the HTML code of the currently open page. On the left side, are all the HTML elements the page consists of. The dev tools also display many things that you will learn more about later. For example, on the right side are CSS styles of the currently selected HTML element.
You might realize the HTML code of https://example.org/ comes pretty close to the minimal HTML skeleton. You might also come across a <style>...</style> tag and CSS code inside of it.
The process of analyzing code of a website could be regarded as reverse engineering