web Projekt: Wizytówka internetowa

Stwórzmy Twoją pierwszą responsywną wizytówkę internetową z pomocą AI! To główny projekt pierwszych zajęć - połączymy w nim wszystko czego się nauczyliśmy.

info Co będziemy tworzyć?

🎯 Nasza wizytówka będzie zawierać:

account_circleHeader

Imię, nazwisko, tytuł zawodowy

personO mnie

Krótki opis, zdjęcie/avatar

buildUmiejętności

Lista technologii (badge'y)

emailKontakt

Formularz + dane kontaktowe

phone_androidResponsywność

Działa na telefonach

animationAnimacje

Hover effects, płynne przejścia

smart_toy Prompt dla AI - skopiuj i użyj!

🤖 Gotowy prompt do skopiowania:

Skopiuj poniższy tekst i wklej do ChatGPT, Claude lub innego AI:

Stwórz kompletną wizytówkę internetową dla [TWOJA SPECJALIZACJA]: ZAWARTOŚĆ: - Header: [TWOJE IMIĘ I NAZWISKO] + [TYTUŁ/POZYCJA] - Sekcja O mnie: [TWÓJ OPIS - 2-3 zdania] - Umiejętności: [LISTA TWOICH SKILLS] - Formularz: imię, email, wiadomość z walidacją HTML5 - Stopka: linki social media WYMAGANIA TECHNICZNE: - Responsywny design (mobile-first) - Nowoczesny CSS (flexbox, grid) - Paleta kolorów: [TWOJE ULUBIONE KOLORY] - Animacje hover na przyciskach i kartach - Czytelne czcionki (Google Fonts) - Formularz z method="POST" i HTML5 walidacją STYL DESIGNU: - Minimalistyczny i profesjonalny - Gradientowe tło lub sekcje - Zaokrąglone rogi (border-radius) - Subtelne cienie (box-shadow) - Spójne odstępy i padding STRUKTURA: - Jeden plik HTML z embedded CSS - Semantic HTML5 tags (header, main, section, footer) - Accessible (alt texts, proper labels) - Clean, readable code Przykład kolorów: niebieski gradient, białe karty, ciemny tekst
lightbulb_outlineWskazówka:

Zastąp elementy w [nawiasach kwadratowych] swoimi danymi przed wysłaniem do AI!

list Krok po kroku - implementacja

1
Przygotuj prompt
  • Skopiuj prompt z sekcji powyżej
  • Zastąp [TWOJA SPECJALIZACJA] np. "Junior Front-end Developer"
  • Wpisz swoje imię, nazwisko, opis
  • Wybierz swoje umiejętności i kolory
2
Wygeneruj kod z AI
  • Otwórz ChatGPT, Claude lub inne AI
  • Wklej przygotowany prompt
  • Poczekaj na wygenerowanie kodu
  • Skopiuj cały kod HTML
3
Stwórz projekt w Cursorze
  • Otwórz Cursor
  • Stwórz nowy folder "wizytowka"
  • Stwórz plik index.html
  • Wklej wygenerowany kod
  • Zapisz plik (Ctrl+S)
4
Uruchom Live Server
  • Kliknij prawym przyciskiem na index.html
  • Wybierz "Open with Live Server"
  • Strona otworzy się w przeglądarce
  • Każda zmiana w kodzie automatycznie odświeży stronę
5
Przetestuj responsywność
  • Otwórz DevTools (F12)
  • Kliknij ikonę telefonu lub Ctrl+Shift+M
  • Przetestuj na różnych urządzeniach
  • Sprawdź czy wszystko wygląda dobrze

palette Personalizacja i dostosowania

Treść
  • Zmień imię i nazwisko
  • Dostosuj sekcję "O mnie"
  • Zaktualizuj listę umiejętności
  • Dodaj swoje dane kontaktowe
Wygląd
  • Zmień kolory na swoje ulubione
  • Dostosuj czcionki
  • Dodaj/usuń sekcje
  • Eksperymentuj z animacjami
tips_and_updatesPomoc AI:

Jeśli chcesz coś zmienić, poproś AI:

"Zmień kolor główny na zielony w tym kodzie HTML" "Dodaj sekcję Portfolio z 3 przykładowymi projektami" "Zrób czcionkę większą w sekcji nagłówka"

checklist Checklist - co sprawdzić?

✅ Lista kontrolna:

arrow_forward Następne kroki

Gdy Twoja wizytówka jest gotowa, czas ją opublikować:

cloud_upload Publikujmy na GitHub
home