Zaawansowane projekty w CSS i JavaScript
4.8 (538 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,107 students enrolled

Zaawansowane projekty w CSS i JavaScript

7 projektów + BEM + Sass + Node.js + npm + JavaScript + webpack + Bootstrap + animacje + responsywność i optymalizacja
4.8 (538 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,107 students enrolled
Last updated 2/2020
Polish
Current price: $13.99 Original price: $19.99 Discount: 30% off
30-Day Money-Back Guarantee
This course includes
  • 49.5 hours on-demand video
  • 7 articles
  • 46 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 277 lectures 49:38:32
+ Teoria i praktyka Sass. Sass & BEM
16 lectures 03:17:13
Wprowadzenie do sekcji
05:58
Zagnieżdżenia w Sass
17:01
Zagnieżdżenia i BEM
10:34
Zmienne w Sass
22:48
Typy wartości w Sass
12:21
Komentarze w Sass
03:54
Architektura i @import w projekcie Sass
14:22
Domieszki (@mixin @include)
29:07
Rozszerzenia (@extend) i selektory zastępcze
20:43
Operacje matematyczne
05:26
Interpolacja
02:11
funkcje kolorów w Sass
05:48
Instrukcje warunkowe w Sass
12:30
Własne funkcje w Sass
11:31
Media Queries i Sass
20:37
Co dalej
02:22
+ Flexbox
13 lectures 02:40:26
Wprowadzenie do sekcji
03:26
Krótka prezentacja o Flexboxie - właściwości elementów elastycznych i kontenera
12:38
Ustawienia i narzędzia dla projektu
05:20
Podstawowa struktura projektu
16:56
Layout strony tworzony za pomocą Flexboxa
14:44
Sekcje "Logo" i "Wyszukiwarka"
13:24
Sekcja "Settings"
08:51
Sekcja "Menu"
13:55
Sekcja "Artykuły główne"
20:26
Sekcja "Lista artykułów"
24:52
Sekcja "Stopka"
12:47
Media Queries i Flexbox
12:55
+ CSS Grid
16 lectures 03:43:49
Wprowadzenie
05:50
CSS Grid a Flexbox
05:46
Kontener, elementy, linie, ścieżki, komórka, obszar siatki i przerwy w siatce
21:03
Struktura siatki i rozmieszczenie elementów
05:06
Jak generowana jest struktura siatki
10:34
Sposoby na rozmieszczenie elementów siatki w siatce
20:49
Przykłady - automatyczne rozmieszczanie elementów
23:13
Przykłady - jawne deklarowanie pozycji elementów
21:50
Przykłady - jawne deklarowanie siatki
34:05
Przykłady - właściwości kontenera
11:55
Przykłady - właściwości elementu siatki
10:14
Przykłady - wartości i funkcje w CSS Grid
14:25
Projekt cz.1 - layout
21:23
Projekt cz.2 - galeria
08:24
Projekt cz.3 - responsywność
08:30
+ JavaScript i DOM
7 lectures 01:38:19
Wprowadzenie do DOM (przypomnienie)
18:19
Projekt - struktura HTML
09:32
Projekt - CSS (flexbox)
13:02
Projekt - dodawanie elementów do DOM (JavaScript)
22:11
Projekt - wyszukiwanie elementów (JavaScript)
15:08
Projekt - wyświetlanie informacji o elemencie (JavaScript)
13:11
Projekt - wyświetlanie elementów (CSS Grid)
06:56
+ AJAX (Fetch)
5 lectures 01:26:54
AJAX, budowa URL, asynchroniczność, JSON, Web serwer i API
26:50
Publiczne API z którym w tej sekcji pracujemy
09:27
Metoda Fetch - pierwsze starcie
24:03
Formularz i tworzenie parametrów zgodnie z API
13:00
Odpowiedź serwera i modyfikacja DOM
13:34
+ Projekt 1 - scroller (Daniel Siwek)
11 lectures 02:35:15
Wprowadzenie i struktura HTML projektu
09:37
Rozpoczynamy pracę z JavaScript i podstawowe style w CSS (w tym normalize.css)
20:41
Funkcja obsługująca skrolowanie - określenie kierunku skrola
07:14
Metoda scrollIntoView() i zabezpieczenie przed kilkukrotnym skrolowaniem naraz
08:35
Refaktoryzacja kodu JavaScript
05:21
Kod bardziej obiektowy - klasy i this
38:47
Nawigacja
25:08
Dostępność projektu na różnych przeglądarkach
08:54
Obsługa urządzeń dotykowych
25:02
Obsługa z poziomu klawiatury
04:10
+ Projekt 2 - ruch myszką a ruch elementów (Daniel Siwek)
4 lectures 52:53
Projekt "Balloon" - wersja kompletna
25:07
Przerabiamy projekt na wersję bardziej obiektową (OOP)
09:11
Bonus - projekt zbudowany w React
17:55
Requirements
  • dobra znajomość HTML, CSS oraz podstawowa JavaScript
Description

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!


CZEGO UCZYSZ SIĘ W TYM KURSIE

- 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 W KURSIE

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!

Who this course is for:
  • każdego obecnego i przyszłego front-end developera, który naukę podstaw ma już za sobą i chciałby poznać technologie, narzędzia i koncepcje używane na co dzień w pracy wielu front-end developerów
  • dla osób szukających pierwszej pracy jako front-end developerzy, które chcą zyskać umiejętności i znajomość technologii/narzędzi, których oczekują pracodawcy