Program kursu online
Mój kurs ma prosty cel — ma dostarczyć Ci całą niezbędną wiedzę, jaka jest potrzebna do samodzielnego tworzenia stron internetowych, kalkulatorów, mini gier i aplikacji webowych, czyli wszystkiego, co na co dzień możesz znaleźć w przeglądarce.
Niezależnie od tego, czy masz zamiar po kursie szukać pracy w IT, uczysz się dla własnej satysfakcji czy chcesz zostać freelancerem, znajdziesz tu coś dla siebie!
Kurs wykracza swoim zakresem poza podstawy front-endu (czyli tego, co dzieje się w przeglądarce) omawiając również bazy danych w chmurze i komunikację z nim, dzięki czemu będziesz w stanie zrobić od A do Z aplikację webową, która potrafi zarejestrować i zalogować użytkownika, oraz zapisywać i przetwarzać jego dane!
Wszystko jest spójnie — to znaczy w jednym miejscu, z ust jednej osoby, omówione w ten sam sposób, ze wsparciem na FB i w komentarzach. Nie pogubisz się!
Cały kurs składa się z 21 części po około 10 godzin nagrań każda! Masz pewność, że omówione zostanie wszystko! Poniżej informacje o poszczególnych częściach kursu i ich dostępności.
Część 0 - Wirtualna maszyna
Stan: DOSTĘPNE
Ilość nagrań: 8
Całkowity czas nagrań: 34 minut 22 sekund
Ta część jest nieobowiązkowa, ale zalecana. Instalujemy w niej system operacyjny Pop_OS!, by nasze środowiska pracy byłby jak najbardziej zbliżone. Nic nie stoi jednak na przeszkodzie, by pracować na Windowsie lub MacOS. Wybór należy do Ciebie.
Część 1 - Narzędzia
Stan: DOSTĘPNE
Ilość nagrań: 12
Całkowity czas nagrań: 1 godzina 19 minut 49 sekund
Zanim napiszemy, choć linijkę kodu musimy zapoznać się z przeglądarką i edytorem. Będziemy używać Chrome i Visual Studio Code. Poznamy dodatki i przydatne skróty klawiszowe.
Część 2 - HTML + CSS + Flexbox
Stan: DOSTĘPNE
Ilość nagrań: 51
Całkowity czas nagrań: 12 godzin 30 minut 48 sekund
W tej części kursu od A do Z omówimy, jak tworzy się statyczną stronę internetową w HTML i CSS, czyli językach opisujących odpowiednio strukturę i wygląd strony. Statyczną to znaczy, że strona nie będzie miała możliwości generowania treści na podstawie zalogowanego użytkownika czy bazy danych i nie będzie posiadała elementów, z którymi w interakcję będzie mógł wejść użytkownik. To omówimy później :)
Co prawda, w dzisiejszych czasach, rzadko kto już tworzy strony bezpośrednio w HTML i CSS. Najczęściej dzieje się to z wykorzystaniem tzw. frameworków JavaScriptowych, do których dojdziemy pod koniec kursu. Jednakże nie wyobrażam sobie pominąć "zwykłego" HTML-a, by mieć solidne podstawy i zrozumienie co dzieje się w przeglądarce.
Część 3 - Responsywność
Stan: DOSTĘPNE
Ilość nagrań: 16
Całkowity czas nagrań: 3 godziny 46 minut 28 sekund
Po stworzeniu pierwszych stron WWW będzie czas na to, by przystosować je do urządzeń mobilnych. Dowiesz się co to media queries i siatka, czyli grid.
Część 4 - Podstawy języka JavaScript
Stan: DOSTĘPNE
Ilość nagrań: 32
Całkowity czas nagrań: 10 godzin 12 minut 50 sekund
To najważniejsza część kursu. JavaScriptem będziesz posługiwać się przez wszystkie następne rozdziały, w znacznie większej ilości niż HTML-em i CSS-em. Dogłębnie omówimy, czym jest język programowania, jak działa JavaScript w przeglądarce, z czego się składa i w jaki sposób się komunikuje z przeglądarką. Napiszemy pierwsze wyrażenia i instrukcje. Następnie przerobimy funkcje, warunki i pętle.
Część 5 - System zarządzania wersjami — GIT
Stan: DOSTĘPNE
Ilość nagrań: 25
Całkowity czas nagrań: 7 godzin 46 minut 17 sekund
Zanim ruszymy dalej, poznamy narzędzie służące programistom bezwzględnie każdego języka. GIT służy do zarządzania wersjami kodu. Pozwala zapisywać stan pracy, cofać się do zapisanych momentów, a także współpracować i łączyć nasz kod z innymi osobami.
Część 6 - DOM – zarządzanie elementami strony przez JavaScript
Stan: DOSTĘPNE
Ilość nagrań: 25
Całkowity czas nagrań: 7 godzin 19 minut 18 sekund
Wbrew powszechnej opinii JavaScript nie potrafi zmieniać elementów stworzonych w HTML-u. Potrafi za to powiedzieć przeglądarce by to zrobiła za niego :)
Różnica jest niby subtelna, bo efekt jest ten sam, ale poznanie tych mechanizmów pomoże Ci zrozumieć jak zrobić dowolną modyfikację elementów na stornie za pomocą JS-a.
Przeglądarka ma w swojej pamięci obiektowe drzewo dokumentu (Document Object Model — DOM) i za pomocą zbioru funkcji, które udostępnia JavaScriptowi, możemy te drzewo modyfikować. W tym rozdziale dowiesz się również, co to jest renderowanie oraz czym się różni programowanie imperatywne od deklaratywnego i które z nich programiści wolą stosować.
Część 7 - Struktury danych w JavaScript
Stan: DOSTĘPNE
Ilość nagrań: 31 nagrań
Całkowity czas nagrań: 11 godzin 03 minuty 10 sekund
Zanim napiszemy, choć prostą aplikację czy mini grę. Musimy poznać, w jaki sposób zarządzać danymi w JavaScripcie. Rzeczywiste dane najczęściej są zbiorami wielu wartości. Pomyśl o swoich znajomych. Każdy ma imię i nazwisko oraz wiele innych danych, które możesz nazwać. Znajomi mogą też zawierać w sobie dane zagnieżdżone. Posłużmy się przykładem. Mój znajomy Tomek ma samochód, a jego samochód ma na liczniku 200 000 tys. km i jest to Opel Corsa. Jak widzisz, dane Opla są zagnieżdżone w danych znajomego. Na pewno znasz więcej niż jedną osobę i możesz te dane umieścić w tabeli, z kolumnami: imię, nazwisko, samochód etc. W JavaScripcie też występują tabele i to głównie z nimi zaprzyjaźnimy się w tej części :) Nauczymy się też je przetwarzać, tak by np. znaleźć wyłącznie znajomych bez samochodu lub policzyć przebieg wszystkich aut Twoich znajomych.
Część 8 - Wyszukiwanie błędów — debugger
Stan: DOSTĘPNE
Ilość nagrań: 15 nagrań
Całkowity czas nagrań: 3 godziny 37 minut 34 sekund
Nie da się napisać kodu bez błędów. Umysł człowieka jest bardzo "jednowątkowy" - nie potrafi skupić się na wielu rzeczach naraz. Często zdarza się, że pisząc nowy kod, zepsujemy stary, albo nie mamy pojęcia, dlaczego kod, który w jednym miejscu działał, w innym nie działa. Za pomocą wbudowanego w przeglądarkę narzędzia — debuggera, dowiemy się jak rozwiązywać takie problemy.
Część 9 - Prototypy i klasy — OOP w JS
Stan: DOSTĘPNE
Ilość nagrań: 30 nagrań
Całkowity czas nagrań: 10 godzin 18 minut 25 sekund
OOP, czyli programowanie obiektowe to sposób tworzenia kodu za pomocą obiektów, czyli elementów łączących stan (dane) i akcje, jakie kod wykonuje. JavaScript nie wymusza pisania kodu w ten sposób i umożliwia łączenie stylów programowania (np. funkcyjnego i obiektowego). Poznamy oba style, skupiając się na programowaniu obiektowym, które jest standardem w wielu językach i choć w naszym przypadku nie jest to narzucone przez sam język, to dość często spotkamy się z jego elementami.
Część 10 - Moduły, NPM i ES6+
Stan: DOSTĘPNE
Ilość nagrań: 44 nagrania
Całkowity czas nagrań: 10 godzin 2 minuty 39 sekund
JavaScript, od 1995 roku, kiedy został opublikowany, przeszedł bardzo długą drogę do stanu, w którym jest dziś. Największe zmiany zaszły stosunkowo niedawno, w 2015 roku, gdy wydana została wersja 6 znana jako ECMAScript 6 lub w skrócie ES6. Za pomocą nazwy ES6+ lub ESNext określa się wszystkie nowe wersje JS-a, czyli te wydane od 2015 roku. Dowiemy się jakie zmiany zaszły, z czego możemy swobodnie korzystać, na co trzeba uważać i co najważniejsze — jaką wersję JS-a obsługują przeglądarki, bo wbrew pozorom rzadko jest to wersja najnowsza :)
Część 11 - Wstęp do testowania kodu w JS
Stan: DOSTĘPNE
Ilość nagrań: 14 nagrań
Całkowity czas nagrań: 6 godzin 40 minut 49 sekundy
Wcześniej poznaliśmy debugowanie — czyli sposób "diagnozowania" i "leczenia" już powstałych błędów. W tej części nauczymy się pisać testy, które zabezpieczą nasz kod przed błędami. Upraszczając, można powiedzieć, że będą za nas "klikać" i sprawdzać, czy nasz kod działa poprawnie.
Część 12 - Asynchroniczność i komunikacja z serwerem
Stan: DOSTĘPNE
Ilość nagrań: 93 nagrania
Całkowity czas nagrań: 31 godzin 31 minut 37 sekundy
Do tej pory pracowaliśmy wyłącznie z tym, co sami stworzyliśmy oraz tym, co w nasze aplikacje lub strony wpisał, lub kliknął użytkownik. W tym rozdziale dowiemy się jak pobierać dane z serwerów zdalnych, przetwarzać je i wyświetlać w naszym kodzie. Dowiemy się również, w jaki sposób JavaScript radzi sobie z niesekwencyjnym wykonywaniem kodu (jeśli wyślemy zapytanie na zdalny serwer, nigdy nie wiemy, ile ono zajmie i czy w ogóle się uda, a musimy napisać kod, który wykona się nie przed a po zrealizowaniu takiego zapytania). Poznamy także standard w komunikacji z serwerami — REST.
Część 13 - Testowanie asynchronicznego kodu w JS
Stan: DOSTĘPNE
Ilość nagrań: 12 nagrań
Całkowity czas nagrań: 3 godziny 30 minut 35 sekund
Wcześniej nauczyliśmy się pisać testy dla "zwykłego" kodu, ale w poprzednim rozdziale poznaliśmy zapytania asynchroniczne, a więc musimy przystosować testy do tego, że nigdy nie wiadomo, ile takie zapytania potrwają.
Część 14 - Podstawy React — aplikacje webowe
Stan: DOSTĘPNE
Ilość nagrań: 99 nagrań
Całkowity czas nagrań: 27 godzin 42 minuty i 23 sekundy
W 15 części nadejdzie czas na poznanie React'a, czyli bezpłatnej biblioteki, wydanej i utrzymywanej przez Facebooka, znacznie ułatwiającej tworzenie interfejsów.
React pod względem popularności bije na głowę inne dostępne rozwiązania (zobacz wykres) i a praca z nim jest bardzo zbliżona do pracy z czystym JS-em (z wyjątkiem drzewa DOM).
Zaczniemy też tworzyć dużą, pełnoprawną aplikację z logowaniem i rejestracją.
Część 15 - React — hooks + context
Stan: DOSTĘPNE
Ilość nagrań: 32 nagrań
Całkowity czas nagrań: 6 godzin 4 minuty i 23 sekundy
React jest już na rynku kilka dobrych lat. W 2019 roku zostały opublikowane dwie znaczne nowości w tej bibliotece — hooki i context, które szturmem podbiły serca programistów. Poznamy je teraz, zanim nauczymy się korzystać z innych bibliotek z ekosystemu React'a.
Część 16 - React Router — ekosystem Reacta
Stan: DOSTĘPNE
Ilość nagrań: 13 nagrań
Całkowity czas nagrań: 2 godzin 23 minuty i 3 sekundy
Sam React odpowiada wyłącznie za interfejs. Nie ma wbudowanych wielu elementów potrzebnych do stworzenia pełnoprawnej aplikacji. Możemy wymyślać koło na nowo albo... skorzystać z gotowych i sprawdzonych rozwiązań! :)
W pierwszy module o ekosystemie Reacta poznamy React Router — bibliotekę umożliwiającą wyświetlanie różnej zawartości w zależności od wpisanej przez użytkownika ścieżki.
Część 17 - React Hook Form — ekosystem Reacta
Stan: DOSTĘPNE
Ilość nagrań: 15 nagrań
Całkowity czas nagrań: 4 godzin 6 minuty i 22 sekundy
W drugim module poświęconym omówieniu ekosystemu Reacta poznamy React Hook Form – bibliotekę zawierającą logikę obsługi formularzy bez zmuszania użytkownika do korzystania z określonego interfejsu użytkownika
Część 18 - Material UI — ekosystem Reacta
Stan: DOSTĘPNE
Ilość nagrań: 24 nagrań
Całkowity czas nagrań: 3 godzin 34 minuty i 2 sekundy
Ostatnią częścią ekosystmeu Reacta będzie biblioteka Material UI — zestaw gotowych pięknych i użytecznych komponentów intrfejsu.
Część 19 - Redux i wykorzystanie go w React
Stan: DOSTĘPNE
Ilość nagrań: 14 nagrań
Całkowity czas nagrań: 3 godzin 32 minuty i 37 sekund
Naszą podróż zakończy Redux, czyli biblioteka zarządzająca stanem (danymi) całej aplikacji na raz. Z początku może zdawać się skomplikowana, ale po opanowaniu Redux'a już prawdopodobnie nigdy nie pogubisz się w danych własnej aplikacji.
Pomimo zbliżonej nazwy Redux jest zupełnie niezależny od React'a i możemy z niego korzystać w każdym JavaScriptowym projekcie. My z racji, że na tym etapie znamy już React'a, głównie będziemy pracować w zestawie React + Redux.
Część 20 - Efekty asynchroniczne w Redux
Stan: DOSTĘPNE
Ilość nagrań: 16 nagrań
Całkowity czas nagrań: 6 godzin 36 minuty i 0 sekund
Redux sam w sobie jest biblioteką w 100% synchroniczną. Pisząc pełnoprawne aplikacje trudno sobie jednak wyobrazić brak wykonywania zapytań do serwerów czy używania timerów. Efekty asynchroniczne można połączyć razem z synchronicznym centralnym storem na kilka sposobów. W tym module omówimy popularny i stosunkowo prosty sposób pracy z asynchronicznością w Redux – redux-thunk.
Część 21 - Podstawy testowania komponentów w React
Stan: DOSTĘPNE
Ilość nagrań: 9 nagrań
Całkowity czas nagrań: 1 godzie 24 minuty i 8 sekund
Proces tworzenia oprogramowania w React odbiega od tego, który znamy z pracy bezpośrednio z drzewem DOM, dlatego poświecimy osobną część na omówienie dostępnych sposóbów pisania testów do komponentów w React.
