Optimize your website with DevTools (OpenClassrooms)

Optimize your website with DevTools (OpenClassrooms)
Free Course
Categories
Effort
Certification
Languages
There are no technical prerequisites, but you'll get the most out of this course if you have a general web vocabulary.
Misc
Optimize your website with DevTools (OpenClassrooms)
There's so much going on behind all the websites that you visit. Wouldn't you love to look under the hood sometime and see the elements and functions that make them turn? Enter Developer Tools! You can use them in Chrome, Firefox, or another browser of your choice. In this course, we'll be looking at the Chrome developer tools in particular.

They'll let you:

- examine and modify HTML elements.

- add and test out CSS style rules.

- see the page's JavaScript functions.

- identify which items load quickly or slowly.

- whether the website you're on is secure.

- what a developer could do to improve their code.

There's even more besides that, and at the end of the course you'll be able to tie it all together and analyze the elements and performance of your favorite website. Sign up this course to harness the power of DevTools (whether you're a beginner or not)!


Learning goals:

By the end of this course, you'll learn how to open the developer tools and perform the actions listed above.


Part #1 - Understand DevTools

1. Set up developer tools

2. Breakdown the tools view

3. Preview using different devices

4. Tweak device details

Quiz: Basics and devices


Part #2 - Explore DevTools tabs

1. Elements

2. Console

3. Sources

4. Network

5. Timeline

6. Profiles

7. Resources

8. Security

9. Audits

Activity: Breakdown your favorite website



Free Course
There are no technical prerequisites, but you'll get the most out of this course if you have a general web vocabulary.