// po co to robisz

Co osiągniesz po tej misji

Po ukończeniu misji będziesz mieć własną stronę internetową z nagłówkiem, treścią, zdjęciami i przyciskiem. Naprawdę — to brzmi banalnie, ale kiedy zobaczysz to w przeglądarce, jest mega satysfakcjonujące.

📄

Własna strona HTML

Nauczysz się struktury każdej strony w internecie — od nagłówka po stopkę.

Łatwe

🎨

Style CSS

Zmienisz kolory, czcionki i układ. Twoja strona będzie wyglądać jak chcesz.

Łatwe

⚡

Interakcja z JS

Dodasz przycisk, który coś robi — pierwszy krok do programowania!

Średnie

📱

Wygląd na telefonie

Strona będzie działać zarówno na komputerze, jak i na smartfonie.

Średnie

// jak to robimy

5 kroków do własnej strony

Otwórz edytor kodu

Możesz użyć VS Code (do pobrania za darmo) lub online: codepen.io — działaj od razu w przeglądarce, bez instalacji.

Utwórz plik index.html

Każda strona zaczyna się od pliku HTML. Wpisz podstawową strukturę: doctype, html, head, body.

Dodaj treść strony

Nagłówek h1, paragraf p, zdjęcie img — to podstawowe tagi. Każdy coś znaczy i ma swoje miejsce.

Nadaj styl w CSS

Zmień tło, kolor tekstu, wielkość liter. CSS to jak "makijaż" dla strony — możesz zmienić wszystko.

Wrzuć na serwer lub pokaż znajomym

GitHub Pages to darmowy hosting. Twoja strona dostaje prawdziwy adres URL — możesz wysłać znajomym!

// twój pierwszy kod

Tak wygląda najprostsza strona

Skopiuj ten kod, wklej do pliku index.html i otwórz w przeglądarce. Zobaczysz efekt natychmiast.

      
<!DOCTYPE html>

<html lang="pl">

<head>

  <meta charset="UTF-8">

  <title>Moja pierwsza strona</title>

  <style>

    body { background: #1a1a2e; color: white; font-family: Arial; text-align: center; }

    h1 { color: #00d4ff; font-size: 3rem; margin-top: 80px; }

    button { background: #00d4ff; color: black; padding: 12px 28px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; }

  </style>

</head>

<body>

  <h1>Witaj, świecie! 👋</h1>

  <p>Moja pierwsza strona internetowa — zrobiona przeze mnie!</p>

  <button onclick="alert('Działa! 🎉')">Kliknij mnie!</button>

</body>

</html>

index.html

Podgląd →

<h1>Witaj, świecie! 👋</h1>
<p>Moja pierwsza strona...</p>
<button onclick="alert('Działa!')">
Kliknij mnie!
</button>

Witaj, świecie! 👋

Moja pierwsza strona — zrobiona przeze mnie!

Gotowy/a na więcej? 🚀

Dołącz do INF.03 i rozbuduj tę stronę do pełnoprawnego projektu w portfolio. Nauczyciele prowadzą każdy krok.

Dołącz do INF.03 → Następna misja: Gra 🎮

Misja: Mistrz HTML

Co osiągniesz po tej misji

5 kroków do własnej strony

Tak wygląda najprostsza strona

Witaj, świecie! 👋

Gotowy/a na więcej? 🚀