H. C. Andersen Website

Outcome

Build a four-page H. C. Andersen website from an empty folder. You will create HTML in small stages, add CSS in layers, and check the browser after every meaningful change.

The completed website has a Home page, a Fairy Tales page, a Profile page, and a Bibliography page. The pages share one stylesheet and one navigation menu.

This tutorial supplies all required page text, facts, and bibliography entries. You do not need outside research to complete the required website. Images are not required.

What you will practice

Create and name HTML and CSS files in one project folder.
Use HTML elements to give a page a meaningful structure.
Connect pages with relative links and update a shared navigation menu.
Use CSS selectors to change color, spacing, layout, focus, and narrow-screen behavior.
Use Emmet to generate repeated HTML, then replace its content deliberately.
Check a website in the browser instead of assuming that saved code works.

How to use this tutorial

This is a construction tutorial, not a finished-code download. Every code example changes one part of a file. Type the first version of each pattern so you can see where it belongs and what it changes. Copy only parts that are genuinely repeated, such as a working header or footer.

Before each code change, read the explanation. Save the file, reload the browser, and perform the stated check. A blank or broken result is useful evidence: compare the file name, the changed code, and the expected result before you change something else.

What you will make

File	Purpose
`index.html`	Home page and short introduction
`fairy-tales.html`	Fairy tales, a novel, and travel writing
`profile.html`	A profile with labeled facts
`bibliography.html`	A bibliography table
`style.css`	Shared styles for all four pages

Starting point

Before you start

A Windows computer and a current browser.
VS Code, or another code editor that supports Emmet.
Permission to create files in a folder that you can find again.

Current state: You have no project folder or website files yet.
First action: Create a folder named hc-andersen-website. Open that exact folder in VS Code.
First checkpoint: index.html opens in a browser and shows a Home link, a main heading, and a footer.
Help trigger: Stop and ask for help if VS Code shows a different folder, the browser shows HTML as text, or a saved change does not appear after a reload.

Working setup before Step 1

Keep the project folder open in VS Code and keep a browser window open beside it. You will repeat the same work loop throughout the tutorial:

Edit one file in VS Code.
Save with Ctrl+S.
Open or reload the page in the browser with Ctrl+R.
Compare the visible result with the stated check.

VS Code is where you change the files. The browser is where you check the website. Return to VS Code after every browser check.

1. Create the project folder

Press Windows+E to open File Explorer.
Open Documents, select New → Folder, and name it hc-andersen-website.
In VS Code, select File → Open Folder… and select hc-andersen-website.
In VS Code Explorer, create two files: index.html and style.css.

hc-andersen-website/
├── index.html
└── style.css

If the Explorer panel is not visible, select View → Explorer or press Ctrl+Shift+E.

2. Build the Home page HTML

Open index.html. Type ! in the empty file. When VS Code shows an Emmet Abbreviation suggestion, press Enter or Tab. Emmet creates the standard HTML document. If no suggestion appears, press Ctrl+Space after !. Stop and ask for help if it still does not appear.

Keep the outer document structure that Emmet creates. This is an outline to compare with your file, not a complete file to paste:

<!doctype html>
<html lang="en">
  <head>
    <!-- Document information goes here. -->
  </head>
  <body>
    <!-- Visible page content goes here. -->
  </body>
</html>

Set up the document information

Keep the first <!doctype html> line and the closing </html> tag. Then do these two replacements:

Replace only the opening html tag.
Select from the opening <head> tag through the matching </head> tag, including both tags. Replace that selected head block with the code below.

Do not change the <body> tags in this step.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H. C. Andersen | Home</title>
    <link rel="stylesheet" href="style.css">
  </head>

lang="en" identifies the page language. The title appears in the browser tab. The link tells the browser to load style.css from the same folder as index.html.

A relative link is a path from the current file. Here, style.css means “the file named style.css in the same folder as index.html.”

Add the page landmarks

Click after the opening <body> tag. Select every line before the closing </body> tag, but do not select either body tag. Replace that selected content with:

<a class="skip-link" href="#main-content">Skip to main content</a>

<header class="site-header">
  <div class="site-header-content">
    <a class="site-title" href="index.html">H. C. Andersen</a>
    <nav aria-label="Main navigation">
      <ul class="site-nav">
        <li><a href="index.html" aria-current="page">Home</a></li>
      </ul>
    </nav>
  </div>
</header>

<main id="main-content" tabindex="-1">
  <section class="page-heading">
    <h1>H. C. Andersen</h1>
    <p>A short practice website about the Danish writer Hans Christian Andersen.</p>
  </section>

  <article class="content-card">
    <h2>Writing and stories</h2>
    <p>Hans Christian Andersen wrote fairy tales, novels, poems, plays, travel writing, diaries, and letters.</p>
    <p>This website uses several page types to present a small selection of that work.</p>
  </article>

  <article class="content-card">
    <h2>Background</h2>
    <p>Andersen was born in Odense, Denmark, in 1805. He later lived in Copenhagen and traveled widely in Europe.</p>
    <p>His fairy tales are well known around the world, but they are one part of a much larger writing career.</p>
  </article>
</main>

<footer class="site-footer">
  <p>Practice website about H. C. Andersen</p>
</footer>

Read the nesting from the outside inward:

body contains the whole visible page.
header, main, and footer identify the major parts of the page.
nav contains a list of links.
main contains unique page content.
Each article groups related content.

After this step, body has four direct parts in this order: the skip link, header, main, and footer. None of those parts should be inside another one.

The aria-current="page" attribute identifies the current link for screen-reader users and for the CSS rule that highlights it. Type that exact attribute on one link only. The skip link gives keyboard users a route past repeated navigation. It will become visible after you add its CSS.

Open the page

Save with Ctrl+S. In VS Code Explorer, right-click index.html and select Reveal in File Explorer. Double-click index.html in Windows File Explorer. Keep this browser tab open beside VS Code. From now on, save in VS Code and reload this tab with Ctrl+R after every stated check.

The browser address should begin with file:///. You should see unstyled text: one Home link, a heading, two articles, and a footer. That is correct before CSS.

Checkpoint: The first HTML page opens

What now works: index.html opens locally and shows the Home link, heading, two articles, and footer as unstyled text.
Files changed: index.html
What remains: Add CSS for the page-wide appearance, navigation, and content.
Next action: Open style.css and type the base rules.
If it does not work: If the browser shows a blank page, save index.html. Check that the visible content is between the opening and closing body tags, and that head, body, and html each have a matching closing tag.

3. Style the Home page in layers

Open style.css. After every CSS block, save it, reload index.html, and look for the stated result.

Add page-wide rules

Type this at the top of style.css:

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #1d2d35;
  background: #f7f5ef;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

The universal selector * selects every element. A CSS selector is the part before {; it chooses what a rule can style. The body rule sets defaults that its child elements can inherit, such as the font and text color.

Check: The background becomes off-white. The text changes to a sans-serif font and gains more space between lines.

If it does not change: Save style.css. In index.html, confirm that the stylesheet line is exactly <link rel="stylesheet" href="style.css">, then reload the browser.

Style the header and navigation

Add this below the base rules:

.site-header {
  border-bottom: 0.25rem solid #8ca9a7;
  color: #ffffff;
  background: #174f52;
}

.site-header-content {
  display: flex;
  width: min(100% - 2rem, 62.5rem);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 0.75rem 0;
}

.site-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: 0.2rem;
  color: #ffffff;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

display: flex puts the title and navigation next to each other. flex-wrap: wrap lets navigation links move to a new line on narrow screens. The square brackets in .site-nav a[aria-current="page"] are an attribute selector: they select a link with that exact attribute.

Check: The header is dark green. The Home link has a lighter background.

If it does not change: Save style.css, reload the browser, and compare the class names in index.html with the selector names in this CSS block. For example, both must use site-header.

Style content, footer, and keyboard focus

Add this below the navigation styles:

main {
  width: min(100% - 2rem, 62.5rem);
  margin: 0 auto;
  padding: 2.5rem 0 3rem;
}

.page-heading {
  max-width: 45rem;
  margin-bottom: 2.5rem;
}

h1,
h2 {
  color: #0e3739;
  line-height: 1.2;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 6vw, 3.5rem);
}

h2 {
  margin-top: 0;
}

.content-card {
  margin: 1.25rem 0;
  padding: 1.5rem;
  border: 1px solid #b7c6c5;
  border-radius: 0.4rem;
  background: #ffffff;
}

.content-card p:last-child {
  margin-bottom: 0;
}

.site-footer {
  padding: 1.5rem 1rem;
  color: #ffffff;
  background: #174f52;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

a:focus-visible {
  outline: 0.2rem solid #9a4b00;
  outline-offset: 0.2rem;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  transform: translateY(-150%);
  padding: 0.6rem 0.9rem;
  color: #ffffff;
  background: #9a4b00;
}

.skip-link:focus {
  transform: translateY(0);
}

main now has a maximum content width and side space. clamp() gives the main heading a responsive size within a minimum and maximum. The skip link begins outside the visible area and appears when keyboard focus reaches it.

Check: The content is centered in white cards. Reload the page, click in it, and press Tab. The Skip to main content link appears. Press Tab again. The Home link has a visible outline.

If the page still looks like plain text: Save both files, check that index.html and style.css are in the same folder, then confirm the stylesheet href and reload.

Checkpoint: The Home page has structure and basic styling

What now works: The Home page has a styled header, readable content cards, footer, and visible keyboard focus.
Files changed: index.html, style.css
What remains: Create the Fairy Tales page and connect it to Home.
Next action: Create fairy-tales.html in the same folder.
If it does not work: If the page looks unstyled, compare the href in the link element with the filename style.css. Save both files and reload.

4. Add the Fairy Tales page

The second source document follows this sequence: make a new file, link the stylesheet, reuse working shared parts, add a link on both pages, then add page-specific HTML and CSS.

Create fairy-tales.html.
Use Emmet ! to create its document.
Reuse the same html tag, meta elements, and stylesheet link as index.html.
Change only the title:

<title>H. C. Andersen | Fairy Tales</title>

In the generated fairy-tales.html, keep the <!doctype html>, html, head, body, and closing tags. Inside its body, copy these complete elements from index.html in this order:

The skip link, from <a class="skip-link" to its closing </a>.
The complete header, from <header to </header>.
The complete footer, from <footer to </footer>.

Do not copy the Home page’s main or its articles. In the next section, you will add a new main between the copied header and footer. The completed body must contain the skip link, one header, one main, and one footer as sibling elements.

Inside the copied ul in fairy-tales.html, replace the Home list item with:

<li><a href="index.html">Home</a></li>
<li><a href="fairy-tales.html" aria-current="page">Fairy tales</a></li>

Then return to index.html. Directly after its Home list item, add:

<li><a href="fairy-tales.html">Fairy tales</a></li>

Only the current page has aria-current="page". It is required code: keep it on Home in index.html and move it to Fairy tales in fairy-tales.html.

Checkpoint: Two-page navigation works before you add content

What now works: Home and Fairy tales each show two navigation links. Both links open. Only the open page has the current-page marker.
Files changed: index.html, fairy-tales.html
What remains: Add the Fairy Tales page content and quotation styles.
Next action: Add the first main element to fairy-tales.html.
If it does not work: Open each page separately. Count two links, then compare only the opening a tags in its navigation. Remove aria-current from the link for the other page.

Add the first article

Place this main element between the copied header and footer in fairy-tales.html:

<main id="main-content" tabindex="-1">
  <section class="page-heading">
    <h1>Fairy Tales and Other Writing</h1>
    <p>Fairy tales are well known, but they are part of a larger body of work.</p>
  </section>

  <article class="writing-section">
    <h2>Fairy tales and stories</h2>
    <blockquote>
      <p><em>The Ugly Duckling</em> is one of Andersen's best-known tales.</p>
    </blockquote>
    <p>Andersen published fairy tales across several decades. They can examine belonging, pride, poverty, loss, and change.</p>
    <p>He also wrote object tales, in which everyday objects such as a fir tree or a needle become characters.</p>
  </article>
</main>

A blockquote identifies a quotation or quoted idea. It gives the text more meaning than a generic div used only for appearance.

Select the complete first article, from <article class="writing-section"> through its matching </article>. Duplicate that whole block twice. Put both copies after the first article and before the closing </main> tag. Change the content in the two new articles using this table:

Second article	Third article
Heading: `Lucky Peer`	Heading: `Travel accounts, diaries, and letters`
Quote: `<em>Lucky Peer</em> is a novel from 1870.`	Quote: `Andersen traveled widely in Europe.`
Paragraph: `The novel follows a young person with talent and ambition. It returns to questions of recognition, social position, and the cost of success.`	Paragraph: `Travel writing gave Andersen another way to observe people, places, languages, and theater.`
Paragraph: `Including a novel shows that Andersen worked across more than one literary form.`	Paragraph: `Diaries and letters also show the practical work behind a writing career.`

Use a separate p element for each paragraph. After this step, main contains exactly three article class="writing-section" elements.

Style quotations

At the end of style.css, add:

.writing-section {
  margin: 2.5rem 0;
}

blockquote {
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  border-left: 0.3rem solid #174f52;
  background: #dceceb;
  font-size: 1.15rem;
}

blockquote p {
  margin: 0;
}

The element selector blockquote styles every quotation. The class selector .writing-section styles only articles with that class.

Save both HTML files and style.css. In the browser, select Fairy tales, then select Home. If the quotation styles do not appear, save again, reload, and confirm that each article uses class="writing-section" and that fairy-tales.html links to style.css.

Checkpoint: Two pages connect through navigation

What now works: Home and Fairy tales open from the navigation. Each page has a highlighted current link. Fairy Tales has three articles with styled quotations.
Files changed: index.html, fairy-tales.html, style.css
What remains: Create Profile with repeated labeled facts.
Next action: Create profile.html and use Emmet to generate the fact structure.
If it does not work: If a link opens a missing-file page, compare its href value and target filename character by character. Both must use fairy-tales.html.

5. Add the Profile page

The third source document uses repeated label-and-value pairs. This version uses a description list: dt means a term or label, and dd means the detail that belongs to that label.

Reuse the page structure, then add the Profile link

Create profile.html with Emmet !.
Use the same language, meta, and stylesheet information as the other pages.
Set the title to H. C. Andersen | Profile.
Copy only the complete skip link, complete header, and complete footer from fairy-tales.html. Keep them inside body in the same order as before. Do not copy the Fairy Tales main.

In profile.html, add this after the Fairy tales link:

<li><a href="profile.html" aria-current="page">Profile</a></li>

In index.html and fairy-tales.html, add the same link without aria-current:

<li><a href="profile.html">Profile</a></li>

Save all three files. Open Home, Fairy tales, and Profile. Each page must have three links, and only its own link may have aria-current="page".

Checkpoint: Three-page navigation is complete

What now works: Home, Fairy tales, and Profile open from every menu. Each menu has three links, and only the open page has the current-page marker.
Files changed: index.html, fairy-tales.html, profile.html
What remains: Build the Profile facts and make their layout responsive.
Next action: Add the Profile main element.
If it does not work: If a menu differs, compare its list items with the other two files. Do not copy a second main element while correcting the header.

Generate and fill the fact pairs

Add this main element between the header and footer in profile.html:

<main id="main-content" tabindex="-1">
  <section class="page-heading">
    <h1>Profile</h1>
    <p>Selected facts about Hans Christian Andersen.</p>
  </section>

  <article class="content-card">
    <h2>Hans Christian Andersen</h2>
    <dl class="profile-list">
    </dl>
  </article>
</main>

Put the cursor on the empty line between <dl class="profile-list"> and </dl>. Type this Emmet abbreviation and expand it:

(div>dt+dd)*10

It generates ten div elements. Each div contains one dt and one dd. dt is the label and dd is its value. After expansion, count ten div elements directly inside the dl before you replace their generated text with these facts:

Label (`dt`)	Value (`dd`)
Born	April 2, 1805, in Odense, Denmark
Died	August 4, 1875, in Copenhagen, Denmark
Nationality	Danish
Known for	Fairy tales, novels, poems, plays, travel writing, diaries, and letters
First novel	The Improvisatore (1835)
First fairy-tale booklet	Fairy Tales Told for Children. First Collection. First Booklet (1835)
Well-known tales	The Little Mermaid, The Emperor’s New Clothes, and The Ugly Duckling
Early ambition	To work in theater as a singer, dancer, or actor
Important places	Odense, Copenhagen, and cities visited during European travel
Website focus	A short practice introduction, not a complete account of his life or works

Use em tags around a book title. For example:

<dd><em>The Improvisatore</em> (1835)</dd>

Lay out labels and values

Add this at the end of style.css:

.profile-list {
  margin: 0;
}

.profile-list div {
  display: flex;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid #b7c6c5;
}

.profile-list dt {
  flex: 0 0 11rem;
  color: #0e3739;
  font-weight: 700;
}

.profile-list dd {
  margin: 0;
}

@media (max-width: 40rem) {
  .profile-list div {
    flex-direction: column;
    gap: 0.25rem;
  }
}

flex: 0 0 11rem gives each label a fixed starting width. A media query applies CSS only under a stated condition. Here, at 40rem or less, it stacks labels above their values.

Check: Open Profile. Make the browser narrow. The labels and values stack without horizontal page scrolling.

If the rows do not stack: Save style.css, reload, then confirm that the @media block has both closing } characters and that every label-value pair is inside one div.

Checkpoint: The Profile page presents repeated facts

What now works: Every menu opens Profile. It shows ten labeled facts in two columns on a wide window and stacked content on a narrow window.
Files changed: index.html, fairy-tales.html, profile.html, style.css
What remains: Create Bibliography and use a table for related rows and columns.
Next action: Create bibliography.html and build its table header.
If it does not work: If the Profile rows do not align, confirm each dt and dd pair is inside one div and profile-list is on the dl opening tag.

6. Add the Bibliography page

The final source document builds a table from headings, categories, and repeated rows. A table is appropriate because each work has information that belongs to named columns.

Create bibliography.html with Emmet !.
Use the same language, meta, and stylesheet information as before.
Set the title to H. C. Andersen | Bibliography.
Copy only the complete skip link, complete header, and complete footer from profile.html. Keep them inside body in that order. Do not copy the Profile main.

Add this after Profile in every menu except bibliography.html:

<li><a href="bibliography.html">Bibliography</a></li>

On bibliography.html, use:

<li><a href="bibliography.html" aria-current="page">Bibliography</a></li>

Every page now has four links. Every page has exactly one aria-current="page" attribute. Save all four files, open each page, count its four links, and click each link before you add the table.

Checkpoint: Four-page navigation is complete

What now works: Each of the four pages has the same four navigation links. Every link opens, and only the open page has the current-page marker.
Files changed: index.html, fairy-tales.html, profile.html, bibliography.html
What remains: Add Bibliography content and table styles.
Next action: Add the Bibliography main element and its table header.
If it does not work: If a link opens the wrong page, compare the href value and target filename character by character. Do not change the current-page attribute until the link itself works.

Build the table header and first row

Add this main element between the header and footer:

<main id="main-content" tabindex="-1">
  <section class="page-heading">
    <h1>Bibliography</h1>
    <p>A selected bibliography from the source material for this exercise.</p>
  </section>

  <article class="content-card">
    <div class="table-scroll">
      <table>
        <caption>Selected H. C. Andersen bibliography</caption>
        <thead>
          <tr>
            <th scope="col">Author</th>
            <th scope="col">Title</th>
            <th scope="col">Publisher</th>
            <th scope="col">Year</th>
            <th scope="col">Volumes</th>
          </tr>
        </thead>
      </table>
    </div>
  </article>
</main>

caption names the table. scope="col" identifies each header as the heading for its column. These are required table-accessibility details. Type them exactly before you add the rows.

Put this after </thead> and before </table>:

<tbody>
  <tr class="table-category">
    <th colspan="5" scope="rowgroup">H. C. Andersen's works</th>
  </tr>
  <tr>
    <th scope="row">Nielsen, Birger Frank</th>
    <td><em>H. C. Andersen Bibliografi - Digterens danske Værker 1822-1875</em></td>
    <td>Hagerup</td>
    <td>1942</td>
    <td>—</td>
  </tr>
</tbody>

colspan="5" spans all five columns. scope="row" identifies the author as a row heading. A tbody groups related data rows under one category heading.

Enter the remaining rows

The table below supplies every remaining required entry. You do not need to look up another source. A dash (—) means that the source did not state a value.

In the first tbody, find the data row whose first cell is Nielsen, Birger Frank. Its opening tag is <tr> with no class.
Copy that complete data row, from this opening <tr> through its matching </tr>. Insert the copy immediately before the first </tbody>.
Change the five cells in that new row to the remaining H. C. Andersen's works entry.
After the first </tbody>, make a new tbody for Fairy tales. Add its category row first, then six data rows.
After the Fairy tales </tbody>, make a third tbody for Letters. Add its category row first, then four data rows.

Category	Author	Title	Publisher	Year	Volumes
H. C. Andersen’s works	Andersen, H. C.	Samlede Skrifter	Reitzel	1876–1880	15
Fairy tales	Andersen, H. C.	H. C. Andersens Eventyr for børn	Høst	2004	Original: 1835–1837
Fairy tales	Andersen, H. C.	H. C. Andersens Eventyr	Det Danske Sprog- og Litteraturselskab / Reitzel	1963–1990	7
Fairy tales	Andersen, H. C.	H. C. Andersens eventyr I udvalg	Forlaget Notabene	1987	—
Fairy tales	Andersen, H. C.	Om jul	Gyldendal	2018	—
Fairy tales	Andersen, H. C.	Eventyr og historier 1–4	Arnkrone	No year stated	4
Fairy tales	Andersen, H. C.	Eventyr - bind 1	Forlaget Hjorth	2018	1
Letters	—	Breve til Therese og Martin R. Henriques 1860–75	Hagerup	1932	—
Letters	—	Brevveksling med Edvard og Henriette Collin	Munksgaard	1933–1937	6
Letters	—	H. C. Andersens Brevveksling med Henriette Hanck 1830–1846	Munksgaard	1946	2
Letters	—	H. C. Andersens Brevveksling med Jonas Collin den ældre og andre Medlemmer af det Collinske Hus	Munksgaard	1945–1948	3

Each new tbody begins with a category row. Use this pattern for Fairy tales, then repeat it with Letters:

<tbody>
  <tr class="table-category">
    <th colspan="5" scope="rowgroup">Fairy tales</th>
  </tr>
  <!-- Put the matching data rows here. -->
</tbody>

Copy the Nielsen, Birger Frank data row pattern for each remaining entry, then change its five cells. Do not copy the category row as a data row. Delete the HTML comment after you add the rows.

Before </table>, check the grouping. There must be exactly three complete tbody blocks:

H. C. Andersen's works: category row + 2 data rows
Fairy tales: category row + 6 data rows
Letters: category row + 4 data rows

Each tbody has an opening <tbody> before its category row and a closing </tbody> after its last data row.

Style the table

At the end of style.css, add:

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}

caption {
  margin-bottom: 0.75rem;
  color: #4b5d66;
  font-weight: 700;
  text-align: left;
}

th,
td {
  padding: 0.75rem;
  border: 1px solid #b7c6c5;
  text-align: left;
  vertical-align: top;
}

thead th {
  color: #ffffff;
  background: #174f52;
}

.table-category th {
  color: #0e3739;
  background: #dceceb;
}

tbody tr:nth-child(even):not(.table-category) {
  background: #f1f0ea;
}

The table is deliberately wider than some narrow screens. .table-scroll lets only the table scroll sideways when necessary. nth-child(even) is a CSS pseudo-class that selects every second row. :not(.table-category) excludes category headings. You do not need to change these selectors after you type the block.

Check: Open Bibliography. At a wide width, each entry lines up below its heading. At a narrow width, only the table area may scroll sideways.

If the table is unstyled or grouped incorrectly: Save both files, reload, confirm that bibliography.html links to style.css, then count the three tbody opening tags and three closing tags.

Checkpoint: The four-page website is complete

What now works: All four navigation links open the intended page. Profile uses labels and values. Bibliography uses headings, category rows, and table cells.
Files changed: index.html, fairy-tales.html, profile.html, bibliography.html, style.css
What remains: Run the final browser checks.
Next action: Use the self-check from top to bottom.
If it does not work: If the table loses its styles, confirm bibliography.html links to style.css and table-scroll is on the div around the table.

7. Verify the finished website

Save every open file before you test.

Self-check

Complete these checks against the required result.

Open index.html, fairy-tales.html, profile.html, and bibliography.html from the navigation. Confirm that each browser tab title names the open page.
On every page, confirm that the navigation has four links and exactly one highlighted current-page link.
Reload each page. Click inside it, then press Tab. Confirm that Skip to main content appears first. When that link has focus, press Enter. Focus should move to the main region, often shown by an outline around the main heading or content area.
Use Tab without a mouse. Confirm that every navigation link receives a visible focus outline and opens with Enter.
Make the browser narrow. Confirm that navigation wraps and Profile labels stack above values. The page must not gain a horizontal scrollbar.
On Bibliography at a narrow width, confirm that only the table wrapper can scroll sideways.
Change one sentence in index.html, save, reload, and confirm that the change appears. Then keep the change or restore the original deliberately.

How the website works

Each HTML head gives the browser a title and the path to style.css.
Each header contains repeated navigation.
Each main contains unique page content.
Each footer marks the end of the page.
style.css selects repeated classes and elements, so one rule can affect several pages.

HTML gives content meaning and order. CSS controls color, spacing, layout, and responsive behavior. When a visible result is wrong, first decide whether the cause is HTML structure, a file path, or a CSS selector. Then test that one idea.

Optional — add a portrait after the self-check

The required website is complete. Images are not required. The original exercise refers to an image folder, but this version does not require one. Do this section only after the self-check passes.

If you want to practice images, use the public-domain portrait on Wikimedia Commons: H. C. Andersen by Thora Hallager, 1869.

Create an images folder inside hc-andersen-website.
Download the portrait as hca-portrait.jpg into that folder.
Put this after the Home page’s first article:

<figure class="portrait">
  <img src="images/hca-portrait.jpg" alt="Black-and-white 1869 portrait of Hans Christian Andersen">
  <figcaption>Hans Christian Andersen, photographed by Thora Hallager in 1869.</figcaption>
</figure>

Add this CSS at the end of style.css:

.portrait {
  max-width: 26rem;
  margin: 1.5rem 0;
}

.portrait img {
  display: block;
  width: 100%;
}

.portrait figcaption {
  margin-top: 0.5rem;
  color: #4b5d66;
}

If the browser shows a broken-image icon, compare the actual filename and folder path with src="images/hca-portrait.jpg".

Safe stopping point

The required tutorial is complete when every self-check passes. Your folder contains five files, and index.html opens the complete site locally. You do not need a web server, GitHub account, or optional portrait to complete this tutorial.

Optional next changes

The required website is complete before these changes.

Add one verified work

Add one work to the correct Bibliography group. Keep the author in a row header with scope="row" and add one matching data cell for each remaining column.

Change the visual system

Choose a new header background color. Update the header, footer, table header, active link, and quotation border deliberately. Check that white text remains readable.

Add a Sources page

Create sources.html. Give it the same document information, header, footer, and stylesheet link. Add a Sources link to every menu and list the chronology and portrait sources you used.

Personalize the site

Replace the practice content with content about another writer, artist, game designer, or fictional character. Keep the four page purposes, but update titles, headings, navigation labels, and bibliography entries so they agree.