Ćwiczenia: HTML + CSS

Zestaw ćwiczeń rosnących pod względem trudności — do nauki i druku

Jak korzystać
Kliknij tytuł zadania, aby je rozwinąć. Rozwiązania można ukryć, aby uczniowie mogli próbować samodzielnie.

Zadanie 1 — Struktura dokumentu HTML (łatwe)

Poziom: 1

Utwórz poprawny dokument HTML z tytułem Moja pierwsza strona. W treści umieść nagłówek <h1> i akapit <p>.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Moja pierwsza strona</title>
  </head>
  <body>
    <h1>Witaj!</h1>
    <p>To jest mój pierwszy dokument HTML.</p>
  </body>
</html>

Zadanie 2 — Linki i obrazy (łatwe)

Poziom: 1

Dodaj do strony link do https://example.com oraz obrazek z atrybutem alt. Obrazek powinien być klikalny i prowadzić na zewnętrzną stronę.

<a href="https://example.com" target="_blank" rel="noopener">
  <img src="obrazek.jpg" alt="Przykładowy obraz" />
</a>

Zadanie 3 — Listy i semantyka (średnie)

Poziom: 2

Stwórz listę uporządkowaną z trzema elementami: HTML, CSS, JavaScript. Użyj elementu semantycznego, który opisuje listę tematów kursu.

<section>
  <h2>Program kursu</h2>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
</section>

Zadanie 4 — Formularz kontaktowy (średnie)

Poziom: 2

Zaprojektuj prosty formularz z polami: imię, email, wiadomość oraz przyciskiem wyślij. Użyj odpowiednich atrybutów typu i atrybutu required tam, gdzie to konieczne.

<form>
  <label>Imię<input type="text" name="imie" required></label>
  <label>Email<input type="email" name="email" required></label>
  <label>Wiadomość<textarea name="msg" required></textarea></label>
  <button type="submit">Wyślij</button>
</form>

Zadanie 5 — Podstawy CSS: kolory i fonty (średnie)

Poziom: 3

Napisz reguły CSS, które: ustawiają tło strony na ciemne, nagłówek <h1> na kolor zielony i font monospace, oraz przycisk z zaokrąglonymi rogami.

body { background:#0b0f12; color:#e6f0ef }
h1 { color:#7be28a; font-family: monospace }
button { border-radius:8px; padding:8px 12px }

Zadanie 6 — Box model i rozmieszczenie (średnie)

Poziom: 3

Stwórz dwukolumnowy układ: lewy pasek o stałej szerokości 250px i prawą treść, która wypełnia resztę szerokości. Użyj flexboxa.

.container{display:flex}
.sidebar{width:250px}
.content{flex:1}

Zadanie 7 — Responsywność (trudne)

Poziom: 4

Dodaj reguły @media, aby układ z zadania 6 zmieniał się na jedną kolumnę poniżej szerokości 800px. Dodatkowo ukryj sidebar.

@media (max-width:800px){
  .sidebar{display:none}
  .content{width:100%}
}

Zadanie 8 — Flexbox praktycznie (trudne)

Poziom: 4

Ułóż trzy kafelki w rzędzie, równo rozłożone (space-between). Kafelki mają mieć jednakową wysokość i równy odstęp między sobą.

.row{display:flex;justify-content:space-between;gap:12px}
.card{flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;height:120px}

Zadanie 9 — Animacje i przejścia (trudne)

Poziom: 5

Dodaj prostą animację hover do przycisku: delikatne powiększenie i cień. Użyj transform i transition.

button:hover{ transform:scale(1.03); box-shadow:0 10px 30px rgba(0,0,0,0.5) }
button{ transition:transform .2s ease, box-shadow .2s ease }

Zadanie 10 — Zaawansowane selektory i pseudo-elementy (bardzo trudne)

Poziom: 5

Stwórz przycisk z pseudo-elementem ::after, który wyświetla małą ikonę strzałki. Użyj selektora :focus do widocznego outline dla dostępności.

.btn{ position:relative; padding-right:28px }
.btn::after{ content:'➜'; position:absolute; right:10px; top:50%; transform:translateY(-50%) }
.btn:focus{ outline:2px solid #7be28a; outline-offset:3px }

Masz tu 10 ćwiczeń. Jeśli chcesz, przygotuję dodatkowe zadania z przykładami rozwiązań do pobrania (ZIP) lub wersję do wydruku.