Gratulacje!
Doszliśmy do końca modułu i stworzyliśmy własną prostą stronę. Na zakończenie warto zrobić podsumowanie, przejrzeć kod w poszukiwaniu typowych błędów, wprowadzić poprawki oraz zastanowić się, co dalej w nauce tworzenia stron WWW.
Przegląd kodu i typowe błędy
Weź swój projekt (stronę wizytówkę) i przeanalizuj go sekcja po sekcji, linijka po linijce:
-
Struktura HTML
Sprawdź, czy wszystkie otwarte tagi mają swoje zamknięcia we właściwych miejscach. Częste błędy to np. niezakończenie listy
</ul>albo błędne zagnieżdżenie elementów. Użyj wcięć, by identyfikować problemy, i skorzystaj z walidatora HTML (validator.w3.org) – wskaże zapomniane zamknięcia lub błędną strukturę. -
Atrybuty
Sprawdź, czy dodałeś
altdo wszystkich<img>, czyinputmająname/idi powiązane<label>, oraz czy w<head>jest meta viewport. Nawet małe przeoczenie może wpłynąć na działanie strony. -
Semantyka i porządek
Upewnij się, że używasz odpowiednich elementów (np. nagłówki
<h1>/<h2>w właściwej hierarchii). Dbaj o opisowe i spójne nazwy klas — unikaj losowych skrótów. -
CSS — przegląd arkusza stylów
- Czy nie powielasz kodu? Zgrupuj powtarzające się reguły.
- Konsystencja jednostek: wybierz rem/em lub px i trzymaj się tego.
- Spójność kolorów: używaj jednolitej palety dla akcentów i tła.
- Sprawdź, czy selektory faktycznie trafiają w elementy (uwaga na literówki, np. klasa "button-primary" vs selektor
.btn-primary).
-
Responsywność
Przeskaluj okno przeglądarki od szerokiego do wąskiego. Zwróć uwagę, czy layout zmienia się zgodnie z oczekiwaniami. Dostosuj punkty przerwania (media queries) jeśli np. menu nie mieści się przy konkretnej szerokości.
-
Wydajność
Sprawdź rozmiary obrazków — kompresuj lub zmniejsz rozdzielczość, aby szybciej ładować stronę. Unikaj ładowania zbyt wielu fontów z Google.
-
Cross-browser
Przetestuj stronę w różnych przeglądarkach (Chrome, Firefox, Safari, Edge). W razie różnic użyj np. normalize.css lub nadpisz domyślne style, żeby uzyskać spójny wygląd.
Uspójnienie stylów i drobne poprawki
Po wyeliminowaniu błędów technicznych oceń estetykę i UX:
- Ujednolić wygląd przycisków i linków (kolor, zaokrąglenie), jeśli pełnią podobną rolę.
- Dostosować odstępy między akapitami i
line-height, żeby tekst nie był zbyt zbity. - Sprawdzić kontrast kolorów tekstu względem tła — wysoki kontrast poprawia dostępność.
- Wyraźnie oznaczyć elementy klikalne (np. podkreślenie linków lub inny kolor).
- Przetestować formularze: czy pola reagują na
required, dodać style:focusdla lepszej nawigacji klawiaturowej.
Prezentacja projektów
Jeśli uczysz się w grupie lub na kursie, zaprezentuj swój projekt: opowiedz krótko, jak zrealizowałeś poszczególne części, jakie napotkałeś problemy i jak je rozwiązałeś. Wspólna analiza różnych realizacji jest bardzo pouczająca.
Co dalej?
Masz solidne podstawy HTML i CSS — kolejne kroki mogą obejmować:
- Nauka JavaScript — dodawanie interaktywności (walidacja po stronie klienta, galerie, menu hamburgerowe, manipulacja DOM).
- Frameworki CSS — np. Bootstrap lub Tailwind, które przyspieszają tworzenie typowych komponentów; warto jednak najpierw dobrze znać czysty CSS.
- Sass/SCSS — preprocesor ułatwiający utrzymanie większych arkuszy stylów (zmienne, zagnieżdżanie, miksiny).
-
Rozszerzenia HTML5 — poznaj elementy takie jak
<figure>,<figcaption>,<video>,<audio>,<canvas>,<svg>. - Backend i bazy danych — jeśli chcesz tworzyć pełne aplikacje: Python/Django, Node.js, PHP itp., oraz podstawy SQL/NoSQL.
- Systemy kontroli wersji — Git i platformy typu GitHub/GitLab do śledzenia zmian i współpracy.
Pamiętaj: najważniejsze jest ćwiczenie. Twórz kolejne małe projekty (strona dla znajomego, prosty blog, strona o hobby) i sięgaj do dokumentacji (np. MDN) kiedy coś nie jest jasne. Powodzenia w dalszej przygodzie z tworzeniem stron WWW!
Materiał kursowy: Powtórka i prezentacja projektów
