Bądźmy w kontakcie

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
 21 godzin

Liczba uczestników


Cena za uczestnika (netto)

Opinie uczestników (2)

Propozycje terminów

Powiązane Kategorie