Strony internetowe z AI

Podczas zajęć uczestnicy poznają środowisko Visual Studio Code i podstawy języka HTML. Dowiedzą się czym jest HTML, jak działa struktura dokumentu oraz jak używać podstawowych znaczników do budowania treści strony. Na końcu lekcji każdy uczestnik stworzy prostą stronę o swoim ulubionym superbohaterze lub idolu - z nagłówkiem, obrazkiem, opisem, listą i hiperłączem.

Uczniowie dowiedzą się czym jest kaskadowy arkusz stylów (CSS), jak go dodać wewnętrznie do strony HTML i jak za pomocą selektorów znaczników, id oraz klas nadać wygląd poszczególnym elementom. Efektem końcowym będzie prosta strona bloga złożona z nagłówka, banera i sekcji z wpisami stylizowanymi na posty z Facebooka.

Uczniowie poznają model blokowy CSS (margin, border, padding) oraz znaczniki sekcji HTML. Na zajęciach zbudują kartę gracza z sekcjami: bio, ekwipunek i osiągnięcia, stosując box model do stylowania każdego bloku. Dzięki temu zrozumieją, jak przeglądarka oblicza rozmiary elementów i jak tworzyć czytelne układy stron.

Podczas lekcji budujemy prostą stronę HTML5 z semantycznym układem zawierającym nawigację, nagłówek, sekcje treści i stopkę. Na koniec zajęć każdy uczeń będzie miał działającą stronę z przewijaną nawigacją i czytelną strukturą.

Lekcja wprowadza uczniów w świat koloru i kształtu w CSS - od modeli barw i sposobów zapisu kolorów, przez zaokrąglenia i cienie, aż do gradientów. Uczestnicy budują krok po kroku pocztówkę z krajobrazem złożonym wyłącznie z elementów HTML i CSS, eksperymentując z właściwościami wizualnymi.

Na zajęciach tworzymy galerię zdjęć w HTML i CSS, ucząc się kontrolowania układu i przepływu elementów na stronie. Poznajemy sposoby na uzyskanie responsywności, aby galeria wyglądała poprawnie na różnych rozmiarach ekranów.

Na tej lekcji uczniowie poznają trzy sposoby ożywiania stron internetowych: transformacje, przejścia i animacje w CSS. Krok po kroku zbudują interaktywną scenę z ambulansem, w której syrena miga po najechaniu myszką, koła obracają się bez przerwy, a tabliczka płynnie się powiększa. Efektem końcowym jest gotowa, ruchoma strona, którą każdy uczeń może dalej rozbudowywać i pokazać jako własny projekt.

Uczestnicy utrwalą zasady responsywności i powtarzają wiadomości z box modelu, gradientów, kolorów oraz semantycznego HTML5. W trakcie zajęć zaprojektują i samodzielnie zbudują responsywny projekt rankingu telefonów, układając karty w elastycznej siatce, która dobrze wygląda na różnych ekranach. Wykorzystają też AI do wygenerowania aktualnej treści rankingu oraz grafik modeli telefonów.

Uczestnicy tworzą interaktywną stronę internetową, łącząc HTML, CSS i JavaScript w jednym projekcie. Podczas zajęć poznają obsługę zdarzeń, pracę ze zmiennymi, budowanie licznika oraz mechanizm losowania elementów z tablicy. Efektem lekcji jest responsywna strona z układem flexbox, działającym licznikiem, losowaniem i osadzonym zewnętrznym widgetem.

Uczniowie poznają DOM i nauczą się odczytywać oraz zmieniać elementy strony za pomocą JavaScript. Podczas lekcji zbudują kreator avatara z dwoma trybami postaci, przełączanymi jednym przyciskiem. Na koniec zajęć każdy uczeń będzie miał działającą stronę, na której kliknięcie zmienia obrazek, tekst i kolor tła.

Uczniowie poznają podstawy tworzenia formularzy w HTML, używając znaczników form, label, input i textarea. Nauczą się dodawać walidację pól za pomocą atrybutów required i type="email" oraz obsługiwać wysłanie formularza w JavaScript. Na koniec lekcji każdy uczeń będzie miał działający formularz kontaktowy, który odczytuje wpisane dane i wyświetla je w czytelnej formie na stronie.

Uczestnicy poznają podstawy projektowania UX, tworząc mini-grę z uciekającym przyciskiem. W trakcie lekcji połączą CSS i JavaScript - nauczą się pozycjonowania elementów, animacji oraz losowania pozycji w granicach okna. Efektem końcowym będzie działająca gra z przyciskiem, który ucieka przed kursorem, licznikiem kliknięć i warunkiem wygranej.

Uczniowie poznają tablice w JavaScript i nauczą się wybierać z nich elementy po indeksie oraz losowo. Podczas lekcji zbudują interaktywny album kolekcjonerski, w którym kliknięcie przycisku losuje naklejkę i dodaje ją do tabeli HTML. Na koniec zajęć każdy uczeń będzie miał działającą aplikację z rosnącą kolekcją wylosowanych naklejek.

Automatyczna galeria restauracji. Na zajęciach zostanie udoskonalony projekt restauracji. Za pomocą języka JavaScript zostanie dodana automatyczna galeria.

Celem zajęć będzie stworzenie responsywnej strony z użyciem modułu Flexbox oraz Media queries. Strona będzie posiadać wydzielone sekcje. Uczestnicy będą mogli spersonalizować swoje strony poprzez własne materiały (zdjęcia, filmy).

Podczas tej lekcji uczniowie stworzą interaktywny quiz o bossach z gier, łącząc HTML, CSS i JavaScript w jeden działający projekt. Przećwiczą formularze, strukturę dokumentu HTML i importowanie plików na stronę. Na koniec quiz będzie sprawdzał poprawność odpowiedzi i kolorował pytania w zależności od wyniku.

Celem zajęć będzie przygotowanie interaktywnego quizu o bossach z naszych ulubionych gier. Całość zostanie sformatowana przy użyciu języka CSS.

Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.

Celem lekcji jest przypomnienie dzieciom, czym są zmienne. Nauczą się je tworzyć oraz wykorzystywać w języku JavaScript. Dodatkowe uczestnicy poznają różne rodzaje operatorów arytmetycznych oraz przypisania.

Celem lekcji jest przypomnienie dzieciom, czym jest instrukcja warunkowa. Uczniowie poznają sposób tworzenia instrukcji warunkowych w języku JavaScript. Uczestnicy poznają operatory logiczne służące to tworzenia rozbudowanych warunków, a także instrukcje switch.

Celem lekcji jest poznanie przez uczestników funkcji. Dodatkowo, uczestnicy poznają popularne metody operacji na typach tekstowych.

Celem lekcji jest poznanie przez uczestników Tablic. Uczestnicy poznają popularne operacje na tablicach.

Celem lekcji jest poznanie przez uczestników pętli. Uczestnicy poznają pętle for oraz while i wykorzystają je w zadaniach.

Celem lekcji jest poznanie przez czym są i jak tworzy się obiekty w JavaScript.

Powtórzenie wiadomości - quiz.

Celem lekcji jest poznanie przez uczestników idei DOM. Uczestnicy stworzą proste interakcje na stronie internetowej.

Celem lekcji będzie przygotowanie listy do której będziemy mogli dodawać nowe zadania oraz usuwać już te wykonane. Całość będzie można wydrukować.

Celem zajęć będzie stworzenie gry „Wisielec” (szubienica) która, polega na odgadywaniu słów.

Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.

Celem zajęć będzie stworzenie rozbudowanej gry dla dwóch graczy polegającej na rzucaniu kością i zdobywaniu punktów. Dodatkowo, w grze określimy warunki zwycięstwa i przegranej, utraty punktów.

Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.

Celem zajęć będzie dodanie nowych funkcjonalności do gry w kości oraz zaprezentowanie Visual studio oraz język Python.

Celem zajęć będzie stworzenie aplikacji do tworzenia memów z możliwością ich zapisywania.

Celem zajęć będzie rozbudowanie projektu z poprzednich zajęć.

Na lekcji przygotujemy własną wersję Twittera. Skupimy się na dodaniu odpowiednich elementów naszego forum, ostylowaniu ich jak w klasycznej wersji Twittera oraz przejdziemy do pracę nad funkcjonalnością naszego forum.

Celem zajęć będzie rozbudowanie projektu z poprzednich zajęć.