Wondering how websites were coded? Your greatest source viewer is a browser tool called Developer Tools. It is included in Chrome, Firefox, Edge, and Safari browsers.
To access inspect element, simply right-click any element within the browser window and click 'Inspect', and voila! Not only Inspect Element can show source codes to you, but it is also convenient to list down all applied styles to the element you're currently viewing. It is also a playground for experimenting html, css, etc. without leaving traces of the real source files. Cool, huh!?
Above is a screenshot of Chrome's Inspect window. On the gray tab bar at the top, you'll see a number of options including Elements, and Sources. Clicking these options will display different information about the page. For now, let's focus on these three menu tabs. If you're using other browsers, it won't be a headache to grasp if the name differs.
1. Elements tab
The elements tab allows you to view the HTML that is being rendered by your browser. You can see all of the classes and id's given to the HTML content as well, which is a big help for debugging CSS.
Let's go to Google's homepage > right-click logo -> Inspect.
If you click on a particular element of the HTML in the elements box, you will see the right-hand side of the Inspect Element window change. This part of the window displays a ton of CSS and JavaScript information. There is a tab on the right side called styles and it is by far the most helpful tool when working with CSS.
The styles tab shows all of the rendered CSS for a particular element. What's even cooler is that you can hover over a s...
Inspect Element
Wondering how websites were coded? Your greatest source viewer is a browser tool called Developer Tools. It is included in Chrome, Firefox, Edge, and Safari browsers.
To access inspect element, simply right-click any element within the browser window and click 'Inspect', and voila! Not only Inspect Element can show source codes to you, but it is also convenient to list down all applied styles to the element you're currently viewing. It is also a playground for experimenting html, css, etc. without leaving traces of the real source files. Cool, huh!?
Above is a screenshot of Chrome's Inspect window. On the gray tab bar at the top, you'll see a number of options including Elements, and Sources. Clicking these options will display different information about the page. For now, let's focus on these three menu tabs. If you're using other browsers, it won't be a headache to grasp if the name differs.
1. Elements tab
The elements tab allows you to view the HTML that is being rendered by your browser. You can see all of the classes and id's given to the HTML content as well, which is a big help for debugging CSS.
Let's go to Google's homepage > right-click logo -> Inspect.
If you click on a particular element of the HTML in the elements box, you will see the right-hand side of the Inspect Element window change. This part of the window displays a ton of CSS and JavaScript information. There is a tab on the right side called styles and it is by far the most helpful tool when working with CSS.
The styles tab shows all of the rendered CSS for a particular element. What's even cooler is that you can hover over a s...