Projekt końcowy - Strona Muzeum z pelnym workflow

Czas połączyć wszystko, czego nauczyłeś się w tym module! Stworzysz kompletną stronę Muzeum Starożytnego Egiptu, wykorzystując wszystkie poznane narzędzia i techniki:

Wymagania projektu:

1. Meta tagi i SEO

• Poprawne meta tagi: charset, viewport, description, author, theme-color
• Favicon (link rel="icon")
• Open Graph meta tagi (og:title, og:description, og:image)

2. Struktura HTML

• Semantyczne znaczniki: header, nav, main, section, article, aside, footer
• Poprawna hierarchia nagłówków (h1 -> h2 -> h3)
• Komentarze opisujące sekcje

3. Optymalizacja obrazów

• Atrybuty width i height na wszystkich obrazach
• Lazy loading na obrazach poniżej ekranu
• Element picture z formatem WebP

4. Web Fonts

• Czcionka z Google Fonts (np. Cinzel dla nagłówków)
• Preconnect do serwera czcionek
• Font stack z czcionkami zapasowymi
• font-display: swap

5. CSS

• Zmienne CSS (Custom Properties)
• CSS Reset
• Responsywny design

6. Wydajnosc

• Minimalny kod CSS
• Odpowiednie formaty obrazów
• Preconnect i preload

Przejrzyj ponizszy przykład i na jego podstawie stwórz własną stronę: