Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

Website Optimization Course

via Treehouse

Overview

In this course we'll cover tools needed in keeping your website in top shape. These tools will help you perform tasks like debugging a problem to improving your page load times.

What you'll learn

  • Overview of the Chrome DevTools
  • Website optimization using the Chrome DevTools
  • Code debugging with the Chrome DevTools

Syllabus

Chrome DevTools Basics

The Google Chrome web browser includes a built in set of features for web designers and developers called the Chrome DevTools. Using the DevTools, any webpage can be inspected for bugs and profiled on a number of performance characteristics. Some of the most powerful panels in the DevTools include the Elements panel which allows for interaction with DOM tree and styling, as well as the Console panel, which makes it trivial to access JavaScript functions and test out new front-end code.

Chevron 22 steps
  • Accessing the DevTools

    2:52

  • Accessing the DevTools

    4 questions

  • The Elements Panel

    6:31

  • The Elements Panel

    4 questions

  • The Resources Panel

    3:36

  • The Resources Panel

    4 questions

  • The Network Panel

    8:50

  • The Network Panel

    4 questions

  • The Sources Panel

    3:29

  • The Sources Panel

    4 questions

  • The Timeline Panel

    5:26

  • The Timeline Panel

    4 questions

  • The Profiles Panel

    5:44

  • The Profiles Panel

    4 questions

  • The Audits Panel

    2:29

  • The Audits Panel

    3 questions

  • The Console Panel

    6:59

  • The Console Panel

    5 questions

  • The Console API

    3:48

  • The Console API

    3 questions

  • Adjusting Settings

    4:34

  • Adjusting Settings

    3 questions

  • Extra Credit

    Open the Chrome DevTools on your favorite website and then do the following:

    • Use the Elements panel to inspect the HTML and CSS.
    • Use the Sources panel and try modifying some of the content or styling on the page.
    • Open the Network panel and refresh the browser. Then, try to see if you can find any areas where the front-end performance could be improved.

Related Courses

Reviews

Start your review of Website Optimization Course

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free