DevTools Tutorial

The Big Idea

DevTools is built into every browser. It lets you inspect, edit, and debug HTML, CSS, and JavaScript in real time — without touching your code files. Every developer uses it every day.

Your Roadmap

Watch and follow along

Step 1: Get the starter files

Clone the resources repo and open it in VS Code:

git clone https://github.com/dev-academy-foundations/resources.git
cd resources
code .

Look for the JS Devtools Crashcourse Resources folder inside.

Step 2: Follow the tutorial

Watch and follow along with: Google Chrome DevTools Crash Course (YouTube)

Use the cloned files to follow along - the files accompanying the YouTube video differ slightly from the tutorial.

Tip: increase the playback speed if the pace feels slow.

Explore on your own

Go to any website you like. Open DevTools (Command + Option + I on Mac, F12 on Windows).

Try at least two of these:

• Change the text of a heading on the page
• Change the background colour of an element
• Change the font size of a paragraph
• Hide an element (right-click it in the Elements panel → Hide element)
• Switch to mobile view using the device toolbar (the phone/tablet icon at the top of DevTools)

Changes you make in DevTools are not permanent — they reset when you refresh. This makes it a safe place to experiment.

How to know you've nailed it

The Big Idea (revisited)

DevTools is built into every browser. You now know how to open it, inspect and edit HTML and CSS on any live site, and check how a page looks on mobile — all without touching a code file.

Reflect

Open sprint-2/my-reflections-sprint-2.md and add your answers under the DevTools Tutorial heading.

Stage, commit, and push.

Extra Resources

• ◎ Kirupa — JS, the browser and the DOM
• ◎ DevTools tips and tricks (freeCodeCamp)