Frontend: solidne podstawy
LICZBA DNI: 5 (40h)
KOD KURSU: FRONTEND
Weź udział w szkoleniu
Termin
Lokalizacja
Cena / os
27
września
Warszawa,
Kraków,
Gdańsk,
Zdalne,
Termin
27
września
Lokalizacja
Warszawa,
Kraków,
Gdańsk,
Zdalne,
Cena / os
Powiadom
o kolejnych terminach
O szkoleniu
DLA KOGO?
Kurs przeznaczony jest dla osób pragnących zdobyć, jak i uzupełnić swoją wiedzę z zakresu technologii potrzebnych do budowy stron i aplikacji internetowych
WYMAGANIA
Podstawowa umiejętność obsługi komputera
ZALETY
Szkolenie w maksymalnym stopniu nastawione jest na aspekt praktyczny
Kameralne grupy - szkolenia technologiczne prowadzimy w grupach liczących do 8 osób. Pozwala to na indywidualne podejście oraz aktywizację każdego uczestnika
Praktyka przed teorią - wszystkie szkolenia technologiczne prowadzone są w formie warsztatowej. Konieczna teoria jest wyjaśniana na przykładzie praktycznych zadań
Konkretne umiejętności - w ramach każdego szkolenia rozwijamy praktyczne umiejętności związane z daną technologią i tematyką
Nauka z praktykami - wszyscy trenerzy na co dzień pracują w projektach, gwarantuje to dostęp do eksperckiej wiedzy i praktycznego know-how
Cele szkolenia
Zapoznanie uczestników z szerokim zakresem zagadnień m.in. HTML, CSS, JavaScript oraz Bootstrap, w stopniu pozwalającym na swobodne budowanie interfejsu 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/0
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
