View Source & Inspect Element

Looking At Other People's Work

These two tools are built into your browser

These tools are invaluable in coding, but for design they answer the question "How'd they do that?"

View Source

View Source provides the raw files, before anything happens

Shows you HTML, but links to other files like CSS or JavaScript

Right-click to show the contextual menu, then click "View Source"
Command-U or Ctrl-U

What Can You Learn from View Source?

Core elements of HTML, and how they're used "in the wild"

How is a page built? Use the find command: Command-F or Ctrl-F to find common elements

Common "Tells" in The Source

Not Just For HTML

One of the most important features is to view and/or link to CSS and JavaScript

This can help you see how others design their files and their code

Inspect Element

View Source, but for the DOM, not the files

Updates in real-time

Allows you to edit things like HTML and CSS in-line, as well as run JavaScript in the Console

The Elements Pane

A screenshot from Chrome DevTools showing the rendered DOM in the top-left, the styles in the top-right, and the Console on the bottom.
The 3 sections of the Elements Pane: the rendered DOM (red), the active styles (green), and the JavaScript Console (blue)

The Computed CSS Sub-Pane

A screenshot from Chrome DevTools showing the box model of the selected element in the top-right and the computed styles in the bottom-right.
In the Styles Pane, clicking "Computed" brings up two new tools: the box model chart (red) and the computed styles (green)

The Lighthouse Pane

A screenshot from Chrome DevTools showing the Lighthouse scores for in Performance, Accessibility, Best Practices, and SEO.
In the Lighthouse Pane, after running the report, you can get reports and action items for Performance, Accessibility, coding Best Practices, SEO, and PWA support.