feat: add cross-reference links throughout the website

- Add "See also" links to all 5 reference pages connecting related content
- Add reference links to section content (Selectors, Flexbox, Grid, HTML)
- Add inline links to landing page features section
- Add quick navigation links to help dialog
- Add CSS styling for .ref-see-also, .topic-ref, .section-see-also, .help-nav-links
- Fix spacing between reference sections (add margin-top)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

src/app.js

@@ -961,6 +961,7 @@ const sectionContent = {
 				<p>CSS uses selectors to target HTML elements and apply styles. The most common selector is the class selector (<code>.classname</code>), which targets elements with a specific class attribute. You can also use element selectors (<code>p</code>, <code>div</code>), ID selectors (<code>#id</code>), and combinators to select nested elements.</p>
 				<p>Properties define what aspect of the element to style. Common properties include <code>color</code> for text color, <code>background</code> for backgrounds, <code>padding</code> for internal spacing, and <code>margin</code> for external spacing. Each property accepts specific value types like colors, lengths, or keywords.</p>
 				<a href="#css-basic-selectors/0" class="topic-link">Practice CSS Selectors</a>
+				<a href="#reference/selectors" class="topic-ref">Selectors Reference →</a>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
@@ -1005,6 +1006,7 @@ const sectionContent = {
 				<p>Flexbox is a one-dimensional layout system for arranging items in rows or columns. Apply <code>display: flex</code> to a container to enable it. Child elements become flex items that can grow, shrink, and align automatically.</p>
 				<p>Control alignment with <code>justify-content</code> (main axis: <code>flex-start</code>, <code>center</code>, <code>space-between</code>) and <code>align-items</code> (cross axis: <code>stretch</code>, <code>center</code>, <code>flex-end</code>). The <code>gap</code> property adds consistent spacing between items without margins.</p>
 				<a href="#flexbox/0" class="topic-link">Master CSS Flexbox Layout</a>
+				<a href="#reference/flexbox" class="topic-ref">Flexbox Reference →</a>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
@@ -1029,6 +1031,7 @@ const sectionContent = {
 				<p>CSS Grid is a two-dimensional layout system for creating complex row and column layouts. Enable it with <code>display: grid</code>, then define columns using <code>grid-template-columns</code>. The <code>repeat()</code> function creates multiple tracks, and <code>fr</code> units distribute available space proportionally.</p>
 				<p>Grid excels at page layouts and card grids. Use <code>grid-template-columns: repeat(3, 1fr)</code> for three equal columns, or <code>repeat(auto-fill, minmax(250px, 1fr))</code> for responsive columns that wrap automatically.</p>
 				<a href="#grid/0" class="topic-link">Explore CSS Grid Layout</a>
+				<a href="#reference/grid" class="topic-ref">Grid Reference →</a>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
@@ -1084,6 +1087,7 @@ const sectionContent = {
 				<p>HTML5 introduced semantic elements that convey meaning about content structure. Use <code>&lt;header&gt;</code> for introductory content, <code>&lt;nav&gt;</code> for navigation links, <code>&lt;main&gt;</code> for primary content, <code>&lt;article&gt;</code> for self-contained compositions, <code>&lt;section&gt;</code> for thematic groupings, and <code>&lt;footer&gt;</code> for closing content.</p>
 				<p>Semantic markup improves accessibility—screen readers announce element roles. It also helps SEO as search engines better understand your content hierarchy. Replace generic <code>&lt;div&gt;</code> containers with appropriate semantic elements whenever possible.</p>
 				<a href="#html-elements/0" class="topic-link">Learn HTML Semantic Elements</a>
+				<a href="#reference/html" class="topic-ref">HTML Reference →</a>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
@@ -1186,6 +1190,7 @@ const sectionContent = {
 		<div class="section-overview">
 			<p><strong>Tailwind CSS</strong> is a utility-first CSS framework that takes a radically different approach to styling. Instead of writing custom CSS classes like <code>.card</code> or <code>.button</code>, you compose designs using small, single-purpose utility classes directly in your HTML: <code>class="p-4 bg-white rounded shadow"</code>.</p>
 			<p>This approach solves common CSS problems: no more specificity battles, no unused styles, no inventing class names. Tailwind's consistent spacing scale (<code>p-1</code> through <code>p-12</code>), color palette (<code>blue-500</code>, <code>gray-100</code>), and responsive prefixes (<code>md:</code>, <code>lg:</code>) make building consistent, responsive interfaces fast and predictable.</p>
+			<p class="section-see-also">For the underlying CSS concepts, see the <a href="#css">CSS Section</a> and <a href="#reference/css">CSS Reference</a>.</p>
 		</div>
 
 		<div class="topic-row">
@@ -1370,6 +1375,8 @@ const referenceContent = {
 				</tbody>
 			</table>
 		</section>
+
+		<p class="ref-see-also">See also: <a href="#reference/flexbox">Flexbox Reference</a> | <a href="#reference/grid">Grid Reference</a> | <a href="#reference/selectors">Selectors Reference</a></p>
 	`,
 
 	selectors: `
@@ -1448,6 +1455,8 @@ const referenceContent = {
 				<li><strong>Universal selector</strong> - <code>*</code> (0 points)</li>
 			</ol>
 		</section>
+
+		<p class="ref-see-also">Practice: <a href="#css-basic-selectors/0">Basic Selectors Lessons</a> | <a href="#css-advanced-selectors/0">Advanced Selectors</a></p>
 	`,
 
 	flexbox: `
@@ -1520,6 +1529,8 @@ const referenceContent = {
 .main { flex: 1; }</code></pre>
 			</div>
 		</section>
+
+		<p class="ref-see-also">Practice: <a href="#flexbox/0">Flexbox Lessons</a> | Compare: <a href="#reference/grid">CSS Grid</a></p>
 	`,
 
 	grid: `
@@ -1607,6 +1618,8 @@ const referenceContent = {
 }</code></pre>
 			</div>
 		</section>
+
+		<p class="ref-see-also">Practice: <a href="#grid/0">Grid Lessons</a> | Compare: <a href="#reference/flexbox">Flexbox</a></p>
 	`,
 
 	html: `
@@ -1723,6 +1736,8 @@ const referenceContent = {
 				</tbody>
 			</table>
 		</section>
+
+		<p class="ref-see-also">Learn: <a href="#html">HTML Section</a> | Style with: <a href="#reference/css">CSS Properties</a></p>
 	`
 };
 

src/index.html

@@ -103,8 +103,9 @@
 							<div class="feature-text">
 								<h3>Practical Focus</h3>
 								<p>
-									Every exercise teaches skills you'll use in real projects—flexbox layouts, form styling, responsive design, and
+									Every exercise teaches skills you'll use in real projects—<a href="#reference/flexbox">flexbox layouts</a>,
-									modern CSS techniques.
+									<a href="#html-forms-basic/0">form styling</a>, <a href="#responsive-design/0">responsive design</a>, and modern
+									CSS techniques.
 								</p>
 							</div>
 						</div>
@@ -307,6 +308,10 @@
 						<li data-i18n-html="modeTailwind"><strong>Tailwind</strong> - Apply utility classes directly in HTML</li>
 						<li data-i18n-html="modeHtml"><strong>HTML</strong> - Practice semantic markup and native elements</li>
 					</ul>
+					<p class="help-nav-links">
+						Jump to: <a href="#css">CSS</a> | <a href="#html">HTML</a> | <a href="#tailwind">Tailwind</a> |
+						<a href="#reference/css">Reference</a>
+					</p>
 
 					<h4 data-i18n="gettingStartedTitle">Getting Started</h4>
 					<p data-i18n="gettingStartedText">

src/main.css

@@ -1394,6 +1394,25 @@ input:checked + .toggle-slider::before {
 	border: 1px solid var(--border-color);
 }
 
+.help-nav-links {
+	font-size: 0.9rem;
+	color: var(--light-text);
+	padding: var(--spacing-sm) var(--spacing-md);
+	background: var(--bg-color);
+	border-radius: var(--border-radius-sm);
+	margin-top: var(--spacing-sm);
+}
+
+.help-nav-links a {
+	color: var(--primary-color);
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.help-nav-links a:hover {
+	text-decoration: underline;
+}
+
 .dialog-actions {
 	display: flex;
 	justify-content: flex-end;
@@ -1894,6 +1913,36 @@ input:checked + .toggle-slider::before {
 	transform: translateX(3px);
 }
 
+/* Secondary reference link in topic sections */
+.topic-ref {
+	display: block;
+	margin-top: 0.75rem;
+	color: var(--light-text);
+	font-size: 0.9rem;
+	text-decoration: none;
+}
+
+.topic-ref:hover {
+	color: var(--primary-color);
+	text-decoration: underline;
+}
+
+/* See-also in section overviews */
+.section-see-also {
+	margin-top: var(--spacing-md);
+	font-size: 0.9rem;
+	color: var(--light-text);
+}
+
+.section-see-also a {
+	color: var(--primary-color);
+	text-decoration: none;
+}
+
+.section-see-also a:hover {
+	text-decoration: underline;
+}
+
 /* Inline code in topic text */
 .topic-text code {
 	background: var(--primary-bg-light);
@@ -2065,9 +2114,14 @@ input:checked + .toggle-slider::before {
 }
 
 .ref-section {
+	margin-top: var(--spacing-xl);
 	margin-bottom: var(--spacing-xl);
 }
 
+.ref-section:first-of-type {
+	margin-top: 0;
+}
+
 .ref-section h2 {
 	font-size: 1.2rem;
 	margin-bottom: var(--spacing-md);
@@ -2142,6 +2196,25 @@ input:checked + .toggle-slider::before {
 	margin: var(--spacing-md) 0;
 }
 
+/* Cross-reference links in reference pages */
+.ref-see-also {
+	margin-top: var(--spacing-lg);
+	padding-top: var(--spacing-md);
+	border-top: 1px solid var(--border-color);
+	font-size: 0.9rem;
+	color: var(--light-text);
+}
+
+.ref-see-also a {
+	color: var(--primary-color);
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.ref-see-also a:hover {
+	text-decoration: underline;
+}
+
 /* Responsive reference tables */
 @media (max-width: 600px) {
 	.ref-table {