Frontend: solidne podstawy
LICZBA DNI: 5 (40h)
KOD KURSU: FRONTEND
Weź udział w szkoleniu
Termin
Lokalizacja
Cena / os
19
kwietnia
Zdalne,
28
czerwca
Warszawa,
Kraków,
Zdalne,
27
września
Warszawa,
Kraków,
Gdańsk,
Zdalne,
Termin
19
kwietnia
Lokalizacja
Zdalne,
Cena / os
Termin
28
czerwca
Lokalizacja
Warszawa,
Kraków,
Zdalne,
Cena / os
Termin
27
września
Lokalizacja
Warszawa,
Kraków,
Gdańsk,
Zdalne,
Cena / os
Powiadom
o kolejnych terminach
O szkoleniu
DLA KOGO?
Kurs przeznaczony jest zarówno dla osób pragnących zdobyć i uzupełnić swoją wiedzę dotyczącą technologii potrzebnych do budowy stron i aplikacji internetowych
WYMAGANIA
Szkolenie przeznaczone jest dla osób o dowolnym poziomie umiejętności technicznych
ZALETY
Szkolenie w maksymalnym stopniu nastawione jest na aspekt praktyczny
Jego głównym założeniem jest rozwinięta część warsztatowa obejmująca zarówno budowę złożonego projektu jak i niezależne ćwiczenia pomagające zrozumieć i utrwalić omawiane zagadnienia
Cele szkolenia
Zapoznanie uczestników z szerokim zakresem zagadnień dotyczących języków HTML, CSS i JavaScript oraz z Bootstrap, najpopularniejszym frameworkiem UI, w stopniu pozwalającym na swobodne programowanie interfejsów graficznych aplikacji webowych
Program
Wprowadzenie
- Podział odpowiedzialności między HTML, CSS i JavaScript
- Omówienie najpopularniejszych edytorów/IDE
- Używanie przeglądarki jako środowiska programistycznego
HTML
- Czym jest HTML?
- Odmiany standardu HTML
- Konstrukcja tagów
- Struktura strony HTML
- Gotowe szablony HTML - sprawne rozpoczęcie pracy z frontendem
- Podstawowe grupy tagów
- Doctype i meta tagi
- Elementy inline
- Elementy blokowe
- Umieszczanie tekstu w dokumencie
- Nagłówki i paragrafy
- Rodzaje list
- Inne elementy
- Osadzanie multimediów w dokumencie
- Obrazki
- Canvas
- SVG
- Audio i wideo
- Praca z formularzami
- Podstawowe elementy i typy pól
- Typy pól wprowadzone w HTML5
- Walidacja
- Dodatkowe atrybuty wpływające na użyteczność i dostępność
- Możliwości i właściwe zastosowanie tabel
- Podstawowe tagi
- Grupowanie kolumn i wierszy
- Inne grupy tagów
- Meta tagi
- Osadzanie skryptów i arkuszy stylów
- Semantyczność tagów i dlaczego to takie ważne?
- WAI-ARIA czyli zapewnienie dostępności dla niepełnosprawnych
CSS
- Podstawy stylowania stron www
- Sposoby dołączania stylów do strony
- Selektory i pojęcie specificity
- Stylowanie tekstu, web fonts i font stacks
- Metody określania kolorów
- Różne jednostki, kiedy stosować które?
- Określanie wymiarów elementów, Box model
- Pozycjonowanie, opływanie i związane z nimi wyzwania
- Stylowanie strony do druku
- Zagadnienia uzupełniające
- Flexbox
- Transformacje i animacje
- Zaawansowane stylowanie tła
- Praktyczne zastosowania pseudoselektorów
- Podstawy Responsive Web Design
- Media Queries
- Podejście „mobile first”
- Strategie w pracy z CSS
- Resetowanie i normalizacja stylów
- Organizacja kodu w plikach
- Metodologia BEM
- Wykrywanie możliwości przeglądarek
- Stylowanie działające na różnych przeglądarkach
- Preprocesory CSS
- Podstawy języka SASS
- Praktyczne zastosowanie we współczesnych frameworkach CSS
JavaScript
- Wprowadzanie
- Typy
- Obiekty i funkcje
- Instrukcje sterujące
- Format JSON
- Asynchroniczny JavaScript
- Hoisting
- Zasięg zmiennych
- Domknięcia i ich praktyczne zastosowanie
- Kontekst i obiekt this
- JavaScript w przeglądarce
- Ładowanie skryptów
- Obiekty globalne
- Praca z Document Object Model
- Zdarzenia i wywołania zwrotne
- ECMAScript 2015 i nowsze
- Moduły
- Obiekt Promise
- Arrow function
- Destructuring
- Inne nowości w języku JavaScript
- Przykłady typowych zastosowań nowej składni
- Narzędzia i biblioteki ekosystemu JavaScript
- Wprowadzenie do NPM
- Podstawy Webpack
- Transpilacja kodu z Babel
Bootstrap
- Dlaczego potrzebujemy frameworków UI?
- Zestawienie najpopularniejszych rozwiązań
- Ćwiczenia z podstawowymi elementami frameworku Bootstrap
- Czym jest Grid System?
- Układ kolumnowy
- Implementacja wzorców Responsive Design
- Budowanie formularzy
- Elementy nawigacji
- Stylowanie tekstu i grafik
- Efektywne użycie ikon
- Inne przydatne struktury i klasy pomocnicze
- Komponenty JavaScript
- Dostosowywanie elementów Bootstrap do potrzeb projektu
- Ograniczanie rozmiaru biblioteki
- Zmiana wyglądu, własne skórki
Informacje uzupełniające
- Jak efektywnie aktualizować wiedzę?
- Co dalej? Możliwe kierunki rozwoju
- Przydatne zasoby
Szkolenia powiązane
