View source and browser tools

Posted by admin at April 11, 2020

You can actually right click on any site and choose to look at the code that creates it. This feature exists in both Chrome and Firefox. Here is what I see when I right click on a Web page in my browser.

1 3 3 right click - View source and browser tools

As you can see, in this right click menu, there are two options: “Inspect element” and “View source”. When you select view source, you can see the HTML and CSS powering that Web page. Here is what it looks like when I view the source of W3C’s Web site:

1 3 3 view source - View source and browser tools

You can see a window that popped up from the bottom with all the HTML code for that site. Other Web browsers might pop this up in a separate window. 

You can also get more specific and look at individual HTML elements with the “Inspect element” option. Here is what it looks like in Edge when I inspect a specific title:

1 3 3 DOM explorer - View source and browser tools

As you can see, not only is the element highlighted on the page, but this also highlights the HTML code and shows you the CSS for that element on the right-hand side. In the video above, you can see me use this view to change the CSS and HTML real-time, which can be a very convenient way to play around with your designs.

As you work in your own sites you might want to use both of these features of your browser to understand what is happening in your own code, or in Web pages you find on the internet


Comments

Write a Reply or Comment