- A Quick Start Guide to Editing Live Web Pages
- Free tutorial
- Rating: 4.3 out of 54.3 (7,495 ratings)
- 62,113 students
- 44min of on-demand video
- Created by Rocco Balsamo
- English
What you’ll learn
- Navigate around in the DevTools and make live changes to HTML / CSS and Javascript.
- Use awesome built-in tools like the colorpicker 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 devtools which are absolutely essential to productive web development.
And pssst… The course has a humourous twist–your instructor will teach you about amazing colors like blanchedalmond and cornflowerblue!
When you’re finished you’ll be able to:
- Use the elements panel to modify and update live webpages with tools like the colorpicker 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 knowhow to become a DevTools wizard with my followup class, DevTools 2017: Beginner to Expert with Google Chrome Developer tools.
Who this course is for:
- Front End Developers
- Back End Developers Looking to Try Front End
- UI/UX Designers
- Software Engineers
- Project / Product Managers
- Anyone looking for a quick way to understand websites and web applications
Show less
Course content
3 sections • 18 lectures • 45m total lengthCollapse all sections
The Basics8 lectures • 22min
- What We’ll Accomplish02:17
- Introduction & The Elements Panel06:40
- Elements Panel Exercise00:21
- A Quick Tour of DevTools03:51
- After your tour5 questions
- Using the Console to Run Javascript03:09
- Exercise: Color Changes with Javascript00:11
- Sources Tab and Basic Debugging02:49
- Breakpoints / Debugging3 questions
- Snippets: The Console on Steroids02:13
Digging Deeper9 lectures • 19min
- Cookies and Local Storage with the Application Tab02:43
- Local Storage Exercise00:23
- A Peak at Network Calls02:08
- Network Calls Exercise00:20
- Page Load Speed with Audits01:47
- Performance, Memory and Security03:02
- The Most Useful Keyboard Shortcuts02:07
- Styling Editors06:45
- Styling Editors Exercise00:14
Bonus1 lecture • 5min
- Bonus! Coupon at 1:15! Other Resources & My Twitter04:52
