Files, folders and DevTools

Objectives

  • Organize a simple web project
  • Open DevTools
  • Inspect the DOM and styles

Lesson

A local site often starts with index.html, styles.css, script.js. Lowercase, hyphenated, space-free names avoid surprises on Linux servers.

DevTools (F12 / Cmd+Option+I): Elements for the DOM, Styles for computed CSS, Console for JS errors, Network for loads.

The Accessibility panel and color contrast already prepare you to build readable UIs — a theme for the whole year.

Pro habit: when a bug appears, open the Console before rewriting everything.

Assessment

Assessment

1. Where do you see JavaScript errors?