Szkolenie MS 55320 Programming with HTML, CSS, and JavaScript

Moduł 1: Szybki przegląd tworzenia stron internetowych

Ten moduł daje przegląd technologii po stronie klienta i po stronie serwera używanych w tworzeniu stron internetowych.

Lekcje

• HTML jest częścią zespołu
• Programowanie po stronie klienta
• Programowanie po stronie serwera
• Technologie tworzenia stron internetowych

Moduł 2: Wprowadzenie do HTML

Ten moduł wyjaśnia składnię i strukturę dokumentów HTML oraz zapewnia krótką historię HTML.

Lekcje

Ćwiczenie: Prosty dokument HTML

• Pierwsze kroki z prostym dokumentem HTML
• Elementy, Atrybuty i Komentarze HTML
• Szkielet HTML
• Przegląd źródła strony
• Znaki specjalne
• Elementy HTML i znaki specjalne
• Historia HTML
• Atrybut lang

Lab: Pierwsze kroki

• Prosty dokument HTML

Moduł 3: Akapity, Nagłówki i Tekst

Ten moduł wyjaśnia, jak dodawać akapity, nagłówki i tekst inline do stron HTML.

Lekcje

• Akapity
• Poziomy nagłówków
• Przerwy i linie poziome

Ćwiczenie: Akapity, Nagłówki i Tekst

• Tag div
• Tworzenie strony HTML
• Cytowany tekst
• Tekst sformatowany z góry
• Inline Elementy semantyczne
• Ćwiczenie: Dodawanie elementów Inline

Lab: Ćwiczenia zawarte w trakcie lekcji

• Tworzenie strony HTML
• Dodawanie elementów Inline

Moduł 4: Linki HTML

Ten moduł wyjaśnia różnicę między bezwzględnymi i względnymi ścieżkami oraz pokazuje, jak dodawać linki do zewnętrznych stron HTML i do lokalizacji w obrębie strony. Wyjaśnia również, jak tworzyć linki e-mailowe.

Lekcje

• Wprowadzenie do linków
• Linki tekstowe
• Ścieżki bezwzględne vs. względne
• Nowe karty docelowe
• Linki e-mailowe

Ćwiczenie: Dodawanie linków

• Lorem Ipsum
• Atrybut tytułu
• Linkowanie do określonej lokalizacji na stronie
• Docelowe lokalizacje na stronie

Lab: Ćwiczenia zawarte w trakcie lekcji

• Dodawanie linków

Moduł 5: Obrazy HTML

Ten moduł wyjaśnia, jak dodawać obrazy do strony, jak uczynić te obrazy dostępnymi i jak tworzyć linki obrazowe.

Lekcje

• Wstawianie obrazów
• Linki obrazowe
• Dodawanie obrazów do dokumentu

Ćwiczenie: Dodawanie obrazów do strony

• Zapewnianie alternatywnych obrazów

Lab: Ćwiczenia zawarte w trakcie lekcji

• Dodawanie obrazów do strony

Moduł 6: Listy HTML

Ten moduł wyjaśnia, jak dodawać listy uporządkowane, nieuporządkowane i definiowane do stron HTML.

Lekcje

• Listy nieuporządkowane
• Listy uporządkowane
• Listy definiowane

Ćwiczenie: Tworzenie list

Lab: Ćwiczenia zawarte w trakcie lekcji

• Tworzenie list

Moduł 7: Szybki kurs CSS

Ten moduł zapewnia szybkie wprowadzenie do CSS, wyjaśniając korzyści z wykorzystania CSS do stylizacji stron HTML oraz opisując różne sposoby dodawania styli CSS do stron HTML i elementów.

Lekcje

• Korzyści płynące z arkuszy stylów kaskadowych
• Reguły CSS
• Selektory
• Kombinatory
• Precedencja selektorów
• Sposób przeglądarki stylizuje strony
• Resetowanie CSS
• Normalizatory CSS
• Zewnętrzne arkusze stylów, Osadzone arkusze stylów i Style inline

Ćwiczenie: Tworzenie zewnętrznego arkusza stylów

Ćwiczenie: Tworzenie osadzonego arkusza stylów

Ćwiczenie: Dodawanie styli inline

• div i span
• Ćwiczenie: Stylizacja div i span
• Typy mediów
• Jednostki pomiaru
• Dziedziczenie

Lab: Ćwiczenia zawarte w trakcie lekcji

• Tworzenie zewnętrznego arkusza stylów
• Tworzenie osadzonego arkusza stylów
• Dodawanie styli inline
• Stylizacja elementów div i span

Moduł 8: Czcionki CSS

Ten moduł wyjaśnia, jak pogrubiać i pochylać tekst oraz jak kontrolować inne atrybuty czcionek za pomocą CSS.

Lekcje

• font-family
• @font-face
• font-size
• font-style
• font-variant
• font-weight
• line-height
• Składnia skrócona fontu

Ćwiczenie: Stylizacja czcionek

Lab: Ćwiczenia zawarte w trakcie lekcji

• Stylizacja czcionek

Moduł 9: Kolor i Przezroczystość

Ten moduł wyjaśnia, jak kontrolować kolor i przeźroczystość elementów na stronie HTML.

Lekcje

• O kolorze i przeźroczystości
• Wartości koloru i przeźroczystości
• color
• opacity

Ćwiczenie: Dodawanie koloru i przeźroczystości do tekstu

Lab: Ćwiczenia zawarte w trakcie lekcji

Moduł 10: Tekst CSS

Ten moduł wyjaśnia, jak wyrównać, podkreślić, przekreślić i rozdzielać litery i słowa, jak wcięć tekst, jak kontrolować białe znaki oraz jak dodawać cienie do tekstu.

Lekcje

• letter-spacing
• text-align
• text-decoration
• text-indent
• text-shadow
• text-transform
• white-space
• word-break
• word-spacing

Ćwiczenie: Właściwości tekstu

Lab: Ćwiczenia zawarte w trakcie lekcji

• Właściwości tekstu

Moduł 11: Podstawy JavaScript

Ten moduł zapewnia wprowadzenie do Modelu Obiektowego Dokumentu HTML i JavaScriptu, jego celu, składni i struktury.

Lekcje

• JavaScript vs. EcmaScript
• DOM HTML
• Składnia JavaScript
• Dostęp do elementów
• Gdzie jest zapisany kod JavaScript?
• Obiekty, metody i właściwości JavaScript

Ćwiczenie: Alerty, Pisanie i Zmiana Koloru Tła

Lab: Ćwiczenia zawarte w trakcie lekcji

• Alerty, Pisanie i Zmiana Koloru Tła

Moduł 12: Zmienne, Tablice i Operatory JavaScript

Ten moduł wyjaśnia, jak tworzyć i używać zmiennych i tablic w JavaScript oraz wprowadza operatory JavaScript.

Lekcje

• Zmienne JavaScript
• Język o luźnym typowaniu
• DevTools Google Chrome
• Przechowywanie danych wprowadzanych przez użytkownika

Ćwiczenie: Korzystanie ze zmiennych

• Stałe
• Tablice

Ćwiczenie: Praca z tablicami

• Tablice asocjacyjne
• Zabawa z metodami tablic
• Operatory JavaScript
• Operator Modulus
• Zabawa z operatorami
• Domyślny operator

Ćwiczenie: Praca z operatorami

Lab: Ćwiczenia zawarte w trakcie lekcji

• Praca z tablicami
• Praca z operatorami

Moduł 13: Funkcje JavaScript

Ten moduł wyjaśnia, jak używać wbudowanych funkcji JavaScript i jak pisać własne funkcje zdefiniowane przez użytkownika.

Lekcje

• Globalne obiekty i funkcje

Ćwiczenie: Praca z globalnymi funkcjami

• Funkcje zdefiniowane przez użytkownika

Ćwiczenie: Napisanie funkcji JavaScript

• Zwracanie wartości z funkcji

Lab: Ćwiczenia zawarte w trakcie lekcji

• Praca z globalnymi funkcjami
• Napisanie funkcji JavaScript

Moduł 14: Wbudowane obiekty JavaScript

Ten moduł obejmuje wbudowane obiekty JavaScript i pokazuje, jak tworzyć funkcje pomocnicze, aby dostarczyć dodatkowej funkcjonalności.

Lekcje

• Łańcuchy znaków
• Matematyka
• Data
• Funkcje pomocnicze
• Ćwiczenie: Zwracanie Dnia Tygodnia jako Łańcucha Znaków

Lab: Ćwiczenia zawarte w trakcie lekcji

• Zwracanie Dnia Tygodnia jako Łańcucha Znaków

Moduł 15: Warunki i Pętle

Ten moduł wyjaśnia kontrolę przepływu. Obejmuje różne typy warunków i pętli w JavaScript.

Lekcje

• Warunki
• Krótkie obwody
• Switch / Case
• Operator trójargumentowy
• Prawdziwy i fałszywy

Ćwiczenie: Przetwarzanie warunkowe

• Pętle
• Pętle while i do…while
• Pętle for
• Instrukcje break i continue
• Ćwiczenie: Praca z pętlami
• Tablica: forEach()

Lab: Ćwiczenia zawarte w trakcie lekcji

• Przetwarzanie warunkowe
• Praca z pętlami

Moduł 16: Obsługa Zdarzeń i Słuchacze

Ten moduł wyjaśnia, jak przechwytywać i odpowiadać na zdarzenia takie jak kliknięcia myszy i akcje klawiatury. Wyjaśnia również, jak tworzyć liczniki czasowe w JavaScript.

Lekcje

• Obsługa zdarzeń
• Ćwiczenie: Korzystanie z obsługi zdarzeń
• Metoda addEventListener()
• Funkcje anonimowe
• Przechwytywanie zdarzeń klawiatury

Ćwiczenie: Dodawanie słuchaczy zdarzeń

• Korzyści płynące z obsługi zdarzeń
• Liczbniki czasowe
• Test pisania

Lab: Ćwiczenia zawarte w trakcie lekcji

• Korzystanie z obsługi zdarzeń
• Dodawanie słuchaczy zdarzeń
• Tworzenie testu pisania

Moduł 17: Model Obiektowy Dokumentu HTML

Ten moduł zagłębia się w Model Obiektowy Dokumentu HTML, wyjaśniając wiele sposobów dostępu do elementów na stronie i pokazując, jak dynamicznie dodawać i usuwać elementy za pomocą JavaScript.

Lekcje

• Selektory CSS
• Właściwość innerHTML
• Węzły, Listy Węzłów i Kolekcje HTML
• Dostęp do Węzłów Elementów

Ćwiczenie: Dostęp do Elementów

• Notacja Kropkowa i Notacja Nawiasowa Kwadratowa
• Dostęp do Elementów Hierarchicznie

Ćwiczenie: Praca z Elementami Hierarchicznymi

• Dostęp do Atrybutów
• Tworzenie Nowych Węzłów
• Koncentracja na Polu
• Aplikacja Lista Zakupów

Ćwiczenie: Logowanie

Ćwiczenie: Dodawanie Słuchaczy Zdarzeń

Ćwiczenie: Dodawanie Elementów do Listy

Ćwiczenie: Dynamiczne Dodawanie Przycisków Usuwania do Elementów Listy

Ćwiczenie: Usuwanie Elementów Listy

Ćwiczenie: Zapobieganie Duplikatom i Nazwom Produktów o Długości Zero

• Manipulacja Tabelami

Lab: Ćwiczenia zawarte w trakcie lekcji

• Dostęp do Elementów
• Praca z Elementami Hierarchicznymi
• Logowanie
• Dodawanie Słuchaczy Zdarzeń
• Dodawanie Elementów do Listy
• Dynamiczne Dodawanie Przycisków Usuwania do Elementów Listy
• Usuwanie Elementów Listy
• Zapobieganie Duplikatom i Nazwom Produktów o Długości Zero

Moduł 18: Tworzenie i Stylizacja Formularzy HTML

Ten moduł wyjaśnia, jak tworzyć formularze HTML i używać JavaScriptu do ich obsługi. Ponadto omawia, jak używać CSS do stylizacji formularzy.

Lekcje

• Tworzenie Formularzy HTML
• Metoda GET vs. POST

Ćwiczenie: Tworzenie Formularzy

Ćwiczenie: Walidacja Formularzy

• Przesyłanie Danych Formularza
• Obsługa Formularzy za pomocą JavaScript
• Walidacja Formularzy w JavaScript
• Dostosowywanie Formularzy za pomocą CSS

Lab: Ćwiczenia zawarte w trakcie lekcji

• Tworzenie Formularzy
• Walidacja Formularzy

Moduł 19: Responsywne Projekty i Media Queries

Ten moduł wyjaśnia, jak tworzyć responsywne projekty, które dostosowują się do różnych urządzeń i rozmiarów ekranów.

Lekcje

• Responsywność i Media Queries
• Plik CSS responsywny
• Breakpoints
• Zapytania mediów typu handheld

Ćwiczenie: Tworzenie Pliku CSS responsywnego

Lab: Ćwiczenia zawarte w trakcie lekcji

• Tworzenie Pliku CSS responsywnego

Moduł 20: Usprawnianie Wydajności Strony

Ten moduł wyjaśnia, jak usprawnić wydajność strony, minimalizując liczbę żądań HTTP, zmniejszając rozmiar plików i korzystając z technik buforowania przeglądarki.

Lekcje

• Ładowanie zasobów z sieci
• Minimalizacja i Kompresja
• Zmniejszanie i Cache’owanie obrazów
• Sprytne Ładowanie Obrazów
• Zmniejszanie Liczby Zapytań HTTP

Lab: Ćwiczenia zawarte w trakcie lekcji

• Ładowanie zasobów z sieci

Moduł 21: Wdrażanie Strony Internetowej

Ten moduł wyjaśnia, jak wdrażać strony internetowe na serwerze internetowym, korzystając z różnych narzędzi i usług hostingowych.

Lekcje

• Hosting Strony Internetowej
• Wdrażanie za pomocą FTP
• Automatyzacja wdrażania za pomocą Git i GitHub Pages
• Wdrażanie strony za pomocą Firebase
• Wdrażanie strony za pomocą Netlify

Lab: Ćwiczenia zawarte w trakcie lekcji

• Wdrażanie za pomocą FTP
• Wdrażanie za pomocą Firebase
• Wdrażanie za pomocą Netlify

• Podstawowa znajomość obsługi komputera i umiejętności pisania na klawiaturze.