Plan Szkolenia
Struktura i Styl (HTML & CSS)
Wprowadzenie & Technologie Webowe
- Jak działa sieć: Proste wyjaśnienie modelu klient-serwer.
- Przeglądarka jako komputer: Interpretacja kodu.
- HTML: Szkielet strony internetowej. Struktura, hierarchia i tagi semantyczne.
- CSS: Stylowanie strony. Kolory, czcionki i model pudełkowy.
- Lab 1: Konfiguracja środowiska i stworzenie statycznej strony „O mnie”.
Praca z HTML & CSS (Głębsze zagłębienie)
- HTML: Listy, linki, obrazy i formularze (niezbędne do interakcji z użytkownikiem).
- CSS: Stylowanie tekstu i tła. Wprowadzenie do Flexbox i Grid do nowoczesnych układów.
- Responsywny design: Dostosowanie strony do urządzeń mobilnych i desktopowych.
- Lab 2: Dopracowanie statycznej strony z profesjonalnym stylowaniem i responsywnością.
Praca z DOM (Document Object Model)
- Koncepcja: Zrozumienie, jak kod odnosi się do wizualnej strony.
- Wybór elementów: Jak wskazać konkretne części strony.
- Manipulacja: Zmiana treści i atrybutów za pomocą kodu.
- Lab 3: Modyfikacja elementów statycznej strony za pomocą kodu (np. dynamiczna zmiana tytułu lub obrazu).
Mózg (JavaScript)
Programowanie w JavaScript (Podstawy)
- Zmienne & Typy danych: Przechowywanie informacji (tekst, liczby, prawda/fałsz).
- Logika: Instrukcje warunkowe if/else (podejmowanie decyzji).
- Pętle: Efektywne powtarzanie działań.
- Funkcje: Tworzenie wielokrotnie używanych bloków kodu (koncept „przepisu”).
- Lab 4: Tworzenie podstawowego kalkulatora lub gry logicznej w JavaScript.
Interaktywność & Zdarzenia
- Nasłuchiwanie zdarzeń: Reagowanie na kliknięcia, naciśnięcia klawiszy i ładowanie strony.
- Obsługa formularzy: Walidacja danych wprowadzonych przez użytkownika (np. sprawdzanie, czy e-mail jest prawidłowy).
- Manipulacja DOM: Dynamiczne dodawanie i usuwanie elementów (np. lista zadań).
- Lab 5: Przekształcenie kalkulatora w interaktywną aplikację webową z interfejsem użytkownika.
Pobieranie danych (API)
- Koncepcja: Jak aplikacje webowe komunikują się z innymi serwerami (np. pobieranie danych pogodowych lub cen akcji).
- JSON: Język wymiany danych.
- Programowanie asynchroniczne: Zrozumienie logiki „Poczekaj, a potem zrób” bez blokowania przeglądarki.
- Lab 6: Tworzenie funkcji, która pobiera dane z publicznego API i wyświetla je na stronie.
Profesjonalne narzędzia (Frameworki & Projekt końcowy)
Korzystanie z Frameworków Programistycznych
- Dlaczego używać frameworków? (Koncepcje React, Vue lub Svelte).
- Komponenty: Tworzenie modułowych, wielokrotnie używanych elementów interfejsu.
- Zarządzanie stanem: Śledzenie zmieniających się danych.
- Ekologia: Zrozumienie pakietów, zależności i kontroli wersji (Git).
- Lab 7: Refaktoryzacja prostej funkcji z użyciem podejścia komponentowego.
Projekt końcowy: Tworzenie Aplikacji Webowej
- Wymaganie: Uczestnicy muszą stworzyć funkcjonalną aplikację webową (np. tracker budżetu, panel produktowy lub strona portfolio).
- Planowanie: Definiowanie „User Story” i zakresu technicznego.
- Implementacja: Łączenie struktury HTML/CSS z logiką JavaScript.
- Debugowanie: Jak czytać komunikaty o błędach i naprawiać błędy logiczne.
- Prezentacja: Prezentacja końcowej aplikacji grupie.
Podsumowanie & Następne kroki
- Słownictwo techniczne: Ściągawka do komunikacji z inżynierami (API, Backend, Frontend, Git, Deployment).
- Przewodnik po zasobach: Gdzie uczyć się więcej (Dokumentacja, StackOverflow, MDN).
- Integracja zawodowa: Jak te umiejętności pomagają w rolach Product Management i Design.
- Pytania i odpowiedzi oraz ewaluacja kursu.
Wymagania
- Podstawowe umiejętności obsługi komputera
- Nie jest wymagane wcześniejsze doświadczenie w programowaniu
Opinie uczestników (2)
Naprawdę podobało mi się uczenie się o atakach AI i dostępnych narzędziach do rozpoczęcia praktyki i aktywnego wykorzystywania w testach bezpieczeństwa. Wyniosłem z kursu wiele wiedzy, której nie miałem na początku, a kurs spełnił moje oczekiwania. Moim ulubionym elementem szkolenia był Comet Browser i byłem zdumiony tym, co potrafi. Zdecydowanie będę się temu przyglądać bliżej. Ogólnie rzecz biorąc, był to świetny kurs i cieszyłem się, ucząc się wszystkiego o OWASP GenAI Top 10.
Patrick Collins - Optum
Szkolenie - OWASP GenAI Security
Przetłumaczone przez sztuczną inteligencję
Każda lekcja techniczna była opatrzona wieloma praktycznymi ćwiczeniami, aby utrwalić omawiane koncepcje.
Andrei-Calin Bajea
Szkolenie - OWASP Top 10 2025
Przetłumaczone przez sztuczną inteligencję