Zadanie końcowe – Moduł 1 – Twoja pierwsza strona wizytówka

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

Gratulacje! Dotarłeś do końca Modułu 1: Wprowadzenie do HTML i CSS. Teraz czas na wykorzystanie zdobytej wiedzy w praktyce.

Twoim zadaniem jest stworzenie prostej strony internetowej – wizytówki o sobie. W ten sposób przećwiczysz korzystanie z podstawowych elementów HTML oraz dowiesz się, jak podłączyć własne style CSS.

✅ Co ma zawierać Twoja strona?

Zbuduj stronę według poniższych wytycznych. Jeśli nie pamiętasz, jak coś zrobić, możesz wrócić do odpowiedniej lekcji i przypomnieć sobie materiał.

  1. Struktura dokumentu HTML
    • Dodaj deklarację doctype: <!DOCTYPE html>
    • Utwórz podstawowy szkielet strony z elementami: <html>, <head> i <body>
  2. Nagłówek strony
    • Dodaj nagłówek <h1> – może to być Twoje imię i nazwisko albo nazwa wymyślonej strony.
  3. Krótki opis
    • Dodaj akapit <p>, w którym napiszesz kilka zdań o sobie. Na przykład: czym się zajmujesz, jakie są Twoje pasje.
  4. Lista zainteresowań lub umiejętności
    • Utwórz listę nieuporządkowaną <ul> z przynajmniej trzema elementami <li>.
    • Na przykład: Twoje hobby, umiejętności, ulubione książki itp.
  5. Link do ulubionej strony internetowej
    • Dodaj element <a>, który przeniesie użytkownika do innej strony www (np. ulubionej strony, kanału YouTube, itp.).
    • Ustaw atrybut target="_blank", aby link otwierał się w nowej karcie przeglądarki.
  6. Obrazek
    • Dodaj element <img> i wyświetl dowolne zdjęcie.
    • Może to być avatar, logo lub obrazek znaleziony w internecie (upewnij się, że adres URL do obrazka działa!).
    • Dodaj atrybut alt, który opisuje obrazek.
  7. Podłączony arkusz CSS (proste style)
    • Dodaj blok <style> wewnątrz sekcji <head>.
    • Utwórz selektor dla przynajmniej jednego elementu, np.:
      h1 {
  color: darkblue;
  text-align: center;
}
    • Możesz użyć klas lub ID, które poznaliśmy w lekcjach o selektorach.
    • Dodanie jednego stylu wystarczy – dalsza stylizacja pojawi się w kolejnych modułach.

✅ Gdzie wykonać zadanie?

Jeśli nie masz zainstalowanego edytora na swoim komputerze, skorzystaj z narzędzia online:

JSFiddle – umożliwia szybkie testowanie kodu HTML i CSS w przeglądarce.

Jak to zrobić w JSFiddle?
  1. Przejdź na stronę https://jsfiddle.net
  2. W sekcji HTML wklej kod HTML swojej strony.
  3. W sekcji CSS wklej style z bloku <style> (bez tagów <style> – same reguły CSS).
  4. Kliknij przycisk Run, aby zobaczyć efekt działania strony.

✅ Potrzebujesz pomocy?

Jeśli czegoś nie pamiętasz lub masz wątpliwości, wróć do wcześniejszych lekcji:

  • 📚 Lekcja 1 – Jak działają strony internetowe
  • 📚 Lekcja 2 – Pierwszy dokument HTML
  • 📚 Lekcja 3 – Podstawowe znaczniki HTML
  • 📚 Lekcja 4 – Pierwsze kroki z CSS

W każdej z tych lekcji znajdziesz dokładne wyjaśnienia oraz przykłady, które pomogą Ci wykonać zadanie.

✅ Co dalej?

Po ukończeniu zadania możesz zapisać link do swojego projektu w JSFiddle, aby wrócić do niego później.

W kolejnych modułach nauczysz się, jak:

  • Dodawać więcej stylów CSS
  • Zarządzać układem strony
  • Tworzyć bardziej rozbudowane projekty!

✅ Powodzenia!

Nie przejmuj się, jeśli nie wszystko od razu działa perfekcyjnie – praktyka czyni mistrza! 💪

Previous Zagadnienie
Back to Zagadnienie
Next Quiz