Front-end zaawansowany w 15 dni
6,736 students enrolled
Front-end zaawansowany w 15 dni
Naucz się tworzyć atrakcyjne strony internetowe z wykorzystaniem bardziej zaawansowanych technik CSS i JavaScript
6,736 students enrolled
Price:
$19.99
30-Day Money-Back Guarantee
This course includes
- 38.5 hours on-demand video
- 100 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
- Tworzyć atrakcyjne strony internetowe z wykorzystaniem bardziej zaawansowanych technik CSS
- Wykorzystywać JavaScript i jQuery do tworzenia layoutów i efektów na stronie
- Tworzyć layouty w oparciu o Flexbox i CSS Grid
- Biegle posługiwać się kluczowymi właściwościami CSS
Course content
Expand all
107 lectures
38:39:26
+
–
Wstęp – czego i jak się nauczysz
5 lectures
25:23
Preview
00:52
Przygotowanie do pracy: konfiguracja edytora kodu - Visual Studio Code
16:37
+
–
Dzień 1 - CSS w pigułce, czyli szybka powtórka fundamentów CSS, cz. 1
5 lectures
02:25:19
Wprowadzenie - kaskadowość, właściwości inicjalizujące, dziedziczenie, ważność
23:17
Kaskadowość stylów w pigułce – podsumowanie
17:46
Selektory, pseudoelementy i pseudoklasy
29:46
Fonty w CSS
41:08
Jednostki w CSS
33:22
+
–
Dzień 2 - CSS w pigułce, czyli szybka powtórka fundamentów CSS, cz. 2
8 lectures
02:41:18
Właściwości background
27:22
Model pudełkowy i box-sizing
13:49
Właściwości position
27:57
Właściwości display
29:40
Normalizacja i reset CSS
11:03
Funkcja calc w CSS
16:16
Zmienne w CSS
13:56
Projekt podsumowujący - header i nawigacja "przyklejone" do okna przeglądarki
21:15
+
–
Dzień 3 - rozmieszczanie elementów na stronie - trening kodowania i myślenia
5 lectures
02:12:07
Zadanie 1: obrazek w stylu japońskim
32:55
Projekt menu z ikonkami z użyciem Font Awesome i Media Queries
42:07
+
–
Dzień 4 - animacje w CSS: właściwości transition i transform, cz. 1
8 lectures
02:16:56
Zadanie1: zmiana koloru tła i wyświetlenie tekstu po najechaniu na przycisk
22:17
Zadanie2: Kwadrat zmieniający rozmiar i pozycję po najechaniu na przycisk
16:37
Właściwości transform - wprowadzenie
22:13
Teoria: właściwości transform
08:17
Zadanie 3: wyśrodkowanie elementu w innym elemencie
05:05
Zadanie4: linia z kwadratem przesuwająca się przy scrollowaniu w obrębie okna
15:40
Zadanie 5: domek pojawiający się po kliknięciu przycisku
22:24
+
–
Dzień 5 - transition i transform cz. 2 oraz wprowadzenie do jQuery
8 lectures
01:28:31
Projekt 1: zegar w CSS ze wskazówką obracająca się po najechaniu na tarczę
17:40
Projekt 2a: przycisk z animacją - podkreślenie po najechaniu (wersja ze spanem)
06:26
Projekt 2b: przycisk z animacją - podkreślenie po najechaniu (wersja bez spana)
07:01
Projekt 2c: przycisk z animacją - zmiana koloru wypełnienia i tekstu
09:53
Zadanie 1: Przycisk z animacją dwuetapową
07:29
Projekt 3: przycisk z trójkątem pojawiającym się po najechaniu
09:23
Zadanie 2: zmiana rozmiaru tekstu i dodanie bordera po najechaniu na przycisk
07:42
Projekt 4: zmiana rozmiaru tekstu po kliknięciu przycisku z użyciem jQuery
22:57
+
–
Dzień 6 - wprowadzenie do właściwości animation
8 lectures
02:07:26
Projekt 1: wschodzące i zachodzące słońce - animacja z użyciem klatek kluczowych
29:53
Projekt 2: kwadrat zmieniający pozycję i kolor
22:12
Projekt 3: trzęsący się przycisk z użyciem animation
04:45
Projekt 4: przycisk ze zmieniającym się tekstem z użyciem transition
06:04
Zadanie 1: przycisk ze zmieniającym się tekstem - wjazd z boku
06:03
Projekt 5: Napisy zmieniające się (przesuwające się) w obrębie sekcji
18:56
Zadanie 2: Disco
12:59
+
–
Dzień 7 - projekty z użyciem animacji w CSS
8 lectures
02:25:46
Projekt 1a: animowane 3 kropki z użyciem pseudoelementu
09:16
Projekt 1b: animowane 3 kropki z użyciem spanów
08:24
Zadanie 1: baner ze zmieniającymi się zdjęciami
13:42
Projekt 2: baner ze zmieniającymi się zdjęciami i napisami
23:13
Zadanie 2: symulacja gry typu Pong
46:00
Projekt 3: chodząca postać
18:17
Projekt 4: poruszający się dzwonek z dodatkowym efektem po najechaniu
11:17
Zadanie 3: przycisk z przesuwającymi się strzałkami
15:37
+
–
Dzień 8 - wprowadzenie do Flexbox
6 lectures
02:26:44
Jak działa Flexbox na przykładzie kontenera zawierającego 3 elementy
28:19
Kluczowe właściwości Flexboxa w praktyce na kolejnych przykładach
27:46
Teoria: właściwości kontenera we Flexbox
37:41
Właściwości elementów elastycznych w praktyce
22:03
Model pudełkowy we Flexbox
09:49
Teoria: właściwości elementów elastycznych we Flexbox
21:06
+
–
Dzień 9 - Flexbox, wprowadzenie do CSS Grid i responsywność
9 lectures
03:01:21
Projekt 1: layout kalkulatora z użyciem Flexboxa
14:47
Zadanie 1: layout kalkulatora z odstępami między przyciskami
21:49
Tworzenie stron responsywnych przy pomocy media queries - przypomnienie
25:50
Galeria z użyciem Flexboxa i media queries
14:44
Projekt 2: proste menu responsywne z użyciem Flexboxa
12:10
Projekt 3a: layout z użyciem Flexboxa
24:56
Projekt 3b: layout responsywny z użyciem Flexboxa i media queries
08:57
Projekt 4: layout strony z użyciem Grida
30:19
Zadanie 2: Cennik z użyciem Grida
27:49
Requirements
- Znajomość podstaw HTML i CSS
Description
Ten kurs pomoże Ci uzyskać biegłość w posługiwaniu się kluczowymi właściwościami CSS a także sprawnie wykorzystywać JavaScript i jQuery w celu uatrakcyjnienia (ożywienia) tworzonego projektu. Nauczysz się korzystać z nowoczesnych, bardziej zaawansowanych technik i rozwiązań CSS, takich jak Flexbox czy CSS Animation. Poznasz też preprocesor Sass. Podczas kursu zrobimy mnóstwo projektów, np. galeria, slajder, modal/popup, menu hamburger, animacje, efekty związane z kliknięciem, najechaniem czy skrolowaniem strony.
Kurs rekomendowany osobom, które uczyły się wcześniej same lub przeszły ze mną I etap nauki (kurs Web developer od podstaw w 15 dni), znają fundamenty HTML i CSS oraz są w stanie stworzyć samodzielnie prostą stronę internetową. Nie jest wymagana znajomość JavaScript.
Ten kurs jest niezależnym projektem edukacyjnym, ale jest to jednocześnie drugi z 6 etapów w projekcie "Od podstaw do pierwszej pracy jako front-end developer". Kolejnym krokiem będzie pogłębienie znajomości JavaScript. Kurs ten pozwoli Ci uzyskać biegłość w posługiwaniu się CSS-em i poznać JavaScript w zakresie budowania layoutu i tworzenia efektów na stronie.
Who this course is for:
- osoby, które uczyły się już CSS i HTML, znają fundamenty tworzenia stron internetowych
- osoby, które ukończyły mój kurs "Web developer w 15 dni" i chcą dalej rozwijać swoje umiejętności