Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 7 / 8Browser DevTools
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Browser DevTools
01 / 08Overview

Browser DevTools

You'll learn to open the browser's DevTools and use them to look inside any page.

Why it mattersDevTools show you what the browser actually did, which is the fastest way to find why a page looks wrong.
about 60 min·needs: Layout with flexbox
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
HTML & CSS for absolute beginners: Dev toolsKevin Powell · YouTube · 5 min · English
MMamun's noteFive minutes. Open DevTools on your own profile page and copy what he does as you watch.
Docs
View and change CSSChrome DevTools docs · 20 min · English
MMamun's noteA hands-on tutorial on the page itself. Do "View an element's CSS" and "Add a CSS declaration to an element". Skip pseudostates for now.
DocsOptional
Console overviewChrome DevTools docs · 10 min · English
MMamun's noteRead "Open the Console" and "Viewing logged messages". "Running JavaScript" comes in the next phase.
VideoOptional
Inspect network activity, Chrome DevTools 101Chrome for Developers · YouTube · 9 min · English
MMamun's noteWatch 1:05–3:26 to see the list of requests. Skip throttling and blocking for now.
03 / 08

Explanation

Your page looks wrong. The heading is the wrong colour, or a photo does not show. You stare at your code and it looks fine. You need to see what the browser sees, not what you meant.

Every browser has a toolbox built in, called DevTools. Think of it like a mechanic opening the bonnet of a CNG. From the outside you only see that it will not start. Under the bonnet you can see which part is the problem.

Open it with a right-click on anything and Inspect, or with Cmd + Option + I on a Mac and Ctrl + Shift + I on Windows. The three panels you need now:

  • Elements: your HTML as the browser built it. Click an element and the Styles pane shows every CSS rule on it. Rules that lost are crossed out. You can change a value and see it right away.
  • Console: messages and errors. A red line means something broke. It tells you the file and line.
  • Network: every file the page asked for, with its status code. A red 404 means a file is missing.
<link rel="stylesheet" href="styles.css">
<img src="Photo.jpg" alt="My photo">

If the real files are style.css and photo.jpg, nothing shows an error on the page. But the Network tab shows two red 404s, and you find both typos in a minute.

People often fix a problem perfectly in DevTools, close the tab, and lose it. Changes in DevTools are only in your browser, only until you refresh. When it looks right, copy the change into your real file.

When something looks wrong, check in this order: Console for red errors, Network for 404s, then Elements to see which CSS rule won.

Words to recognise
DevToolsinspectElements panelStylesConsoleerrorNetwork tabstatus code
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

index.html4 notes
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Nusrat</title>
<link rel="stylesheet" href="styles.css">
Mentor note · line 5
The real file is style.css. The Network tab shows styles.css in red with a 404. One letter, no styles at all.
6 </head>
7 <body>
<h1 class="title">Nusrat Jahan</h1>
<img src="Photo.jpg" alt="Nusrat in front of the library">
<p>CSE, second year.</p>
11 </body>
12</html>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3You fixed a colour in the DevTools Styles pane, then refreshed. What happens?
  2. 2 / 3An image does not show. Where is the quickest place to see if the file was found?
  3. 3 / 3In the Styles pane, a color rule is crossed out. What does that mean?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Browser DevTools?

08 / 08

Done

You can now
Inspect an element, try a CSS change live, and find a red error in the Console or a 404 in the Network tab.
Next: Put your page online Back to Phase 1
On this page
  1. 01Browser DevTools
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Browser DevTools
01 / 08Overview

Browser DevTools

You'll learn to open the browser's DevTools and use them to look inside any page.

Why it mattersDevTools show you what the browser actually did, which is the fastest way to find why a page looks wrong.
about 60 min·needs: Layout with flexbox
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
HTML & CSS for absolute beginners: Dev toolsKevin Powell · YouTube · 5 min · English
MMamun's noteFive minutes. Open DevTools on your own profile page and copy what he does as you watch.
Docs
View and change CSSChrome DevTools docs · 20 min · English
MMamun's noteA hands-on tutorial on the page itself. Do "View an element's CSS" and "Add a CSS declaration to an element". Skip pseudostates for now.
DocsOptional
Console overviewChrome DevTools docs · 10 min · English
MMamun's noteRead "Open the Console" and "Viewing logged messages". "Running JavaScript" comes in the next phase.
VideoOptional
Inspect network activity, Chrome DevTools 101Chrome for Developers · YouTube · 9 min · English
MMamun's noteWatch 1:05–3:26 to see the list of requests. Skip throttling and blocking for now.
03 / 08

Explanation

Your page looks wrong. The heading is the wrong colour, or a photo does not show. You stare at your code and it looks fine. You need to see what the browser sees, not what you meant.

Every browser has a toolbox built in, called DevTools. Think of it like a mechanic opening the bonnet of a CNG. From the outside you only see that it will not start. Under the bonnet you can see which part is the problem.

Open it with a right-click on anything and Inspect, or with Cmd + Option + I on a Mac and Ctrl + Shift + I on Windows. The three panels you need now:

  • Elements: your HTML as the browser built it. Click an element and the Styles pane shows every CSS rule on it. Rules that lost are crossed out. You can change a value and see it right away.
  • Console: messages and errors. A red line means something broke. It tells you the file and line.
  • Network: every file the page asked for, with its status code. A red 404 means a file is missing.
<link rel="stylesheet" href="styles.css">
<img src="Photo.jpg" alt="My photo">

If the real files are style.css and photo.jpg, nothing shows an error on the page. But the Network tab shows two red 404s, and you find both typos in a minute.

People often fix a problem perfectly in DevTools, close the tab, and lose it. Changes in DevTools are only in your browser, only until you refresh. When it looks right, copy the change into your real file.

When something looks wrong, check in this order: Console for red errors, Network for 404s, then Elements to see which CSS rule won.

Words to recognise
DevToolsinspectElements panelStylesConsoleerrorNetwork tabstatus code
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

index.html4 notes
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Nusrat</title>
<link rel="stylesheet" href="styles.css">
Mentor note · line 5
The real file is style.css. The Network tab shows styles.css in red with a 404. One letter, no styles at all.
6 </head>
7 <body>
<h1 class="title">Nusrat Jahan</h1>
<img src="Photo.jpg" alt="Nusrat in front of the library">
<p>CSE, second year.</p>
11 </body>
12</html>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3You fixed a colour in the DevTools Styles pane, then refreshed. What happens?
  2. 2 / 3An image does not show. Where is the quickest place to see if the file was found?
  3. 3 / 3In the Styles pane, a color rule is crossed out. What does that mean?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Browser DevTools?

08 / 08

Done

You can now
Inspect an element, try a CSS change live, and find a red error in the Console or a 404 in the Network tab.
Next: Put your page online Back to Phase 1
On this page
  1. 01Browser DevTools
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read

Your page looks wrong. The heading is the wrong colour, or a photo does not show. You stare at your code and it looks fine. You need to see what the browser sees, not what you meant.

Every browser has a toolbox built in, called DevTools. Think of it like a mechanic opening the bonnet of a CNG. From the outside you only see that it will not start. Under the bonnet you can see which part is the problem.

Open it with a right-click on anything and Inspect, or with Cmd + Option + I on a Mac and Ctrl + Shift + I on Windows. The three panels you need now:

  • Elements: your HTML as the browser built it. Click an element and the Styles pane shows every CSS rule on it. Rules that lost are crossed out. You can change a value and see it right away.
  • Console: messages and errors. A red line means something broke. It tells you the file and line.
  • Network: every file the page asked for, with its status code. A red 404 means a file is missing.
<link rel="stylesheet" href="styles.css">
<img src="Photo.jpg" alt="My photo">

If the real files are style.css and photo.jpg, nothing shows an error on the page. But the Network tab shows two red 404s, and you find both typos in a minute.

People often fix a problem perfectly in DevTools, close the tab, and lose it. Changes in DevTools are only in your browser, only until you refresh. When it looks right, copy the change into your real file.

When something looks wrong, check in this order: Console for red errors, Network for 404s, then Elements to see which CSS rule won.

Words to recognise
DevToolsinspectElements panelStylesConsoleerrorNetwork tabstatus code

Your page looks wrong. The heading is the wrong colour, or a photo does not show. You stare at your code and it looks fine. You need to see what the browser sees, not what you meant.

Every browser has a toolbox built in, called DevTools. Think of it like a mechanic opening the bonnet of a CNG. From the outside you only see that it will not start. Under the bonnet you can see which part is the problem.

Open it with a right-click on anything and Inspect, or with Cmd + Option + I on a Mac and Ctrl + Shift + I on Windows. The three panels you need now:

  • Elements: your HTML as the browser built it. Click an element and the Styles pane shows every CSS rule on it. Rules that lost are crossed out. You can change a value and see it right away.
  • Console: messages and errors. A red line means something broke. It tells you the file and line.
  • Network: every file the page asked for, with its status code. A red 404 means a file is missing.
<link rel="stylesheet" href="styles.css">
<img src="Photo.jpg" alt="My photo">

If the real files are style.css and photo.jpg, nothing shows an error on the page. But the Network tab shows two red 404s, and you find both typos in a minute.

People often fix a problem perfectly in DevTools, close the tab, and lose it. Changes in DevTools are only in your browser, only until you refresh. When it looks right, copy the change into your real file.

When something looks wrong, check in this order: Console for red errors, Network for 404s, then Elements to see which CSS rule won.

Words to recognise
DevToolsinspectElements panelStylesConsoleerrorNetwork tabstatus code