Zaawansowane projekty w CSS i JavaScript

7 projektów + BEM + Sass + Node.js + npm + JavaScript + webpack + Bootstrap + animacje + responsywność i optymalizacja

What you'll learn:

• Preprocesor Sass
• Metodologia BEM
• Flexbox i CSS Grid
• Node i NPM
• JS i DOM
• Webpack
• tworzenie animacji w CSS i JS
• Bootstrap
• tworzenie zaawansowanych projektów w CSS i JavaScript
• tworzenie stron wydajnych, zoptymalizowanych i dostępnych na wielu urządzeniach i rozdzielczościach

Dzień dobry! Dziękuję za zainteresowanie kursem "Zaawansowane projekty w CSS i JavaScript". Ten kurs to nie tylko ciekawe projekty, ale także technologie i umiejętności wychodzące znacznie poza podstawy HTML, CSS i JavaScript. Poniżej znajdziesz najważniejsze informacje o kursie. Zapraszam do wspólnej nauki!

CZEGOUCZYSZSIĘWTYMKURSIE

- BEM - bardzo popularna metodologia, w której części naszego interfejsu dzielimy na bloki i elementy a wariacje obu definiujemy za pomocą modyfikatorów. BEM może sprawiać na początku wiele problemów a dla części osób może być nieintuicyjny. Pokażę Ci, że to naprawdę ciekawy sposób myślenia o UI oparty na oryginalnym podejściu do tworzenia klas i selektorów. Jestem przekonany, że w swojej karierze front-end developera spotkasz się i będzie musiał(a) - mam nadzieję, że także chciał(a) - korzystać z BEM. Dlatego warto już dziś go poznać :)

- Sass - najpopularniejszy (A.D. 2020) preprocesor CSS. Preprocesor rozszerza możliwości CSS-a i jest technologią "must know" dla front-end developera. Korzystanie z Sass wymaga od Ciebie poznania składni nowego metajęzyka - języka będącego rozszerzeniem CSS. Oczywiście CSS jest procesem końcowym pracy z Sass a ostatnim etapem tej pracy jest kompilacja Sass na CSS (zobaczysz też różne jej sposoby). W tym kursie poznasz najważniejsze koncepcje Sass oraz korzyści z ich używania. Będzie teoria oraz praktyka. Zobaczysz też, że Sass bardzo fajnie komponuje się z wcześniej poznanym BEM.

- Flexbox i CSS Grid - najnowsze i najpopularniejsze obecnie techniki CSS pozwalające tworzyć layout strony i rozmieszczać elementy w kontenerach. W kursie skupiamy się przede wszystkim na CSS Grid, zakładam bowiem, że Flexbox udało Ci się już poznać (choćby z jednego z moich wcześniejszych kursów). Jeśli potrzebujesz dobre powtórki Flexboxa i dobrego opracowania CSS Grid z przykładami, to trafiłeś/-aś idealnie :)

- JS i DOM - Zakładam, że JavaScript znasz co najmniej w stopniu podstawowym. W tej części będzie przede wszystkim o korzystaniu z JavaScript w pracy z DOM oraz o korzystaniu z API (AJAX). Znajdzie się też czas na wyjaśnienie relacji między przeglądarką a serwerem. Ten kurs to także wyjaśnienie modułów w Javascript i to zarówno w specyfikacji CommonJS jak i ES Modules - od tego się nie ucieknie w bardziej zaawansowanych projektach.

- Node.js i NPM - niezbędne wprowadzenie dla front-end developera. Jeśli robiłeś/-aś już bardziej zaawansowane rzeczy po stronie frontu (np. korzystałeś/-aś z React.js) lub uczyłeś/-aś się back-endu, to znasz już Node.js i NPM. Jeśli tak jest, będzie to dla Ciebie w dużej części przypomnienie, jeśli nie, to dowiesz się istotnych rzeczy, z których z pewnością przyjdzie Ci korzystać, jeśli będziesz rozwijać karierę front-end developera. Znajomość Node i NPM profesjonalizuje i przyspiesza naszą pracę.

- Webpack - świetne i popularne środowisko developerskie. Dzięki webpackowi możliwy jest bundling (JS,CSS, grafiki, HTML) i automatyzacja zadań (np. kompilator Sass, transpilacja do ES5, minifikacja i optymalizacja) czy użycie serwera deweloperskiego. Będę starać się dobrze Ci wytłumaczyć działanie Webpacka, a nie tylko pokazać, jak go skonfigurować na zasadzie kopiuj - wklej.

- Animacje - strona bez animacji? Nawet w XX wieku były już gify :) A tak poważnie, animacje mają olbrzymi wpływ na estetykę strony, ale także na interfejs i bardzo pomagają uczynić stronę przyjazną (zrozumiałą) i atrakcyjną dla użytkownika. Skupimy się na animacjach w CSS, ale użyjemy też JavaScript.

- SVG i GSAP - grafika wektorowa w niektórych sytuacjach jest świetnym rozwiązaniem przy tworzeniu strony Skalowalne (dobre na każdy wyświetlacz), małe, powszechnie wspierane w przeglądarkach, bardzo dobre do animacji i interakcji - nie dziwi więc, że takie grafiki są często spotykane. W kursie poznasz też podstawy pracy z jedną z najpopularniejszych bibliotek do animacji (także animacji SVG), którą jest GSAP (Green Sock Animation Platform).

- Responsywność - optymalizacja - dostępność - jak tworzyć strony, które są wydajne, mają zoptymalizowane zasoby, są szybkie i da się z nich korzystać na różnych urządzeniach, różnych rozdzielczościach i różnych przeglądarkach. To jest temat rzeka i nie ogranicza się tylko do Media Queries i podejścia mobile first. My się z tym zagadnieniem zmierzymy na poważnie.

- BONUS: Bootstrap (gość) - Bootstrap to framework do tworzenia interfejsów użytkownika. W praktyce Bootstrap pozwala tworzyć responsywne strony w oparciu o gotowe elementy interfejsu i zdefiniowane style - nie trzeba wszystkiego pisać od zera. Bootstrapa można kochać i używać albo i nie. Ale warto go poznać.

A oprócz tego aż 7 zaawansowanych projektów z wykorzystaniem CSS i JavaScript - jeden tworzony przez mnie i 6 tworzonych przez zaproszonych gości.

GOŚCIE WKURSIE

W tym kursie część materiałów została przygotowana przez gości. Zostało to zaznaczone w harmonogramie. Dzięki gościom poznasz styl pracy kilku front-end developerów, co stanowi wartość dodaną tego kursu.

Zapraszam!