From 16ba62fe845a0d6a9ecc9d21a8c64fcf61cf9147 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Thu, 15 Jan 2026 16:03:18 +0100 Subject: [PATCH] feat: add cross-reference links throughout the website MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 15 +++++++++++ src/index.html | 9 +++++-- src/main.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 6c3e406..015f4ac 100644 --- a/src/app.js +++ b/src/app.js @@ -961,6 +961,7 @@ const sectionContent = {

CSS uses selectors to target HTML elements and apply styles. The most common selector is the class selector (.classname), which targets elements with a specific class attribute. You can also use element selectors (p, div), ID selectors (#id), and combinators to select nested elements.

Properties define what aspect of the element to style. Common properties include color for text color, background for backgrounds, padding for internal spacing, and margin for external spacing. Each property accepts specific value types like colors, lengths, or keywords.

Practice CSS Selectors + Selectors Reference →
@@ -1005,6 +1006,7 @@ const sectionContent = {

Flexbox is a one-dimensional layout system for arranging items in rows or columns. Apply display: flex to a container to enable it. Child elements become flex items that can grow, shrink, and align automatically.

Control alignment with justify-content (main axis: flex-start, center, space-between) and align-items (cross axis: stretch, center, flex-end). The gap property adds consistent spacing between items without margins.

Master CSS Flexbox Layout + Flexbox Reference →
@@ -1029,6 +1031,7 @@ const sectionContent = {

CSS Grid is a two-dimensional layout system for creating complex row and column layouts. Enable it with display: grid, then define columns using grid-template-columns. The repeat() function creates multiple tracks, and fr units distribute available space proportionally.

Grid excels at page layouts and card grids. Use grid-template-columns: repeat(3, 1fr) for three equal columns, or repeat(auto-fill, minmax(250px, 1fr)) for responsive columns that wrap automatically.

Explore CSS Grid Layout + Grid Reference →
@@ -1084,6 +1087,7 @@ const sectionContent = {

HTML5 introduced semantic elements that convey meaning about content structure. Use <header> for introductory content, <nav> for navigation links, <main> for primary content, <article> for self-contained compositions, <section> for thematic groupings, and <footer> for closing content.

Semantic markup improves accessibility—screen readers announce element roles. It also helps SEO as search engines better understand your content hierarchy. Replace generic <div> containers with appropriate semantic elements whenever possible.

Learn HTML Semantic Elements + HTML Reference →
@@ -1186,6 +1190,7 @@ const sectionContent = {

Tailwind CSS is a utility-first CSS framework that takes a radically different approach to styling. Instead of writing custom CSS classes like .card or .button, you compose designs using small, single-purpose utility classes directly in your HTML: class="p-4 bg-white rounded shadow".

This approach solves common CSS problems: no more specificity battles, no unused styles, no inventing class names. Tailwind's consistent spacing scale (p-1 through p-12), color palette (blue-500, gray-100), and responsive prefixes (md:, lg:) make building consistent, responsive interfaces fast and predictable.

+

For the underlying CSS concepts, see the CSS Section and CSS Reference.

@@ -1370,6 +1375,8 @@ const referenceContent = { + +

See also: Flexbox Reference | Grid Reference | Selectors Reference

`, selectors: ` @@ -1448,6 +1455,8 @@ const referenceContent = {
  • Universal selector - * (0 points)
    • + +

    Practice: Basic Selectors Lessons | Advanced Selectors

    `, flexbox: ` @@ -1520,6 +1529,8 @@ const referenceContent = { .main { flex: 1; }
    + +

    Practice: Flexbox Lessons | Compare: CSS Grid

    `, grid: ` @@ -1607,6 +1618,8 @@ const referenceContent = { }
    + +

    Practice: Grid Lessons | Compare: Flexbox

    `, html: ` @@ -1723,6 +1736,8 @@ const referenceContent = { + +

    Learn: HTML Section | Style with: CSS Properties

    ` }; diff --git a/src/index.html b/src/index.html index fb45221..8e847b9 100644 --- a/src/index.html +++ b/src/index.html @@ -103,8 +103,9 @@

    Practical Focus

    - Every exercise teaches skills you'll use in real projects—flexbox layouts, form styling, responsive design, and - modern CSS techniques. + Every exercise teaches skills you'll use in real projects—flexbox layouts, + form styling, responsive design, and modern + CSS techniques.

    @@ -307,6 +308,10 @@
  • Tailwind - Apply utility classes directly in HTML
  • HTML - Practice semantic markup and native elements
    • +

    + Jump to: CSS | HTML | Tailwind | + Reference +

    Getting Started

    diff --git a/src/main.css b/src/main.css index fee3aa5..756169c 100644 --- a/src/main.css +++ b/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 {