Ćwiczenie: Portfolio ucznia w HTML5 + AI + publikacja

Temat:

Tworzenie własnego portfolio w technologii HTML5 z wykorzystaniem narzędzi AI oraz publikacja strony w Internecie.

Cele ćwiczenia:

Uczeń:

• wybiera i analizuje swoje najlepsze prace,
• przygotowuje grafiki do publikacji (miniatury PNG),
• wykorzystuje narzędzia AI do generowania kodu HTML i CSS,
• tworzy statyczną stronę internetową,
• publikuje stronę w serwisie hostingowym.

Zadanie:

Twoim zadaniem jest stworzenie własnego portfolio online, prezentującego Twoje najlepsze prace z całego okresu nauki w technikum (do 5 lat).

Etap 1 – Wybór prac

1. Wybierz minimum 6–10 najlepszych projektów, np.:
   • plakaty,
   • logo,
   • projekty DTP,
   • modele 3D,
   • wizualizacje,
   • prace fotograficzne.
2. Do każdej pracy przygotuj:
   • tytuł,
   • krótki opis (1–3 zdania),
   • rok wykonania.

Etap 2 – Przygotowanie miniatur

1. Dla każdej pracy przygotuj:
   • miniaturę w formacie PNG,
   • rozmiar np. 800 × 600 px (lub proporcjonalny),
   • zoptymalizowaną wagę (maks. ~300 KB).
2. Nazwij pliki w logiczny sposób, np.:

Etap 3 – Wykorzystanie AI

Użyj dowolnego narzędzia AI (np. ChatGPT, Copilot) do wygenerowania strony.

Twoje zadanie:

Wygeneruj prompt, np.: „Stwórz prostą stronę portfolio w HTML5 i CSS. Strona ma zawierać:

• nagłówek z imieniem i nazwiskiem,
• sekcję ‘O mnie’,
• galerię projektów (siatka miniatur),
• kliknięcie miniatury powiększa obraz,
• responsywny układ (grid),
• estetyczny wygląd.”

Etap 4 – Budowa strony

Strona powinna zawierać:

Struktura:

• <header> – imię i nazwisko
• <section> – O mnie
• <section> – Portfolio (galeria)
• <footer> – kontakt

Wymagania:

• użycie HTML5 (semantyczne znaczniki),
• stylowanie w CSS,
• układ galerii (grid lub flexbox),
• działające linki lub powiększenia zdjęć,
• estetyczny wygląd.

Etap 5 – Publikacja (Netlify)

Opublikuj swoją stronę za pomocą: Netlify

Instrukcja:

1. Wejdź na stronę Netlify
2. Zaloguj się (np. konto Google)
3. Wybierz opcję:
   „Add new site → Deploy manually”
4. Przeciągnij folder ze stroną (HTML + CSS + obrazy)
5. Otrzymasz link do swojej strony (np. twojanazwa.netlify.app)

Wymagania końcowe:

✔ minimum 6 prac
✔ miniatury PNG
✔ strona HTML + CSS
✔ wykorzystanie AI
✔ publikacja online
✔ działający link do portfolio

Kryteria oceny:

Razem: 25 pkt

Zadanie dodatkowe (dla chętnych):

• animacje CSS,
• tryb ciemny (dark mode),
• filtr kategorii prac,
• osobna podstrona dla projektu,
• formularz kontaktowy.

Oddanie pracy:

Uczeń oddaje:

• link do strony (Netlify),
• prompty użyte w AI.

Was this helpful?

YesNo

0 / 0