Moje hobby – strona demonstracyjna

Opis projektu

Projekt stanowi prostą stronę internetową stworzoną w HTML5, CSS3 oraz JavaScript.
Celem jest zaprezentowanie podstawowych technologii front-endowych w praktyce.

Strona zawiera:

• Menu nawigacyjne z przyciskiem typu hamburger dla urządzeń mobilnych.
• Trzy podstrony:
  • index.html – strona główna z sekcją wprowadzającą i przykładowymi kartami.
  • o-mnie.html – podstrona z opisem autora/hobby, przykład układu w Flexbox.
  • galeria.html – podstrona z prostą galerią wykorzystującą CSS Grid.
• Przykłady układów:
  • Flexbox – elastyczne karty i dwie kolumny.
  • CSS Grid – responsywna siatka galerii.
  • div – elementy kontenerowe w strukturze strony.

Całość została napisana w podejściu mobile-first – strona działa poprawnie zarówno na komputerach, jak i urządzeniach mobilnych.

---

Technologie

• HTML5 – struktura i semantyka strony.
• CSS3 – stylizacja, responsywność, układy Flexbox i Grid.
• JavaScript (ES6) – obsługa menu mobilnego.

---

Struktura projektu

hobby-site/
│
├── index.html      # strona główna
├── o-mnie.html     # podstrona "O mnie"
├── galeria.html    # podstrona "Galeria"
├── style.css       # arkusz stylów
└── script.js       # skrypt obsługujący menu

---

Uruchomienie lokalne

Opcja 1 – otwarcie pliku

Kliknij dwukrotnie plik index.html i otwórz go w przeglądarce.
(Uwaga: część funkcji JS może nie działać poprawnie w trybie file://.)

Opcja 2 – prosty serwer HTTP

W katalogu projektu uruchom w terminalu:

# Python 3 (Linux/macOS/Windows)
python3 -m http.server 8000

Następnie otwórz w przeglądarce adres:
👉 http://localhost:8000

---

Polecane materiały do nauki

HTML i CSS

• MDN Web Docs – HTML
• MDN Web Docs – CSS
• Flexbox Froggy – interaktywna gra ucząca Flexbox.
• CSS Grid Garden – gra do nauki CSS Grid.

JavaScript

• MDN Web Docs – JavaScript
• javascript.info – praktyczny przewodnik po JS.

Responsywność i dobre praktyki

• A Complete Guide to Flexbox – CSS Tricks
• A Complete Guide to Grid – CSS Tricks
• W3Schools – Responsive Web Design

---

Autor

Szablon edukacyjny przygotowany jako punkt wyjścia do własnych projektów studenckich.
Zachęca się do rozwijania treści i personalizacji strony zgodnie z własnym hobby.