Wprowadzenie
Nauczymy się tworzyć strony w Trinket. Poznamy HTML, CSS oraz podstawy JavaScrip. Zaprojektujemy katalogi gier. Wykorzystamy Gemini i ChatGPT do generowania grafiki, logo, tekstów i planowania układu. Nauczymy się budować strukturę, tworzyć elementy interaktywne, dodawać muzykę i głos AI.
Program kursu
1Lekcja 1. Pierwsza strona WWW
Przedstawiona zostanie struktura dokumentu HTML. Każdy uczestnik zostanie zapoznany z edytorem online - Trinket . Zostaną pokazane podstawowe znaczniki, umożliwiające dodawanie treści na stronie takie jak np. nagłówki, tekst oraz hiperłącza.
2Lekcja 2. Grafika i multimedia na stronie
Na lekcji zostanie pokazane jak dodać zasoby pochodzące z innych stron. Uczniowie dodadzą na swojej stronie obrazy, ikonki ,filmy, dokument pdf i interaktywną mapę. Każdy uczestnik stworzy projekt „Moje miasto”.
3Lekcja 3. Blog kulinarny - cz. I
Uczniowie przygotują projekt bloga kulinarnego. Poznają listy i ich rodzaje, a także język CSS za pomocą, którego zmienią wygląd swojej strony. Ponadto, każdy uczestnik zaimportuje i użyje w swoim projekcie wybrane czcionki Google Fonts oraz system dodawania komentarzy Disqus.
4Lekcja 4. Blog kulinarny - cz. II
Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.
5Lekcja 5. Ranking telefonów
Prezentacja danych odbędzie się za pomocą tabel. Uczniowie nauczą się tworzyć oraz odpowiednio formatować tabele. Uczestnicy przygotują tabelę, w której zestawią ze sobą według nich najlepsze telefony i umieszczą w tabeli najważniejsze informacje o danym modelu.
6Lekcja 6. Formularze
Celem lekcji jest zapoznanie ze sposobami tworzenia formularzy za pomocą różnych komponentów – pól tekstowych, przycisków, pól wyboru, list rozwijanych. Na zajęciach zostanie przygotowany obszerny formularz kontaktowy oraz mechanika przesyłania danych z formularza na skrzynkę pocztową
7Lekcja 7. Własna strona uczniów. QUIZ
Na zajęciach uczniowie tworzą stronę na wybrany przez siebie temat, strona powinna zawierać jak najwięcej elementów poznanych do tej pory.
8Lekcja 8. Mój pupil
Celem lekcji jest zapoznanie się ze znacznikiem <div> i za jego pomocą
wydzieleniem sekcji na stronie. Uczniowie stworzą projekt strony na temat swojego
ulubionego zwierzaka.
9Lekcja 9. Sklep z Lego - cz. I
Celem zajęć będzie stworzenie strony informacyjnej sklepu LEGO, zawierającego logo, baner, favicon, czcionki Google Fonts, interaktywne menu oraz podstronę z formularzem kontaktowym.
10Lekcja 10. Sklep z Lego - cz. II
Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.
11Lekcja 11. Restauracja - cz. I
Celem zajęć będzie stworzenie responsywnej strony restauracji z użyciem Flexbox oraz Media queries. Strona będzie posiadać wydzielone sekcje, menu, galerie oraz stopkę z kontaktem i lokalizacją.
12Lekcja 12. Restauracja - cz. II
Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.
13Lekcja 13. Powtórzenie wiadomości - quiz
Celem zajęć będzie powtórzenie wiadomości poprzez wykonanie projektu „karty z gier”, uczestnicy wykorzystają możliwości Flexbox do stworzenia układu strony.
14Lekcja 14. Wstęp do JavaScript. Automatyczna galeria restauracji
Automatyczna galeria restauracji. Na zajęciach zostanie udoskonalony projekt restauracji. Za pomocą języka JavaScript zostanie dodana automatyczna galeria.
15Lekcja 15. Pamiętniki z wakacji
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).
16Lekcja 16. Pamiętniki z wakacji. Kontynuacja
Lekcja zostanie przeznaczona na urozmaicenie projektu z poprzednich zajęć.
17Lekcja 17. Bossowy quiz
Celem zajęć będzie przygotowanie interaktywnego quizu o bossach z naszych ulubionych gier. Całość zostanie sformatowana przy użyciu języka CSS.
18Lekcja 18. Bossowy quiz. Kontynuacja
Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.
19Lekcja 19. Zmienne i operatory
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.
20Lekcja 20. Instrukcja warunkowa - decyzje
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.
21Lekcja 21. Funkcje
Celem lekcji jest poznanie przez uczestników funkcji. Dodatkowo, uczestnicy poznają popularne metody operacji na typach tekstowych.
22Lekcja 22. Tablice
Celem lekcji jest poznanie przez uczestników Tablic. Uczestnicy poznają popularne operacje na tablicach.
23Lekcja 23. Pętle
Celem lekcji jest poznanie przez uczestników pętli. Uczestnicy poznają pętle for oraz while i wykorzystają je w zadaniach.
24Lekcja 24. Obiekty
Celem lekcji jest poznanie przez czym są i jak tworzy się obiekty w JavaScript.
25Lekcja 25. Powtórzenie materiału - quiz
Powtórzenie wiadomości - quiz.
26Lekcja 26. DOM
Celem lekcji jest poznanie przez uczestników idei DOM. Uczestnicy stworzą proste interakcje na stronie internetowej.
27Lekcja 27. Lista zadań
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ć.
28Lekcja 28. Wisielec cz. I
Celem zajęć będzie stworzenie gry „Wisielec” (szubienica) która, polega na odgadywaniu słów.
29Lekcja 29. Wisielec cz. II
Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.
30Lekcja 30. Gra w kości cz. I
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.
31Lekcja 31. Gra w kości cz. II
Celem zajęć będzie kontynuacja i rozbudowanie projektu z poprzednich zajęć.
32Lekcja 32. Gra w kości cz. III
Celem zajęć będzie dodanie nowych funkcjonalności do gry w kości oraz
zaprezentowanie Visual studio oraz język Python.
33Lekcja 33. Meme generator
Celem zajęć będzie stworzenie aplikacji do tworzenia memów z możliwością ich zapisywania.
34Lekcja 34. Meme generator. Kontynuacja
Celem zajęć będzie rozbudowanie projektu z poprzednich zajęć.
35Lekcja 35. Twitter
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.
36Lekcja 36. Twitter. Kontynuacja
Celem zajęć będzie rozbudowanie projektu z poprzednich zajęć.