Zostań Developerem Front-end

• 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>
• Tabele
  • układ
  • formatowanie
• Tagi HTML5
  • <progress>
  • <details>
  • <summary>
  • <dialog>
  • HTML5 Character Objects
• Figma – Responsive Web Design
  • Szybkie prototypowanie
  • Wireframing
  • Figma

• 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

• 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

• 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

• 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

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

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

• Formularze
• Walidacja
  • onBlur, onTouch, …
• Proptypes
• CRUD
• Lokalizacja (multilanguage)
• Testy (Jest)
• Firebase – wprowadzenie do CI/CD
• Projekt praktyczny – warsztat projektowy

• Projekt praktyczny – warsztat projektowy