Projekt: Mój Bohater — kompletna strona z HTML, CSS i odrobiną JS

Po co się tego uczymy?

To podsumowujący projekt całego działu HTML i CSS — zamiast uczyć się kolejnej, pojedynczej właściwości, zobaczysz, jak WSZYSTKIE dotychczas poznane elementy (struktura dokumentu, selektory, kolory, typografia, pseudoklasy, box model) składają się w JEDNĄ, spójną, gotową stronę internetową. To też pierwszy krok w stronę interaktywności — jedna linijka JavaScriptu pokazuje, że HTML/CSS to dopiero początek możliwości stron internetowych.

Teoria

Ten projekt polega na zbudowaniu strony internetowej poświęconej wybranej przez Ciebie osobie, która Cię inspiruje — może to być postać historyczna, sportowiec, naukowiec, ktoś z rodziny, a nawet fikcyjny bohater. Strona wykorzystuje WYŁĄCZNIE poznane wcześniej techniki:

Struktura semantyczna — <header> (nagłówek strony z tytułem), <div class="container"> (główna treść), <footer> (stopka) — dokładnie te same znaczniki, które poznałeś/aś w pierwszej lekcji tego działu.
Tło z gradientem — background: linear-gradient(to right, #1e3c72, #2a5298); tworzy płynne przejście koloru od lewej do prawej strony ekranu, zamiast jednolitego koloru tła.
Przezroczystość przez rgba() — rgba(0,0,0,0.6) to czarny kolor z przezroczystością 60% (czwarta liczba, tzw. kanał alfa, zawsze z zakresu 0-1) — dzięki temu nagłówek i kontener są WIDOCZNIE ciemniejsze niż tło, ale wciąż przez nie "prześwituje" gradient.
Zaokrąglone rogi i cień — border-radius: 15px; (zaokrąglenie), box-shadow: 0 0 20px rgba(0,0,0,0.6); (miękki cień wokół zdjęcia) — poznane w lekcji o efektach wizualnych.
Stylowanie przycisku i pseudoklasa :hover — przycisk zmienia kolor tła po najechaniu myszką (button:hover { background-color: orange; }), dokładnie ta technika, którą poznałeś/aś w lekcji o pseudoklasach.
Odrobina JavaScriptu — funkcja pokazCytat() wywoływana atrybutem onclick na przycisku, wypełniająca pusty akapit <p id="cytat"></p> treścią po kliknięciu. To wyprzedzenie tematu z działu JavaScript — pokazuje, że HTML/CSS opisują WYGLĄD, a JavaScript dodaje ZACHOWANIE (interakcję).

Kolejność pracy nad takim projektem (rekomendowana): (1) najpierw czysta struktura HTML bez żadnego stylu — upewnij się, że treść ma sens i jest semantycznie poprawna, (2) dodaj podstawowe style (kolory tła, czcionkę), (3) dopracuj szczegóły (cienie, zaokrąglenia, hover), (4) na końcu dodaj interaktywność JavaScriptem, jeśli chcesz.

Schemat

STRUKTURA PROJEKTU "MÓJ BOHATER":

<header>                    ← nagłówek z tytułem i podtytułem
  <h1>Mój Bohater</h1>
  <h2>Osoba, która mnie inspiruje</h2>
</header>

<div class="container">     ← główna treść (wyśrodkowana, z tłem)
  <img>                      ← zdjęcie bohatera
  <p>opis</p>                ← krótki opis
  <div class="cechy">        ← lista cech w punktach
    <ul><li>...</li></ul>
  </div>
  <button onclick="...">     ← przycisk wywołujący JavaScript
  <p id="cytat"></p>         ← pusty akapit, wypełniany PO kliknięciu
</div>

<footer>...</footer>        ← stopka strony

Przykład z życia

Strony biograficzne (np. profile sportowców na oficjalnych stronach klubów, strony poświęcone naukowcom na stronach uczelni) mają dokładnie taką samą strukturę jak ten projekt: nagłówek z imieniem, zdjęcie, opis, lista osiągnięć/cech, czasem interaktywny element (np. przycisk "pokaż więcej"). To pokazuje, że nawet prosty projekt szkolny uczy WZORCA używanego w prawdziwych, profesjonalnych stronach.

moj-bohater.html (pełny kod strony)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Mój Bohater</title>

    <style>
        body {
            margin: ;
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(to right, #1e3c72, #2a5298);
            color: white;
            text-align: center;
        }

        header {
            background-color: rgba(,,,0.6);
            padding: 40px 20px;
        }

        h1 {
            margin: ;
            font-size: 48px;
        }

        h2 {
            margin-top: 10px;
            font-weight: normal;
            color: #ffd700;
        }

        .container {
            max-width: 900px;
            margin: 40px auto;
            background-color: rgba(,,,0.5);
            padding: 30px;
            border-radius: 15px;
        }

        img {
            width: 250px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow:   20px rgba(,,,0.6);
        }

        p {
            font-size: 18px;
            line-height: 1.6;
        }

        .cechy {
            margin-top: 30px;
            text-align: left;
        }

        .cechy li {
            margin: 10px ;
            font-size: 18px;
        }

        footer {
            margin-top: 40px;
            padding: 20px;
            background-color: rgba(,,,0.7);
            font-size: 14px;
        }

        button {
            margin-top: 20px;
            padding: 12px 25px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            background-color: #ffd700;
            cursor: pointer;
        }

        button:hover {
            background-color: orange;
        }
    </style>
</head>

<body>

<header>
    <h1>Mój Bohater</h1>
    <h2>Osoba, która mnie inspiruje</h2>
</header>

<div class="container">

    <img src="https://via.placeholder.com/250" alt="Zdjęcie bohatera">

    <p>
        Moim bohaterem jest osoba, która swoim życiem pokazuje, że warto być odważnym,
        uczciwym i wytrwałym. Inspiruje mnie każdego dnia i daje przykład,
        że nawet trudności można pokonać.
    </p>

    <div class="cechy">
        <h3>Najważniejsze cechy:</h3>
        <ul>
            <li>✔ Odwaga</li>
            <li>✔ Wytrwałość</li>
            <li>✔ Uczciwość</li>
            <li>✔ Szacunek do innych</li>
            <li>✔ Gotowość do pomocy</li>
        </ul>
    </div>

    <button onclick="pokazCytat()">Pokaż cytat bohatera</button>

    <p id="cytat"></p>

</div>

<footer>
    Strona wykonana w HTML i CSS | Autor: Twoje Imię
</footer>

<script>
    function pokazCytat() {
        document.getElementById("cytat").innerHTML =
        "„Nigdy się nie poddawaj, nawet gdy droga wydaje się trudna.”";
    }
</script>

</body>
</html>

Komentarz i wyjaśnienie kodu

Zwróć uwagę, że WSZYSTKIE style są zapisane w jednym bloku <style> w sekcji <head> — to podejście nazywa się "style wewnętrzne" (internal CSS), wygodne dla małych, jednostronicowych projektów. Przy większych stronach (np. z kilkoma podstronami) lepszym rozwiązaniem jest OSOBNY plik .css podpięty przez <link rel="stylesheet" href="styl.css"> — style można wtedy współdzielić między wieloma stronami bez powtarzania kodu.

max-width: 900px; margin: 40px auto; na klasie .container to klasyczny trik WYŚRODKOWANIA bloku poziomo: margin: ... auto każe przeglądarce automatycznie rozdzielić pozostałą przestrzeń RÓWNO po obu stronach elementu.

Atrybut onclick="pokazCytat()" na przycisku to NAJPROSTSZY (choć nie zawsze najlepszy stylistycznie) sposób podpięcia obsługi zdarzenia w HTML — wywołuje funkcję JavaScript o podanej nazwie w momencie kliknięcia. W dziale JavaScript poznasz też "nowocześniejszy" sposób podpinania zdarzeń, bez mieszania JS bezpośrednio w atrybutach HTML.

Ćwiczenie samodzielne

Skopiuj powyższy kod do pliku .html, otwórz go w przeglądarce i sprawdź działanie przycisku. Zmień kolory gradientu tła (linear-gradient) na inne dwa kolory i podmień zdjęcie na własne (możesz użyć dowolnego adresu URL obrazka).

Zadania do pracy własnej

Zmień treść, zdjęcie, cechy i cytat na dotyczące WYBRANEJ przez Ciebie osoby (prawdziwej lub fikcyjnej). Zmień też kolorystykę strony (gradient tła, kolor akcentu #ffd700) na taką, która lepiej pasuje do Twojego bohatera.
Dodaj do strony DRUGĄ sekcję (np. <div class="osiagniecia">) z listą najważniejszych osiągnięć bohatera, ostylowaną w podobny sposób do sekcji .cechy. Dodaj drugi przycisk z inną funkcją JavaScript, np. losującą jeden z kilku cytatów za każdym kliknięciem (wskazówka: tablica cytatów + Math.random() — to wyprzedzenie tematu z działu JavaScript, spróbuj samodzielnie albo wróć do tego zadania po ukończeniu tamtego działu).
Przebuduj stronę tak, żeby WSZYSTKIE style CSS znajdowały się w OSOBNYM pliku styl.css, podpiętym przez <link rel="stylesheet">, zamiast wewnątrz <style> w <head>. Dodaj też media query (@media (max-width: 600px) { ... } — wyprzedzenie tematu responsywności) zmniejszające rozmiar czcionki nagłówka na wąskich ekranach telefonów.

Typowe błędy

Zapominanie o atrybucie alt przy obrazku — <img> bez alt jest niedostępny dla osób korzystających z czytników ekranu i pogarsza SEO strony; zawsze opisuj, co przedstawia obrazek.

Nadmierne mieszanie JavaScriptu bezpośrednio w atrybutach HTML (onclick="...") w większych projektach — dla jednej małej funkcji jak w tym przykładzie jest to akceptowalne, ale w większych stronach lepiej podpinać zdarzenia w osobnym pliku .js, żeby nie mieszać "co strona pokazuje" z "jak się zachowuje".

Zapominanie o cursor: pointer; na klikalnych elementach (jak przycisk) — bez tego kursor myszy nie zmienia się na "rączkę" nad przyciskiem, co może dezorientować użytkownika, czy dany element w ogóle jest klikalny.

Nawiązanie do egzaminu zawodowego

Ten projekt spina w całość CAŁY dział HTML i CSS — struktura dokumentu, formularze/przyciski, kolory i tła, typografia, pseudoklasy, efekty wizualne i jednostki/box model. To naturalne przygotowanie przed przejściem do działu JavaScript, gdzie nauczysz się PEŁNOPRAWNEJ obsługi zdarzeń i interakcji, zamiast pojedynczej linijki onclick jak w tym przykładzie.