Week 1

Introduction to HTML

Semantic HTML

Forms

Accessibility (a11y)

DOM Manipulation

DevTools Basics

Practice

Assignment

Back to Track

What are DevTools?

Browser Developer Tools (DevTools) are built-in debugging and inspection tools available in all modern browsers. They let you inspect HTML and CSS, debug JavaScript, monitor network activity, test accessibility, and much more. Learning to use DevTools effectively makes you a faster, more efficient developer.

Every major browser has DevTools:

This lesson focuses on Chrome DevTools, but the concepts apply to all browsers.

<aside> 💡

DevTools are your debugging partner. Professionals use them constantly - not just when things break, but to understand how websites work, test changes quickly, and learn from other developers' code. In fact, most developers have them open by default when building web applications.

</aside>

Opening DevTools

Three ways to open DevTools:

  1. Right-click → "Inspect" or "Inspect Element"
  2. Keyboard shortcuts:
  3. Browser menu → More Tools → Developer Tools

Quick tip: Right-click directly on an element and select "Inspect" to open DevTools with that element already selected.

<aside> ⌨️

Hands On

Open any website and press F12 (or Cmd + Option + I on Mac). Notice the DevTools panel appears - you can dock it at the bottom, right side, or in a separate window. Try each docking position to find what works best for you.

</aside>

Elements Panel

Inspect and modify HTML structure and CSS styling in real-time.

Inspecting Elements

Editing HTML

<aside> ⌨️

Hands On

  1. Inspect a heading
  2. Double-click the text and change it
  3. Press F2 and change <h1> to <h2>
  4. Refresh the page - changes disappear (they're temporary) </aside>

Console Panel

Run JavaScript, view errors, and test code interactively.

Console Messages

console.log("Normal message");
console.warn("Warning message");
console.error("Error message");
console.table([{name: "Alice", age: 25}]);

<aside> ⌨️

Hands On

  1. Open Console tab
  2. Type: console.log("Hello!")
  3. Try: console.warn("Warning") and console.error("Error")
  4. Notice different colors and icons </aside>

Network Panel

View all files loaded by the page: HTML, CSS, JavaScript, images, API requests.

https://www.youtube.com/watch?v=e1gAyQuIFQo

Viewing Network Activity

  1. Open Network tab
  2. Refresh the page
  3. See all requests with:

Filter by type:

<aside> ⌨️

Hands On

  1. Open Network panel and refresh the page
  2. Click "Img" filter - see only images
  3. Click "JS" - see JavaScript files
  4. Type "logo" in filter box - see files with "logo" in name
  5. Check total size and request count at the bottom </aside>

Throttling Network Speed

Test on slower connections:

<aside> ⌨️

</aside>

Accessibility Panel

Lighthouse Audits

Audit your page for accessibility issues:

  1. Click "Lighthouse" tab
  2. Check "Accessibility" category
  3. Click "Analyze page load"
  4. Review score and failed audits

<aside> ⌨️

</aside>

Device Mode (Responsive Testing)

Test different screen sizes and devices.

Enable: Click device icon (📱) or press Cmd/Ctrl + Shift + M

Features:

<aside> ⌨️

</aside>

Essential Shortcuts

Global:

Elements: