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ęć.
37Lekcja 37. Wprowadzenie do Bootstrapa
Celem lekcji jest wprowadzenie do Bootstrapa, uczniowie dowiedzą się, czym jest
Bootstrap i jak go zainstalować za pomocą CDN. Nauczą się korzystać z
podstawowych klas i komponentów Bootstrapa do stylizacji elementów HTML.
38Lekcja 38. Siatka Bootstrapa
Celem lekcji jest zapoznanie się z systemem siatki Bootstrapa. Uczniowie nauczą
się, jak tworzyć responsywne układy stron internetowych, wykorzystując kontenery,
wiersze i kolumny.
39Lekcja 39. Stylizacja tekstu i typografia
Celem lekcji jest zapoznanie uczniów z klasami typograficznymi Bootstrapa do
stylizacji tekstu, takimi jak nagłówki, paragrafy, listy i cytaty. Uczniowie nauczą się
również, jak korzystać z klas do wyrównywania i formatowania tekstu oraz jak
dodawać niestandardowe czcionki.
40Lekcja 40. Przyciski i ikony
Celem lekcji jest zapoznanie uczniów z tworzeniem i stylizacją przycisków za
pomocą klas Bootstrapa oraz integracją z ikonami. Uczniowie nauczą się tworzyć
przyciski w różnych stylach i rozmiarach.
41Lekcja 41. Karty
Celem lekcji jest zapoznanie uczniów z komponentem kart Bootstrapa. Nauczą się,
jak tworzyć karty do wyświetlania informacji, takich jak produkty, profile użytkowników
czy posty na blogu.
42Lekcja 42. Nawigacja i paski nawigacyjne
Celem lekcji jest nauczenie uczniów, jak tworzyć responsywne paski nawigacyjne za
pomocą komponentu Navbar Bootstrapa. Uczniowie nauczą się dodawać linki, logo i
przyciski nawigacyjne oraz dostosowywać styl paska nawigacyjnego.
43Lekcja 43. Formularze i walidacja
Celem lekcji jest nauczenie uczniów, jak tworzyć i stylizować formularze za pomocą
Bootstrapa. Uczniowie nauczą się tworzyć różne typy pól formularza, przyciski oraz
jak walidować dane w formularzach.
44Lekcja 44. Modale
Celem lekcji jest zapoznanie uczniów z komponentem modali Bootstrapa i nauka
tworzenia okien dialogowych do wyświetlania dodatkowych informacji lub formularzy.
Na zakończenie lekcji uczniowie stworzą prostą stronę, na której modale będą
wywoływane za pomocą przycisków.
45Lekcja 45. Karuzele
Celem lekcji jest zapoznanie się z komponentem karuzeli Bootstrapa. Uczniowie
nauczą się tworzyć interaktywne karuzele do wyświetlania obrazów lub treści oraz
dostosowywać ich wygląd i zachowanie.
46Lekcja 46. Listy grupowe
Celem lekcji jest pokazanie uczniom, jak tworzyć i stylizować listy grupowe za
pomocą Bootstrapa. Uczniowie poznają różne opcje stylizacji, takie jak listy z
ikonami, przyciskami czy odnośnikami. Na koniec stworzymy naszą własną listę rzeczy
do zrobienia (to-do list).
47Lekcja 47. Strona fanowska część 1
Uczniowie rozpoczną pracę nad większym projektem końcowym, którym będzie
strona fanowska o ich ulubionej postaci z gry lub filmu. W tej lekcji uczniowie
zaplanują układ strony, stworzą podstawową strukturę i zaczną implementować
kluczowe komponenty Bootstrapa.
48Lekcja 48. Strona fanowska część 2. Wprowadzenie do Pythona
Celem lekcji jest kontynuacja pracy nad stroną fanowską. Uczniowie dodadzą
ostatnie szlify i funkcjonalności. W Na drugiej części zajęć zaprezentujemy możliwości
języka Python.