Zadanie końcowe – Moduł 1 – Nowoczesny HTML5

🎯 Zadanie końcowe: Twoja pierwsza strona wizytówka

Brawo! Przeszedłeś cały Moduł 1 i zdobyłeś solidne podstawy HTML oraz podstawową wiedzę o CSS. Teraz czas na pierwszy poważny krok w praktyce – stworzenie prostej, ale kompletnej strony internetowej.

🧠 Cel zadania

Stwórz własną stronę wizytówkę w HTML (z podstawowym CSS, jeśli chcesz), która przedstawi np. Ciebie, Twoje zainteresowania, lub fikcyjną firmę. Twoim celem jest zastosowanie jak najwięcej znanych już elementów – struktury dokumentu, nagłówków, tekstów, list, obrazków, formularzy i semantycznych tagów.

📋 Wymagania – co powinno znaleźć się na stronie?

  • Struktura dokumentu HTML:
    • Zacznij od <!DOCTYPE html>, <html>, <head>, <body>
    • W <head> dodaj <meta charset="UTF-8"> oraz tytuł strony (<title>)
  • Główny nagłówek strony (<header>):
    • Dodaj tytuł strony (<h1>)
    • Dodaj menu nawigacyjne w tagu <nav> z listą 3 linków, które prowadzą do sekcji na stronie (użyj np. <a href="#sekcja1">)
  • Treść główna strony:
    • Wstaw co najmniej jeden <section> lub <article>
    • Dodaj nagłówek (<h2> lub <h3>) oraz kilka akapitów (<p>)
    • Wstaw obrazek (<img src="..." alt="...">) – możesz użyć grafiki z Unsplash lub z generatora https://picsum.photos/
    • Dodaj listę wypunktowaną (<ul>) lub numerowaną (<ol>)
  • Formularz kontaktowy:
    • Użyj tagu <form>
    • Dodaj przynajmniej 3 pola: imię (type="text"), email (type="email"), oraz datę (type="date")
    • Dodaj placeholder, required i etykiety <label>
    • Na końcu dodaj przycisk <button>
  • Stopka strony (<footer>):
    • Dodaj informacje o autorze, rok oraz np. kontakt mailowy

🎨 Stylizacja (opcjonalna, ale zachęcana)

Dodaj podstawowe style w sekcji <style> w <head> lub utwórz osobny plik CSS.

Podpowiedzi:

  • Zmień kolor tła strony lub sekcji – background-color
  • Zmień czcionkę nagłówków – font-family
  • Dodaj odstępy – margin i padding

🧰 Gdzie pracować?

Możesz wykonać to zadanie w jednym z narzędzi online:

Lub lokalnie, na komputerze, w edytorze takim jak Visual Studio Code z rozszerzeniem Live Server.

📌 Wskazówki

  • Nie musisz tworzyć pięknej grafiki – skup się na strukturze i poprawności kodu
  • Nie kopiuj kodu – staraj się pisać samodzielnie, ale możesz wracać do lekcji, jeśli czegoś nie pamiętasz
  • Testuj kod na bieżąco – unikniesz frustracji, jeśli coś przestanie działać

✅ Powodzenia!

Po wykonaniu zadania przejdź do quizu końcowego z Modułu 1, aby sprawdzić swoją wiedzę, a następnie rozpocznij Moduł 2: Podstawy HTML – Budujemy stronę.

Previous Zagadnienie
Back to Zagadnienie
Next Quiz