WTF: Co ten frontend

Nauka programowania od ZERA do pierwszych, działających stron i aplikacji internetowych.

Sprawdzona wiedza od najlepszego Eksperta!

PROGRAM SZKOLENIA

WTF: Co Ten Frontend to uniwersalny start dla zastanawiających się nad karierą frontendową. Uczy Cię solidnych podstaw, które często są pomijane w innych materiałach. Pozwala poznać też całą otoczkę: wszelkiego rodzaju narzędzia i sposób pracy osób związanych z technologiami frontendowymi.
Maciek Korsan, autor programu

Tydzień I

Powitanie i plan szkolenia
Czym jest frontend?
Konfiguracja narzędzi wykorzystywanych w szkoleniu
Ścieżka rozwoju
Warstwy strony internetowej
VSCode: konfiguracja edytora
Hello world - mój pierwszy projekt!

Tydzień II

Devtools: podglądamy (i zmieniamy) istniejące strony
WTF: HTML - podstawy języka
WTF: HTML - podstawowe znaczniki
Klan - relacje między elementami
WTF: CSS (atrybuty, selektory, kolory)
Jak wygląda planowanie pracy za pomocą metody Kanban?
Magia programowania
Formatowanie kodu
Tworzymy pamiętnik

Tydzień III

GIT: poznajemy system kontroli wersji
Git vs GitHub
GitHub Desktop
Atrybuty w HTML
Klasy CSS
Klan - dziedziczenie
Jak działa internet i protokół HTTP?
Co się dzieje w przeglądarce po wpisaniu adresu?
Wczytywanie strony z pliku vs wczytywanie z serwera
WTF: JavaScript
Terminal, czyli ocb z tym czarnym okienkiem

Tydzień IV

Live Q&A
Normalizacja vs reset
CSS box model, pozycje, floaty
CSS pseudoselektory
JavaScript typy i struktury danych, immutability
JavaScript obiekty / prototypy / klasy
Opowieść o wężu, kebabie, wielbłądzie i Pascalu
JavaScript piszemy pierwszy algorytm
DOM-owe przedszkole

Tydzień V

Co robić, jak nie działa?
Console.log, try - catch
Figma: grafik cięcie — też zajęcie
HTML listy, tabele, definicje, encje
CSS flexbox
CSS tła, object-fit
CSS blend modes, filtry
JavaScript logika
JavaScript funkcje i pętle
JavaScript manipulacje DOM i stylów

Tydzień VI

HTML formularze
Czym się różni GET od POST?
CSS grid
CSS media queries i mobile first
Grid vs flexbox
Popularne techniki budowania layoutów
a vs button
JavaScript eventy i event loop
🍔 menu

Tydzień VII

Live Q&A
GIT: .gitignore
NODEJS & NPM: podstawowe narzędzia współczesnego frontendowca
npm vs yarn
Środowiska: developerskie, testowe, produkcyjne
Czym jest webpack?
Skrypty NPM
Parcel - proste narzędzie budujące naszą stronę
SASS: korzystamy z preprocesora CSS
BEM i inne metodyki organizacji stylów

Tydzień VIII

JavaScript import / export
VSCode: debugowanie kodu JavaScript
Przydatne narzędzia developerskie w przeglądarce
CSS zmienne
CSS animacje i przejścia
CSS prefixy, customowe fonty

Tydzień IX

Live Code review
Markdown
Git: branche
JavaScript cookies, local i session storage
TailwindCSS - nowy standard stylowania
SVG: praca z grafiką wektorową

Tydzień X

JS: destrukturyzacja i spread operator
Jak organizować pliki w projekcie?
TailwindCSS rozszerzenie konfiguracji
TailwindCSS JIT
OpenGraph
Progressive Web Apps
WCAG - czym jest i w jaki sposób testować dostępność naszej strony?
Netlify - konfiguracja repozytorium i publikacja witryny

Tydzień XI

JavaScript praca z API / JSON
JavaScript async/await, promise, fetch
Postman: podglądamy i tworzymy zapytania do serwera
U mnie działa: testujemy nasze strony na różnych przeglądarkach
Optymalizacja: lighthouse, minifikacja zasobów, krytyczny CSS
GIT: mój pierwszy pull request

Tydzień XII

Domeny i DNS
Publikacja strony pod własnym adresem (netlify + cloudflare)
HTML multimedia i zewnętrzne zasoby
Licencje, grafiki, materiały
CSS selektory ~ + › []
Projekt od A do Z

Tydzień XIII

Live podsumowanie szkolenia
Moje ulubione frontendowe tricki
Pierwsza praca
Jak wygląda rozmowa kwalifikacyjna?
Jak przygotować swoje CV?
Przyszłość frontendu
WTF: i co dalej?

Treść szkolenia może ulec delikatnym zmianom, spis nie uwzględnia prac domowych i odcinków dotyczących spraw szkoleniowych. Większość lekcji będzie się kończyć pracami domowymi, których rozwiązania z wyjaśnieniem publikowane będą w kolejnym tygodniu.