Zadanie końcowe – Moduł 2: Stwórz stronę – Kontakt i oferta

🎯 Zadanie końcowe Modułu 2

Twoim zadaniem jest stworzenie prostej strony internetowej, która zawiera ofertę oraz formularz kontaktowy.
W ten sposób wykorzystasz wszystkie umiejętności zdobyte w tym module!

✅ Cel zadania:

Stworzysz kompletną stronę HTML, która będzie zawierać:

• Nagłówki <h1> i <h2>.
• Akapity z sformatowanym tekstem (pogrubienie, kursywa, cytaty).
• Tabelę z ofertą produktów lub usług.
• Formularz kontaktowy z różnymi typami pól.

✅ Gdzie pracować?

Możesz wykonać to zadanie na dwa sposoby:

• ✅ Najprościej: w JSFiddle.
  Wystarczy, że wkleisz kod HTML w odpowiednią sekcję i klikniesz Run, aby zobaczyć efekty.
• ✅ Jeżeli wcześniej zainstalowałeś edytor kodu (np. VS Code + Live Server), możesz pracować lokalnie i otwierać stronę w przeglądarce.

Jeśli nie masz zainstalowanego żadnego edytora, polecam skorzystać z JSFiddle – to szybkie i wygodne rozwiązanie.

✅ Krok po kroku – co zrobić?

1. Dodaj strukturę dokumentu HTML5 i nadaj stronie tytuł „Kontakt i oferta”.
2. Dodaj nagłówek <h1> z nazwą firmy lub strony.
3. Dodaj kilka akapitów tekstu opisującego Twoją działalność, używając:
   • <strong> do podkreślenia ważnych informacji.
   • <em> do zaznaczenia istotnych fraz.
   • <q> do wstawienia krótkiego cytatu.
4. Wstaw tabelę z ofertą (np. produktów lub usług). Tabela powinna zawierać:
   • Trzy kolumny: Nazwa produktu/usługi, Opis, Cena.
   • Przynajmniej dwa wiersze z danymi.
   • Jeśli chcesz, połącz niektóre komórki tabeli przy pomocy colspan lub rowspan.
5. Dodaj formularz kontaktowy z polami:
   • Imię i nazwisko (pole tekstowe).
   • Adres e-mail (pole tekstowe typu email).
   • Wiadomość (pole <textarea>).
   • Listę rozwijaną (np. wybór tematu wiadomości: „Zapytanie”, „Reklamacja”, „Inne”).
   • Checkbox zgody na przetwarzanie danych osobowych.
   • Przycisk „Wyślij”.
6. Pogrupuj pola formularza przy pomocy <fieldset> i podpisz grupę za pomocą <legend>.

✅ Dodatkowe wskazówki:

• Dodaj etykiety <label> do każdego pola formularza, aby poprawić dostępność i ułatwić obsługę formularza.
• Dbaj o czytelność kodu – rób wcięcia i porządkuj strukturę.
• Pamiętaj, aby formularz był zrozumiały dla użytkownika – używaj placeholder lub podpowiedzi w etykietach.
• Jeśli czegoś nie pamiętasz, wróć do wcześniejszych lekcji, aby przypomnieć sobie szczegóły.

🎯 Przykład w JSFiddle

Po zakończeniu, przetestuj kod w JSFiddle.
Wklej cały swój kod w sekcji HTML i kliknij Run, aby zobaczyć, jak działa Twoja strona.

Jeśli pracujesz w VS Code, uruchom Live Server i sprawdź efekt w swojej przeglądarce.

✅ Po wykonaniu zadania:

• Sprawdź, czy formularz działa – możesz wpisać dane i przetestować pola wyboru.
• Zadbaj o to, aby tabela była czytelna, a dane dobrze rozmieszczone.

🚀 Gotowe? Świetnie!

Kliknij „Zakończ temat” i przejdź do quizu podsumowującego Moduł 2.

Powodzenia! 💪