Developer Tools

Developer tools in web browsers are a set of built-in tools that allow developers to inspect and debug HTML, CSS, and JavaScript code. These tools are accessible by pressing F12 or right-clicking on a webpage and selecting "Inspect".

Let's inspect the google.com home page. On the left side, we have Elements tab. It shows the HTML document structure. If we click on any element, we get styles of this element on the right side Styles tab. If we hover over any element, it will be highlighted on the web page which a user sees.

Let's inspect the Google logo. We see that it is <div> tag (number 1), and it has the style background-image (number 2)

Apart from element inspection, developer tools allow you to modify HTML and CSS code. Any changes made will be instantly reflected in the webpage but not permanently saved in the source code. This functionality is helpful for testing and experimenting with markup and styles.

Code Style

Code style refers to the conventions and guidelines for writing code in a particular programming language, including rules for indentation, naming conventions, use of white space, and syntax preferences. A consistent code style makes code easier to read and understand, especially when working collaboratively with other developers.

Note

During the studying process of any web technologies is recommended to use the guide from Code Guide by @mdo.