Helion


Szczegóły kursu video

Webpack 5. Kurs video. Kompletny przewodnik dla początkujących

Webpack 5. Kurs video. Kompletny przewodnik dla początkujących


Obierz kurs na... przyspieszenie w programowaniu

Dziś słowem kluczem, gdy mowa o programowaniu, jest szybkość. Żaden praktyk kodowania, żaden informatyk zatrudniony w biznesie nie może sobie pozwolić na opóźnienia w dostarczaniu i modyfikacjach stron WWW lub aplikacji. Stąd wszystkie działania muszą przebiegać w tempie ekspresowym, co nie zmienia faktu, że kod nadal powinien być tworzony czy nadpisywany bezpiecznie. Dlatego tym cenniejsze stają się narzędzia zwiększające wydajność i ułatwiające pracę. Jednym z nich jest Webpack.

Webpack to bundler, czyli inaczej transpilator JavaScriptu, który pozwala tworzyć pakiety uwzględniające zależności między modułami i klasami i poprawiające wydajność. Potrafi na przykład spakować wiele różnych formatów do jednego pliku JavaScript. Stworzony do pracy z językiem JS, dozbrojony w odpowiednie narzędzia Webpack może także przetwarzać HTML, CSS i obrazki. Warto go więc poznać i nauczyć się z niego korzystać, szczególnie jeśli jest się początkującym frontendowcem pracującym na co dzień ze stronami internetowymi lub z aplikacjami.

Co Cię czeka podczas naszego profesjonalnego szkolenia

W trakcie proponowanego przez nas kursu:

  • Nauczysz się instalować Webpack lokalnie
  • Poznasz zasady instalacji pluginów
  • Opanujesz podstawy technologii Sass
  • Skonfigurujesz serwer webpack-dev-server
  • Będziesz pisać komponenty

Co więcej...

  • W programie kursu zawiera się nauka importowania komponentów i stylów

Webpack 5. Kurs video. Kompletny przewodnik dla początkujących pozwoli Ci opanować podstawy pracy z tym bundlerem. Aby przystąpić do kursu, trzeba posiadać już pewne umiejętności w zakresie języka JavaScript, rozumieć takie pojęcia jak frontend czy serwer i mieć opanowane podstawy CSS.

Komu potrzebny jest bundler Webpack

Dzięki transpilatorowi Webpack można w łatwy i szybki sposób wdrażać aplikacje internetowe i rozwiązywać problemy, jakie pojawiają się w trakcie tego procesu. Szczególnie ułatwia on pracę nad projektami, których frontend jest bardzo rozbudowany, skomplikowany, z wieloma obrazami, fontami i elementami CSS. Pakując wiele różnych formatów do pliku JavaScriptu, Webpack nadaje mu rozszerzenie .js, co dzieje się dzięki przekształceniom i minifikacji zbędnego kodu. Jeśli zatem pracujesz i zamierzasz pracować na małych aplikacjach z pojedynczymi plikami JavaScriptu, Webpack może Ci się nie przydać. Jeżeli jednak zamierzasz wejść na wyższy poziom frontendu, koniecznie zapoznaj się z tym transpilatorem, a Twoja praca zdecydowanie przyspieszy!

  • 1. Zagadnienia wstępne
    • 1.1. Lekcja pilotażowa00:01:34
    • 1.2. Podstawy instalacji00:13:28
    • 1.3. Połączenie HTML z pluginem00:25:18
    • 1.4. Ostatnie kroki konfiguracji00:07:20
  • 2. Pierwszy projekt
    • 2.1. Instalacja i konfiguracja00:12:19
    • 2.2. Uzupełnienie szablonu HTML00:15:19
    • 2.3. Dodanie stylów CSS i kompilacja00:11:04
  • 3. Okienko pop-up
    • 3.1. Przygotowanie projektu00:10:31
    • 3.2. Szkielet HTML00:09:50
    • 3.3. Urozmaicenie arkuszami stylów00:05:19
    • 3.4. Pierwszy komponent00:13:59
  • 4. Transpilacja
    • 4.1. Niezbędne pluginy i konfiguracja00:13:20
    • 4.2. Przygotowanie szablonu HTML00:20:30
    • 4.3. Style CSS obowiązkowo00:10:57
    • 4.4. Komponent cz. I00:32:55
    • 4.5. Komponent cz. II00:37:42
  • 5. Technologia Sass cz. I
    • 5.1. Instalacja i konfiguracja00:11:44
    • 5.2. Dokument HTML obowiązkowo00:16:42
    • 5.3. Piersze zderzenie z Sass00:14:02
    • 5.4. Komponent raz jeszcze00:16:46
  • 6. Technologia Sass cz. II
    • 6.1. Konfiguracja00:10:04
    • 6.2. Przygotowanie dokumentu HTML00:12:56
    • 6.3. Utrwalenie wiedzy o Sass00:11:25
    • 6.4. Jeszcze jedno zderzenie z komponentem00:11:55
  • 7. Canvas i Webpack
    • 7.1. Procedura instalacyjna00:09:53
    • 7.2. Prosty szablon HTML00:08:36
    • 7.3. Wykorzystanie Sass00:05:49
    • 7.4. Komponent rysujący00:26:51
  • 8. Filtrowanie listy
    • 8.1. Przygotowanie projektu00:09:31
    • 8.2. HTML raz jeszcze00:05:29
    • 8.3. Style CSS, czyli klasyka00:04:04
    • 8.4. Komponent filtrujący00:06:50
  • 9. Inne ciekawe projekty
    • 9.1. Filtrowanie danych tabeli00:15:12
    • 9.2. Sortowanie listy00:11:56