Let's Discuss Basics of Browser before HTML | by Codesofrohan

Let’s start from the very start. This full course is designed in such a way that you will learn HTML as much as it takes to move forward. We will learn the most important tags, and their usages only. Because HTML has hundreds of tags to offer. And to learn all those tags will take unnecessary time. But the right way of learning HTML is to know which tags are important. And in the journey of learning HTML, it is not to learn tags, but to learn the working flow of HTML. And yes, with time and practice you will automatically remember all the tags. Well, with that said, I would like to say, even with practice, it’s next to impossible to learn all the tags. And you don’t have to worry about that. Because there are many online platforms that provide documentation for HTML. According to your needs, you can take help from them.

What is a Web Browser?

Let’s see “What is a Web Browser?”. I know this question might look silly at first. But remember you have now started your journey as a developer. So, you have to see a Web Browser as a tool. Not just software that will help you to surf the internet. A Browser has more than that to offer. Or I can say, a Browser will be the best friend of yours in this journey. Well, yes, the browser’s first task is to allow users to access websites available on the internet. It also allows users to interact with the website. When you enter a URL and hit enter, the Browser actually searches for the website using that URL you entered. And loads the HTML, CSS, and JavaScript bundle from that website. Once a browser gets these files, it renders a website and displays it to you.

Popular Web Browsers are Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari. Every browser has its own engine to show a readable and understandable website using HTML, CSS, and JS. So, it might be possible that the same website looks different on different Web Browsers.

Browsers also provide DevTools, which we will use mostly throughout this journey. We will also see the working of different options in the DevTools section.

How Browsers Render Web Pages?

Well, “How Browsers Render Web Pages?” is a very interesting question. Although this is a very big topic on its own, here we will see it in a broader view. The following are the steps through which a Browser renders a website using HTML, CSS, and JavaScript.

Steps in Rendering a Web Page:

• DNS Resolution: When we enter a URL like https://codesofrohan.com, using DNS (Domain Name System), the browser first converts it into an IP Address.
• Sending HTTP Request: In this step, the browser requests the webpage’s files using that IP Address.
• Receiving Response: The response comes from the server and contains HTML, CSS, JavaScript, and other important files like images and videos in a bundle.
• Parsing HTML and Building the DOM (Document Object Model): Once we get all the required files, the Browser first constructs the DOM, then renders it in a structured and readable format.
• Executing JavaScript: Browsers also provide a JS interpreter like V8 Engine in Chrome. With the help of this, all the JavaScript on the webpage gets executed.
• Layout and Painting: The Browser determines the position of every element to decide the layout of the website.
• Rendering and Compositing: The Browser displays the final product on the screen after all these steps.

Understanding DevTools

Developer tools, commonly known as DevTools, are a built-in feature offered by browsers. As the name suggests, they are used by developers. DevTools can be accessed by right-clicking on any website and then choosing the Inspect option. DevTools offer the following features:

• Elements Panel: Used to inspect and modify HTML and CSS. It is used to see the real-time changes when changing CSS values.
• Console Panel: Displays JS errors, logs, and messages for debugging scripts.
• Network Panel: Analyzes requests, loading times on different network speeds, and performance bottlenecks.
• Sources Panel: Used to debug JavaScript code.
• Application Panel: Manages local storage, session storage, and cookies.

How to Access DevTools?

• Google Chrome and Edge: Press F12 or Ctrl + Shift + I
• Firefox: Press F12 or Ctrl + Shift + I
• Safari: Enable Developer mode in Preferences, then press Option + Command + I

Why Browser Knowledge is Important?

It becomes important for a web developer like us to learn about Browser functioning to make a robust, lightweight, efficient, and optimized website for every screen size, network, and environment. Browsers make this easier for us. Because as we have discussed earlier, there are many tools provided by browsers that are important for us.