Devtools Pro: The Basics of Chrome Developer Tools

A Quick Start Guide to Editing Live Web Pages

What you’ll learn

Devtools Pro: The Basics of Chrome Developer Tools

Navigate around in the DevTools and make live changes to HTML / CSS and Javascript.
Use awesome built-in tools like the color picker and text-shadow editor!
Write simple Javascript commands and learn the basics of how to debug your code.
Understand how to simulate Mobile Devices.
Get info to improve page load times with Audits
Write larger blocks of test code in the Snippets panel

Requirements

The course is for beginners!
You’ll get the most out of it if you know basic HTML, CSS, and Javascript.

Description

This course is a simple introduction to the

Google Chrome Developer Tools

. In this course, we’ll cover the basics of dev tools which are

essential to productive web development

.

And pssst… The

course has a humourous twist

–your instructor will teach you about amazing colors like blanched almond and cornflower blue!

When you’re finished you’ll be able to:

Use the elements panel to

modify and update live webpages

with tools like the color picker and text-shadow editor.
Type simple

Javascript commands

in the console.
Write and test larger blocks of code

with the snippets panel.
Understand how to

stop and step through code

with breakpoints and basic debugging.
Learn how to

simulate mobile

devices for responsive development.
Use the audits panel to get useful information about

improving

page load time

.

This is a free course meant to cover the absolute basics

. After completing this, you’ll have to tools and know-how to become a DevTools wizard with my follow-up class, DevTools 2017: Beginner to Expert with Google Chrome Developer tools.