Open src/index.html in VS Code. Read the entire file top to bottom.
Identify the structure:
<!DOCTYPE html> <!-- Tells the browser: "This is HTML5" -->
<html> <!-- Root element -->
<head> <!-- Metadata (invisible) -->
...
</head>
<body> <!-- Content (visible) -->
...
</body>
</html>
Find the <title> tag (or notice it's missing). Fix it:
<title>PixelCraft — Image Editor</title>
Save and check the browser — the tab title should update immediately.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A browser-based image editor with professional-grade tools">
| Meta Tag | What It Does |
|---|---|
| charset="UTF-8" | Character encoding — supports all languages |
| viewport | Makes the page responsive on mobile devices |
| description | Text shown under your title in search results |
Open DevTools (F12) → Elements tab: see the parsed HTML tree. This is the DOM — Document Object Model.
Right-click any element in the browser → "Inspect" → see its HTML in DevTools.
Try: double-click any text node in Elements → edit it live. The page changes instantly (but it's not saved — refresh to reset).
git switch -c bugfix/PIXELCRAFT-001-fix-page-title
# ... make changes ...
git add src/index.html
git commit -m "Fix page title and add meta tags (PIXELCRAFT-001)"
git push origin bugfix/PIXELCRAFT-001-fix-page-title
# Create PR → Review → Merge → Close ticket ✅
The DOM is a tree data structure.
Every HTML tag is a node. Nesting creates parent-child relationships. <html> is the root. <head> and <body> are its children.