Description
In this course, you will learn how to use Chrome DevTools to improve your web development workflow. The course is divided into several topics and quizzes, each covering a different aspect of the DevTools.
First, you will learn about the DevTools introduction, including how to open the DevTools and explore the different options.
Next, you will dive into the Elements panel, which allows you to inspect and modify the HTML and CSS of your web page. You will also learn about the CSS box model, which is used to calculate the size and position of elements on a web page.
You will then be challenged with a Web Scavenger Hunt 1, in which you will use the DevTools to debug and troubleshoot a web page using the Console JavaScript, Code Snippets, and Sources FileSystem panels.
Another Web Scavenger Hunt 2 will be guided to help you understand how to use the Network panel to debug and optimize the loading performance of a web page, the Application tab to inspect web storage, and the Audit tab to generate performance report.
In the last topic of the course, you will learn about useful shortcuts and ways to customize your DevTools experience. You will also be provided with the opportunity to download both the Chrome DevTools and Source Codes.
Throughout the course, you will have the opportunity to test your understanding with interactive quizzes and exercises. By the end of the course, you will have a solid understanding of how to use Chrome DevTools to improve your web development skills.
