Publikacja elektroniczna – strona WWW dla doradcy finansowego
Temat:
Zaprojektowanie i opublikowanie strony internetowej (landing page) dla doradcy finansowego Adam Gruszka – Bolków
Założenia techniczne:
- strona typu: landing page (jedna strona)
- technologie: HTML5 + CSS3 (opcjonalnie JS)
- układ: responsywny (RWD)
-
struktura plików:
/projekt
├── index.html
├── style.css
├── /img - publikacja: Netlify (hosting darmowy)
Treść strony (content)
Sekcja HERO:
Zadbaj o swoją przyszłość finansową!
Profesjonalne doradztwo finansowe w Bolkowie
Przycisk: Umów konsultację
O mnie:
Adam Gruszka
Certyfikowany doradca finansowy z wieloletnim doświadczeniem. Pomagam klientom indywidualnym i firmom podejmować trafne decyzje finansowe.
Oferta:
- Kredyty hipoteczne i gotówkowe
- Konsolidacja zobowiązań
- Ubezpieczenia
- Inwestowanie i oszczędzanie
- Planowanie budżetu
Dlaczego warto:
- Indywidualne podejście
- Bezpłatna konsultacja
- Współpraca z wieloma bankami
- Szybkie decyzje
Kontakt:
📍 Bolków
📞 600 123 456
📧 adam.gruszka@finanse.pl
👉 Przycisk: Skontaktuj się
Zadanie główne:
- Wybierz narzędzie AI (np. ChatGPT lub Copilot).
- Wygeneruj kod strony (HTML + CSS) na podstawie powyższego contentu.
- Dostosuj wygenerowany kod:
- popraw błędy,
- zmień kolory i fonty,
- dodaj obrazy lub ikony.
- Sprawdź działanie strony lokalnie (np. w VS Code).
Publikacja na Netlify:
- Wejdź na stronę: https://netlify.app
- Zarejestruj się / zaloguj
- Przeciągnij folder projektu (drag & drop)
- Otrzymasz link do swojej strony (np.
twojprojekt.netlify.app)
Wymagania projektowe:
- spójna kolorystyka (np. granat + złoto / zieleń),
- czytelna typografia (max 2–3 fonty),
- podział na sekcje (hero, oferta, kontakt),
- użycie ikon (np. Font Awesome),
- estetyczny układ (grid / flexbox),
- wersja mobilna (RWD).
Zadania dodatkowe:
- dodanie formularza kontaktowego,
- animacje (hover, scroll),
- sekcja opinii klientów,
- kod QR do strony,
- optymalizacja SEO (meta tagi).
Kryteria oceny:
| Kryterium | Punkty |
|---|---|
| Poprawność kodu HTML/CSS | 0–5 |
| Estetyka i UX | 0–5 |
| Responsywność | 0–5 |
| Wykorzystanie AI | 0–5 |
| Publikacja na Netlify | 0–5 |
Wskazówka dla ucznia:
- AI pomaga, ale nie robi wszystkiego za Ciebie — Twoim zadaniem jest poprawić i dopracować projekt, tak aby wyglądał profesjonalnie.
- Pamiętaj, że prawdziwą sztuką jest stworzyć właściwego prompta dla AI.
Was this helpful?
0 / 0