Final Project - Museum Page with Full Workflow

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)

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

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