Front-end zaawansowany w 15 dni
4.8 (3,048 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.
7,204 students enrolled

Front-end zaawansowany w 15 dni

Naucz się tworzyć atrakcyjne strony internetowe z wykorzystaniem bardziej zaawansowanych technik CSS i JavaScript
4.8 (3,048 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.
7,203 students enrolled
Last updated 7/2020
Polish
Current price: $13.99 Original price: $19.99 Discount: 30% off
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 108 lectures 38:40:16
+ 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ń 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