Dlaczego warto
Jeśli chcesz rozpocząć karierę w branży IT jako Front-end Developer, to szkolenie jest dla Ciebie. Niezależnie od tego, czy jesteś studentem, absolwentem, czy chcesz się przekwalifikować, zdobędziesz praktyczną i kompleksową wiedzę, która przygotuje Cię do pracy na tym stanowisku. Będziesz uczyć się u lidera w branży IT, pracując na konkretnych przykładach i zyskując wsparcie doświadczonych deweloperów, którzy na co dzień zajmują się programowaniem. Po ukończeniu kursu masz możliwość uzyskania certyfikatu Front-end Certified Developer Sii, który potwierdzi Twoje umiejętności.
Czego się nauczysz
- Zdobędziesz podstawy teoretycznej i praktycznej wiedzy z zakresu tworzenia oprogramowania przy użyciu HTML, CSS, JavaScript, node.js oraz React.
- Nauczysz się instalacji i konfiguracji środowiska deweloperskiego.
- Poznasz metody tworzenia i testowania oprogramowania oraz tworzenia skryptów automatyzujących zadania.
- Będziesz w stanie pisać aplikacje w języku JavaScript.
- Nauczysz się obsługiwać różne źródła danych i przetwarzać struktury JSON.
- Opanujesz najlepsze praktyki i zaawansowane techniki programowania.
Dla kogo
Szkolenie jest przeznaczone dla wszystkich zainteresowanych pracą w zawodzie Front-end developera.
Nie wymagamy wcześniejszego przygotowania ani doświadczenia.
Szkolenie jest idealne dla:
- studentów i absolwentów
- osób chcących się przekwalifikować
- osób, które chcą poszerzyć swoją wiedzę
Harmonogram szkolenia
Dzień 1
- Instalacja i konfiguracja środowiska developerskiego
- Wprowadzenie i zakres szkolenia
- Podstawowe pojęcia
- Podstawy HTML
- Tagi i atrybuty HTML
- DOM HTML – co to jest
- Strona HTML
- Znaczniki HTML i struktura
- Atrybuty (class, id…)
- Komentarze
- Document Info
- Struktura dokumentu
- Drzewo DOM – relacje między elementami
- HTML5 – semantyka
- Podstawowe tagi HTML
Dzień 2
- Formularze
- <form>
- action=”url”
- method=” ”
- enctype=” ”
- novalidate
- accept-charsets
- target
- input types – checkbox, radio, …
- placeholders & labels <Fieldset>, <label>, <legend>, …
- <input>, <texarea>, <select>, <button>
- atrybuty <input>, atrybuty <select>
- <form>
- Tabele
- układ
- formatowanie
- Tagi HTML5
- <progress>
- <details>
- <summary>
- <dialog>
- HTML5 Character Objects
- Figma – Responsive Web Design
- Szybkie prototypowanie
- Wireframing
- Figma
Dzień 3
- Podstawy CSS
- Zastosowanie CSS i dynamiczna zmiana wyglądu strony
- Obsługa zdarzeń z użyciem CSS
- Chrome Dev tools – styles + computed
- Zapis selektorów i reguł
- Kaskadowość
- Selektory
- uniwersalny, typ, klasa, id, atrybut, dziecko
- Waga selektorów – specificity
- Właściwości
- kolory
- jednostki miary
- background – color, image, repeat
- czcionki – face (google fonts), size, color, weight, align, line height
- Box model + Box sizing
- Pseudo
- selektory – hover, first lub last-child ,n-th child, first lub last-element
- elementy – before, after
- Position
- relative
- absolute
- fixed
- Flexbox
- osie
- justify content
- align-items
- flex-direction
- flex-wrap
- flex-grow lub flex-shrink
- align-self
- Dobre praktyki
- reset css
- organizacja plików i struktury kodu
Dzień 4
- npm – co to jest?
- package.json
- dependecies
- package.lock
- node.js – środowisko uruchomieniowe skryptów js
- zalety
- ograniczenia
- uruchamianie skryptów
- JavaScript
- Wprowadzenie do programowana w JS
- Podstawy JavaScript
- Typy zmiennych
- null
- boolean
- string
- number
- Symbol
- Object
- Function i Array jako Obiekt
- array + nested arrays
- Operatory
- arytmetyczne
- porównania
- logiczne – not, and, or
- instance of, typeof, ternary operator
- Kontrola przepływu
- if
- for , while, do while
- switch
Dzień 5
- Funkcje
- definiowanie funkcji i parametrów
- parametry default
- funkcje wbudowane
- zakres zmiennych – let lub const lub var
- stos wywołań
- callbacks
- funkcje generatora I obiekt generatora
- Metody tablicowe
- mutacyjne
- dostępowe
- iteracyjne
- Obiekty
- właściwości i metody + dostęp do pól
- tworzenie obiektów
- referencja vs kopia w porównywaniu
- this w obiekcie
- prototype
- ES6
- klasy
Dzień 6
- Zakresy, domknięcia, hoisting
- zakres zmiennych – let lub const lub var
- hoisting – reguły, działanie
- domknięcie
- Promesy
- Stan promesy
- callbacks
- Funkcje asynchroniczne
- Manipulacje DOM
- querySelector i querySelectorAll
- parentElement
- HTMLElement właściwości i manipulacja
- innerText
- classList
- style
- Eventy
- podpinanie even listenera i callbacks
- rodzaje eventow – właściwości wspólne i specyficzne
- this w eventach
- Formularze
- podstawowa walidacja
- wysyłanie
Dzień 7
Angular
- Wprowadzenie do Angulara
- Architektura aplikacji
- Elementy składowe frameworka
- Podstawy działania
- Angular CLI
- Widoki
- Tworzenie komponentów
- Przekazywanie danych
- Obsługa zdarzeń DOM
- Cykl życia komponentu
- Wstrzykiwanie kodu HTML
- Pipes
- Transformacje danych w widokach (templates)
- Omówienie najpopularniejszych wbudowanych pipes
- Tworzenie własnego pipe
- Dyrektywy
- Omówienie najpopularniejszych wbudowanych dyrektyw
- Tworzenie własnej dyrektywy
- Serwisy
- Dostarczanie i wstrzykiwanie serwisów
- Tworzenie własnych serwisów
- Komunikacja z użyciem Observables
- Routing
- Budowanie tablicy routingu
- Ścieżki zagnieżdżone
- Parametry routingu
- Nawigacja z poziomu HTML i TS
- Dostęp do danych routingu w komponencie
- Formularze
- Template driven forms
- Reactive forms
- Walidacja danych
- Komunikacja z API
- Omówienie modułu HttpClient
- Tworzenie zapytań RESTful
Dzień 8
Wprowadzenie do React
- Instalacja
- Podstawowe pojęcia
- Pierwsza aplikacja npx create-react-app
- Tworzenie komponentów
- Programowanie funkcyjne
- Proxy
- Class vs function component
- webhook
- stany (useEffect, useState, useContext, …)
- Props
- Default values
- Functions,
- Drill
- Childrens
- EventHandler
- Routing
Dzień 9
- Formularze
- Walidacja
- onBlur, onTouch, …
- Proptypes
- CRUD
- Lokalizacja (multilanguage)
- Testy (Jest)
- Firebase – wprowadzenie do CI/CD
- Projekt praktyczny – warsztat projektowy
Dzień 10
- Projekt praktyczny – warsztat projektowy
