Kurs HTML i CSS · Moduł 11: Narzędzia deweloperskie
Projekt końcowy - Strona Muzeum z pelnym workflow
W tej lekcji6
Znasz już każde narzędzie z osobna: DevTools, Emmeta, walidator, meta tagi, optymalizację, czcionki i hosting. Prawdziwy warsztat programisty polega jednak na tym, żeby używać ich razem i w stałej kolejności - od pustego folderu do linku, który możesz wysłać w świat. 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, og:type)
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. Wydajność
- Minimalny kod CSS
- Odpowiednie formaty obrazów
- Preconnect i preload
Plan pracy krok po kroku
Wymagania mówią, co ma powstać. Oto kolejność, w jakiej polecam to zbudować - każdy krok opiera się na poprzednim:
- Szkielet - utwórz foldery css, images i fonts oraz plik index.html, a szkielet dokumentu wygeneruj w edytorze skrótem Emmet
!i od razu zmieńlangna "pl". - Sekcja head - dodaj meta tagi, favicon, Open Graph i czcionki w kolejności z tego modułu.
- Treść - zbuduj semantyczne sekcje z ciągłą hierarchią nagłówków i opisz je komentarzami.
- Obrazy - nadaj wymiary, dodaj
loading="lazy"poniżej pierwszego ekranu i wersje WebP w<picture>. - Style - zacznij od resetu i zmiennych, potem typografia, układ i media queries.
- Kontrola jakości - walidator, Lighthouse i DevTools.
- Publikacja - GitHub Pages lub Netlify, a na końcu link dla mentora.
Sekcja head projektu
Najwięcej wymagań trafia do sekcji <head>. Tak może wyglądać jej kompletna wersja - w kolejności, którą znasz z lekcji o meta tagach i czcionkach:
1<head>
2 <meta charset="UTF-8">
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <title>Muzeum Starożytnego Egiptu</title>
5 <meta name="description" content="Wystawy, bilety i historia faraonów.">
6 <meta name="author" content="Twoje imię">
7 <meta name="theme-color" content="#1a1a2e">
8 <link rel="icon" href="favicon.ico">
9 <meta property="og:title" content="Muzeum Starożytnego Egiptu">
10 <meta property="og:description" content="Odkryj tajemnice piramid.">
11 <meta property="og:image" content="https://twoj-login.github.io/muzeum/og.jpg">
12 <meta property="og:url" content="https://twoj-login.github.io/muzeum/">
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>Kodowanie i viewport stoją na górze, dalej tytuł i opisy, ikona, Open Graph z pełnymi adresami, a na końcu czcionki i Twój arkusz stylów. Ścieżki do ikony i arkusza są względne, więc zadziałają też w podkatalogu na GitHub Pages. Adresy og:image i og:url podmień na własne, gdy tylko opublikujesz stronę.
Kontrola przed wysłaniem
Zanim wyślesz link, obejdź stronę jak nadzorca budowy. Wklej kod do walidatora W3C i popraw wszystkie błędy - strona musi przejść walidację bez nich. Uruchom Lighthouse w oknie incognito i przeczytaj jego podpowiedzi. W panelu Network sprawdź, czy żaden plik nie kończy się błędem 404 i czy obrazy z lazy loadingiem pobierają się dopiero przy przewijaniu. Na koniec zwęź okno do szerokości telefonu, bo responsywność też jest w wymaganiach.
Najczęstsze potknięcia
Te potknięcia łatwo przeoczyć we własnym projekcie - sprawdź je, zanim zrobi to mentor:
lang="en"pozostawiony z szablonu Emmeta na polskiej stronie,loading="lazy"na głównym obrazie z pierwszego ekranu,- ścieżki od ukośnika, które na GitHub Pages kończą się błędem 404,
og:imagepodany jako ścieżka względna zamiast pełnego adresu,- brak
crossoriginprzy preconnect do fonts.gstatic.com.
Po wysłaniu projektu zamkniesz ostatni moduł Starożytnego Egiptu. Z tym warsztatem możesz ruszać do kolejnych światów - te same narzędzia będą Ci towarzyszyć przy JavaScripcie i React.
Praktyka
Przejrzyj poniższy przykład i na jego podstawie stwórz własną stronę:
Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <!-- Kodowanie i responsywnosc -->
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8 <!-- Tytul i meta description -->
9 <title>Muzeum Starorzytnego Egiptu | Strona glowna</title>
10 <meta name="description" content="Muzeum Starorzytnego Egiptu - wystawy, bilety online, historia faraonow i piramid.">
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="Muzeum Starorzytnego Egiptu">
20 <meta property="og:description" content="Odkryj tajemnice piramid i faraonow. Bilety online.">
21 <meta property="og:image" content="https://placehold.co/1200x630/d4af37/1a1a2e?text=Muzeum+Egiptu">
22 <meta property="og:url" content="https://muzeum-egiptu.pl">
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 - Nawigacja
36 ============================= -->
37 <header>
38 <div class="header-inner">
39 <h1>Muzeum Starorzytnego Egiptu</h1>
40 <nav aria-label="Nawigacja glowna">
41 <ul>
42 <li><a href="#exhibitions">Wystawy</a></li>
43 <li><a href="#gallery">Galeria</a></li>
44 <li><a href="#visit">Odwiedz nas</a></li>
45 <li><a href="#contact">Kontakt</a></li>
46 </ul>
47 </nav>
48 </div>
49 </header>
50
51 <!-- =============================
52 MAIN - Tresc glowna
53 ============================= -->
54 <main>
55 <!-- Sekcja hero -->
56 <section class="hero">
57 <img src="https://placehold.co/1200x400/d4af37/1a1a2e?text=Wielka+Piramida+w+Gizie"
58 alt="Panorama piramid w Gizie o zachodzie slonca"
59 width="1200" height="400" loading="eager">
60 <h2>Odkryj tajemnice starozytnej cywilizacji</h2>
61 </section>
62
63 <!-- Sekcja wystawy -->
64 <section id="exhibitions">
65 <h2>Aktualne wystawy</h2>
66
67 <article class="exhibition-card">
68 <img src="https://placehold.co/600x300/8b6914/f5f1e3?text=Skarby+Tutanchamona"
69 alt="Zlota maska Tutanchamona"
70 width="600" height="300" loading="lazy">
71 <div class="card-content">
72 <h3>Skarby Tutanchamona</h3>
73 <p>Ponad 5000 artefaktow z grobowca
74 mlodego faraona.</p>
75 <a href="#visit" class="btn">Kup bilet</a>
76 </div>
77 </article>
78
79 <article class="exhibition-card">
80 <img src="https://placehold.co/600x300/3d2914/d4af37?text=Mumie+Krolewskie"
81 alt="Ekspozycja mumii krolewskich"
82 width="600" height="300" loading="lazy">
83 <div class="card-content">
84 <h3>Mumie Krolewskie</h3>
85 <p>Tajemnice mumifikacji i zachowane
86 mumie faraonow.</p>
87 <a href="#visit" class="btn">Kup bilet</a>
88 </div>
89 </article>
90 </section>
91
92 <!-- Sekcja informacje -->
93 <section id="visit">
94 <h2>Odwiedz nas</h2>
95 <div class="info-grid">
96 <div class="info-box">
97 <h3>Godziny otwarcia</h3>
98 <p>Pn-Pt: 9:00 - 17:00</p>
99 <p>Sb-Nd: 10:00 - 18:00</p>
100 </div>
101 <div class="info-box">
102 <h3>Bilety</h3>
103 <p>Normalny: 45 zl</p>
104 <p>Ulgowy: 25 zl</p>
105 <p>Rodzinny: 100 zl</p>
106 </div>
107 </div>
108 </section>
109 </main>
110
111 <!-- =============================
112 FOOTER
113 ============================= -->
114 <footer>
115 <nav aria-label="Linki stopki">
116 <ul>
117 <li><a href="/privacy">Polityka prywatnosci</a></li>
118 <li><a href="/sitemap">Mapa strony</a></li>
119 </ul>
120 </nav>
121 <p>© 2024 Muzeum Starorzytnego Egiptu</p>
122 </footer>
123</body>
124</html>Pamiętaj: piramida nie powstaje z jednego bloku - to stała kolejność pracy, od planu po kontrolę jakości, zamienia stos kamieni w budowlę na tysiąclecia.
Widzisz błąd w tej lekcji?