Front-end: solidne podstawy

LICZBA DNI: 5 (40h)

KOD KURSU: FRONTEND

Powiadom
o kolejnych terminach

# javascript

# bootstrap

# jquery

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

  • Podział odpowiedzialności między HTML, CSS i JavaScript
  • Omówienie najpopularniejszych edytorów/IDE
  • Używanie przeglądarki jako środowiska programistycznego
  • 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
  • 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
  • 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
  • ECMAScript2015 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
  • Dlaczego potrzebujemy frameworków UI?
  • Zestawienie najpopularniejszych rozwiązań
  • Ćwiczenia z podstawowymi elementami frameworka 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
  • Jak efektywnie aktualizować wiedzę?
  • Co dalej? Możliwe kierunki rozwoju
  • Przydatne zasoby

POLITYKA COOKIES:

Korzystamy z plików cookies, by móc jak najlepiej dostosować stronę do Twoich potrzeb oraz wyświetlać Ci przydatne i adekwatnych dla Ciebie reklamy w serwisie i poza nim. Możesz kontrolować ustawienia ciasteczek w swoich ustawieniach swojej przeglądarki. Odwiedzając tę stronę, wyrażasz zgodę na wykorzystywanie przez nas plików cookies.