HTML and CSS course · Module 11: Developer Tools

Final Project - Museum Page with Full Workflow

5 min read

In this lesson6

You already know every tool on its own: DevTools, Emmet, the validator, meta tags, optimization, fonts and hosting. A programmer's real craft, however, lies in using them together and in a fixed order - from an empty folder to a link you can send out into the world. Time to combine everything you have learned in this module! You will create a complete Ancient Egypt Museum page, using all the tools and techniques you have learned:

Project Requirements:

1. Meta Tags and SEO

Correct meta tags: charset, viewport, description, author, theme-color
Favicon (link rel="icon")
Open Graph meta tags (og:title, og:description, og:image, og:type)

2. HTML Structure

Semantic tags: header, nav, main, section, article, aside, footer
Correct heading hierarchy (h1 -> h2 -> h3)
Comments describing sections

3. Image Optimization

Width and height attributes on all images
Lazy loading on images below the fold
Picture element with WebP format

4. Web Fonts

Font from Google Fonts (e.g., Cinzel for headings)
Preconnect to the font server
Font stack with fallback fonts
font-display: swap

5. CSS

CSS Variables (Custom Properties)
CSS Reset
Responsive design

6. Performance

Minimal CSS code
Appropriate image formats
Preconnect and preload

A Step-by-Step Work Plan

The requirements say what has to be built. Here is the order in which I recommend building it - each step rests on the previous one:

Skeleton - create the css, images and fonts folders and an index.html file, generate the document skeleton in your editor with the Emmet ! abbreviation and set lang to your page's language right away.
The head section - add the meta tags, favicon, Open Graph and fonts in the order from this module.
Content - build semantic sections with a continuous heading hierarchy and describe them with comments.
Images - give them dimensions, add loading="lazy" below the first screen and WebP versions in <picture>.
Styles - start with the reset and variables, then typography, layout and media queries.
Quality control - the validator, Lighthouse and DevTools.
Publishing - GitHub Pages or Netlify, and finally a link for your mentor.

The Project's head Section

Most of the requirements end up in the <head> section. This is what its complete version can look like - in the order you know from the lessons on meta tags and fonts:

1<head>
2  <meta charset="UTF-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4  <title>Ancient Egypt Museum</title>
5  <meta name="description" content="Exhibitions, tickets and the history of the pharaohs.">
6  <meta name="author" content="Your name">
7  <meta name="theme-color" content="#1a1a2e">
8  <link rel="icon" href="favicon.ico">
9  <meta property="og:title" content="Ancient Egypt Museum">
10  <meta property="og:description" content="Discover the secrets of the pyramids.">
11  <meta property="og:image" content="https://your-username.github.io/museum/og.jpg">
12  <meta property="og:url" content="https://your-username.github.io/museum/">
13  <meta property="og:type" content="website">
14  <link rel="preconnect" href="https://fonts.googleapis.com">
15  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
17  <link rel="stylesheet" href="css/style.css">
18</head>

The encoding and viewport are at the top, followed by the title and descriptions, the icon, Open Graph with full addresses, and finally the fonts and your stylesheet. The paths to the icon and the stylesheet are relative, so they will also work in a subfolder on GitHub Pages. Replace the og:image and og:url addresses with your own as soon as you publish the page.

Checks Before Sending

Before you send the link, walk around the page like a site overseer. Paste the code into the W3C validator and fix all the errors - the page must pass validation without any. Run Lighthouse in an incognito window and read its hints. In the Network panel, check that no file ends with a 404 error and that images with lazy loading are downloaded only when you scroll. Finally, narrow the window to the width of a phone, because responsiveness is in the requirements too.

Common Slip-Ups

These slip-ups are easy to overlook in your own project - check them before your mentor does:

a lang attribute left over from the Emmet template that does not match the page's language,
loading="lazy" on the main image of the first screen,
paths starting with a slash, which end with a 404 error on GitHub Pages,
og:image given as a relative path instead of a full address,
a missing crossorigin on the preconnect to fonts.gstatic.com.

After sending the project, you will close the last module of Ancient Egypt. With this workshop you can set off for the next worlds - the same tools will accompany you in JavaScript and React.

Practice

Review the example below and create your own page based on it:

Code for this lesson: index.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <!-- Encoding and responsiveness -->
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8    <!-- Title and meta description -->
9    <title>Ancient Egypt Museum | Home</title>
10    <meta name="description" content="Ancient Egypt Museum - exhibitions, tickets online, the history of pharaohs and pyramids.">
11    <meta name="author" content="Mohamed">
12    <meta name="theme-color" content="#1a1a2e">
13
14    <!-- Favicon -->
15    <link rel="icon" type="image/png" sizes="32x32"
16          href="https://placehold.co/32x32/d4af37/1a1a2e?text=E">
17
18    <!-- Open Graph -->
19    <meta property="og:title" content="Ancient Egypt Museum">
20    <meta property="og:description" content="Discover the secrets of pyramids and pharaohs. Tickets online.">
21    <meta property="og:image" content="https://placehold.co/1200x630/d4af37/1a1a2e?text=Egypt+Museum">
22    <meta property="og:url" content="https://egypt-museum.com">
23    <meta property="og:type" content="website">
24
25    <!-- Google Fonts -->
26    <link rel="preconnect" href="https://fonts.googleapis.com">
27    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:wght@400;700&display=swap"
29          rel="stylesheet">
30
31    <link rel="stylesheet" href="style.css">
32</head>
33<body>
34    <!-- =============================
35         HEADER - Navigation
36         ============================= -->
37    <header>
38        <div class="header-inner">
39            <h1>Ancient Egypt Museum</h1>
40            <nav aria-label="Main navigation">
41                <ul>
42                    <li><a href="#exhibitions">Exhibitions</a></li>
43                    <li><a href="#gallery">Gallery</a></li>
44                    <li><a href="#visit">Visit us</a></li>
45                    <li><a href="#contact">Contact</a></li>
46                </ul>
47            </nav>
48        </div>
49    </header>
50
51    <!-- =============================
52         MAIN - Main content
53         ============================= -->
54    <main>
55        <!-- Hero section -->
56        <section class="hero">
57            <img src="https://placehold.co/1200x400/d4af37/1a1a2e?text=Great+Pyramid+of+Giza"
58                 alt="Panorama of the pyramids of Giza at sunset"
59                 width="1200" height="400" loading="eager">
60            <h2>Discover the secrets of an ancient civilization</h2>
61        </section>
62
63        <!-- Exhibitions section -->
64        <section id="exhibitions">
65            <h2>Current exhibitions</h2>
66
67            <article class="exhibition-card">
68                <img src="https://placehold.co/600x300/8b6914/f5f1e3?text=Treasures+of+Tutankhamun"
69                     alt="The golden mask of Tutankhamun"
70                     width="600" height="300" loading="lazy">
71                <div class="card-content">
72                    <h3>Treasures of Tutankhamun</h3>
73                    <p>Over 5000 artifacts from the tomb
74                       of the young pharaoh.</p>
75                    <a href="#visit" class="btn">Buy a ticket</a>
76                </div>
77            </article>
78
79            <article class="exhibition-card">
80                <img src="https://placehold.co/600x300/3d2914/d4af37?text=Royal+Mummies"
81                     alt="Exhibition of royal mummies"
82                     width="600" height="300" loading="lazy">
83                <div class="card-content">
84                    <h3>Royal Mummies</h3>
85                    <p>The secrets of mummification and the preserved
86                       mummies of pharaohs.</p>
87                    <a href="#visit" class="btn">Buy a ticket</a>
88                </div>
89            </article>
90        </section>
91
92        <!-- Information section -->
93        <section id="visit">
94            <h2>Visit us</h2>
95            <div class="info-grid">
96                <div class="info-box">
97                    <h3>Opening hours</h3>
98                    <p>Mon-Fri: 9:00 - 17:00</p>
99                    <p>Sat-Sun: 10:00 - 18:00</p>
100                </div>
101                <div class="info-box">
102                    <h3>Tickets</h3>
103                    <p>Standard: $45</p>
104                    <p>Reduced: $25</p>
105                    <p>Family: $100</p>
106                </div>
107            </div>
108        </section>
109    </main>
110
111    <!-- =============================
112         FOOTER
113         ============================= -->
114    <footer>
115        <nav aria-label="Footer links">
116            <ul>
117                <li><a href="/privacy">Privacy policy</a></li>
118                <li><a href="/sitemap">Sitemap</a></li>
119            </ul>
120        </nav>
121        <p>&copy; 2024 Ancient Egypt Museum</p>
122    </footer>
123</body>
124</html>

Remember: a pyramid is not made of a single block - a fixed order of work, from the plan to quality control, turns a pile of stones into a building that lasts for millennia.

Spotted a mistake in this lesson?