CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu

Promocja

Michał Grząśko

5.9

16 opinii

Podstawowe informacje:

Czas trwania: 13:11:07

Poziom: podstawowy

Autor: Michał Grząśko

Liczba lekcji: 105

Technologia: Sass 1.0, Node 8.9, Gulp 3.9

Dla firm

Rozwiń umiejętności swoich pracowników dzięki kursom video

Dowiedz się więcej

Monitorowanie postępów pracowników. Przejrzyste raporty i imienne certyfikaty ukończenia kursów
Atrakcyjne rabaty dla zespołów. Im więcej pracowników liczy zespół, tym większy uzyskasz rabat
Doradztwo w wyborze tematyki szkoleń. Mamy setki kursów, dostosujemy program nauczania pod Twój zespół

Indywidualnie

69,30 zł ~~99,00 zł~~ (-30%)

39,90 zł najniższa cena z 30 dni Dodaj do koszyka Za zakup otrzymasz 69 punktów

Do przechowalni

Korzyści:

Certyfikat ukończenia
Materiały dodatkowe do kursu
Test online
Dożywotni dostęp
Dostęp w aplikacji (także offline)
Napisy w języku polskim

Czego się nauczysz?

Przygotowywania środowiska pracy dla Sass i CSS
Instalowania Node i konfigurowania narzędzia Gulp
Stosowania zmiennych, mixinów, @import i media queries
Wykorzystywania nowoczesnych właściwości CSS, takich jak flexbox, transition czy pseudoelementy
Animowania elementów HTML i dostosowywania interfejsu do różnych urządzeń
Organizowania kodu CSS i dbania o estetykę projektu
Stylizowania przycisków, dropdownów, nawigacji, tabel i innych elementów interfejsu
Tworzenia dashboardu zgodnie z dobrymi praktykami CSS i Sass

Spis lekcji

1. Wstęp 00:33:40

1.1. Wprowadzenie

OGLĄDAJ » 00:04:31

1.2. Czym jest SASS?

00:04:27

1.3. Instalacja Node oraz Gulpa

00:03:41

1.4. Workflow z Gulpem

00:04:59

1.5. Gulp - dokładne omówienie

00:16:02

2. Krótko o SASS 00:25:14

2.1. Zagnieżdżanie stylów

00:10:07

2.2. Zmienne

00:01:56

2.3. Dziedziczenie oraz mixin

00:03:25

2.4. Pętle

00:05:07

2.5. @import

00:04:39

3. Nowoczesne CSS - fundamenty 01:08:17

3.1. Rewolucja z flexbox

00:17:32

3.2. Transform

00:06:32

3.3. Transition

00:07:07

3.4. Animation

00:12:09

3.5. Pseudoelementy

00:07:04

3.6. Zaawansowane selektory

00:08:40

3.7. Media queries

00:09:13

4. Przygotowanie struktury projektu 00:31:59

4.1. Resetujemy domyślne style

00:07:05

4.2. Podział projektu na 3 główne sekcje - HTML

00:07:45

4.3. Podział projektu na 3 główne sekcje - SASS

00:12:04

4.4. Własne fonty z Google Fonts

00:05:05

5. Rozpoczynamy pracę nad menu bocznym 01:12:06

5.1. Lekcja wyjaśniająca: animacja logo

00:04:38

5.2. Logo - nieustająca animacja

00:09:45

5.3. Lekcja wyjaśniająca: avatar użytkownika

00:02:19

5.4. Avatar - efekt dynamicznej zmiany zdjęcia

00:10:10

5.5. Avatar - nazwa i status użytkownika

00:07:32

5.6. Lekcja wyjaśniająca: menu główne

00:02:28

5.7. Menu główne - efekt :hover

00:13:10

5.8. Lekcja wyjaśniająca: alternatywny efekt :hover

00:04:45

5.9. Alternatywny efekt :hover dla menu

00:09:46

5.10. Powiadomienia i alerty przy elementach nawigacji

00:07:33

6. Menu toggler - kompaktowy widok paska bocznego 00:41:00

6.1. Lekcja wyjaśniająca: mechanika rozwijania i zwijania paska bocznego

00:05:14

6.2. Struktura HTML dla przełącznika

00:04:07

6.3. Dynamiczna strzałka zmieniająca wygląd na kliknięcie

00:10:27

6.4. Ukrycie logo

00:02:15

6.5. Avatar użytkownika w widoku kompaktowym

00:04:52

6.6. Menu główne w widoku kompaktowym, cz. 1.

00:05:11

6.7. Menu główne w widoku kompaktowym, cz. 2.

00:08:54

7. Wyszukiwarka z nowoczesnym efektem 3D 00:45:41

7.1. Lekcja wyjaśniająca: efekt 3D i perspektywy całego dashboardu

00:08:26

7.2. Lupka oraz napis wyjeżdżający spod myszki

00:17:08

7.3. Efekt 3D wyszukiwarki

OGLĄDAJ » 00:11:03

7.4. Przygotowanie sekcji pod kolejne elementy

00:09:04

8. Language switcher - czyli zmieniarka języków 01:17:20

8.1. Lekcja wyjaśniająca: rozwijanie menu oraz metoda tworzenia dowolnej flagi w CSS

00:07:20

8.2. Struktura HTML dla zmieniarki języków

00:12:33

8.3. Tworzymy flagę Polski

00:06:41

8.4. Tworzymy flagę Grecji

00:07:38

8.5. Tworzymy flagę Czech

00:04:30

8.6. Wyspy egzotyczne, cz. 1. - flaga Seszeli

00:07:00

8.7. Wyspy egzotyczne, cz. 2. - flaga Grenadyn

00:06:25

8.8. Wyspy egzotyczne, cz. 3. - flaga Malediwów

00:07:25

8.9. Flaga Stanów Zjednoczonych - wszystkie gwiazdki jedną regułą

00:10:02

8.10. Efekt :hover na menu wyboru języka oraz flagach

00:07:46

9. Avatar w navbarze 00:12:28

9.1. Lekcja wyjaśniająca: jak jedną klasą kompletnie zmienić widok avatara

00:03:02

9.2. Reużywalny komponent - korzystamy z już powstałego

00:09:26

10. Przycisk wylogowywania 00:28:07

10.1. Lekcja wyjaśniająca: omówienie animacji

00:02:41

10.2. Struktura HTML potrzebna do efektu

00:05:28

10.3. Przygotowanie stylów do animacji

00:09:20

10.4. Tworzymy animację tekstu

00:10:38

11. Własny grid 00:30:02

11.1. Lekcja wyjaśniająca: czym jest grid i Bootstrap?

00:10:08

11.2. Własny, wydajny grid z użyciem pętli @for

00:12:12

11.3. Rozbudowa grida

00:07:42

12. Tabela z danymi 00:58:22

12.1. Lekcja wyjaśniająca: kolumna z akcjami oraz efekt sortowania

00:03:48

12.2. Struktura HTML dla pierwszego wiersza tabeli

00:08:33

12.3. Tło tabeli - jako jedna z sekcji dashboardu

00:05:57

12.4. Podstawowe style dla tabeli

00:08:37

12.5. Przycisk ze statusem użytkownika

00:04:12

12.6. Kolumna z dodatkowymi akcjami - efekt :hover

00:09:11

12.7. Style dla nagłówków oraz efekt sortowania tabeli

00:07:14

12.8. Rozwijana lista z akcjami

00:10:50

13. Wykres pierścieniowy liczący postęp 01:07:19

13.1. Lekcja wyjaśniająca: czy zrobienie wykresu w czystym CSS jest możliwe?

00:03:53

13.2. Wykres w praktyce - struktura HTML

00:04:09

13.3. Przycisk dla wykresu

00:07:25

13.4. Fundamentalna funkcjonalność wykresu

00:14:17

13.5. Przygotowanie stylów do pętli @for

00:05:04

13.6. Dynamiczne wypełnianie wykresu z użyciem pętli @for

00:08:57

13.7. Dopieszczamy wykres - dodatkowe reguły CSS

00:09:42

13.8. Style dla drugiego typu wykresu

00:05:53

13.9. Nawigacja dla drugiego typu wykresu

00:07:59

14. Kalendarz 00:31:04

14.1. Lekcja wyjaśniająca: mechanika pojawiania się kalendarza

00:01:58

14.2. Struktura HTML dla kalendarza

00:04:25

14.3. Podstawowe style dla kalendarza

00:06:25

14.4. Górna sekcja kalendarza - nawigacja

00:06:45

14.5. Pojedyncze dni kalendarza i efekty :hover

00:09:11

14.6. Pokazywanie i ukrywanie kalendarza na kliknięcie

00:02:20

15. Pie chart - czyli wykres kołowy 00:49:36

15.1. Lekcja wyjaśniająca: zupełnie inne podejście do wykresu w czystym CSS

00:04:40

15.2. Podstawowa struktura HTML wykresu - nowe elementy SVG

00:03:45

15.3. Nawigacja wykresu

00:06:59

15.4. Podstawowe style dla wykresu

00:07:25

15.5. Uzupełniamy style dla wykresu

00:10:52

15.6. Funkcjonalność wykresu - dynamiczna zmiana wartości wykresu na kliknięcie

00:15:55

16. Slider z kandydatami 01:00:50

16.1. Lekcja wyjaśniająca: ruch slidera

00:04:47

16.2. Struktura HTML dla pojedynczej karty kandydata

00:11:11

16.3. Podstawowe style dla karty kandydata

00:12:24

16.4. Dopracowanie widoku oraz uzupełnienie slidera kolejnymi kandydatami

00:09:47

16.5. Wprawienie slidera w ruch

00:09:49

16.6. Rozmyte krawędzie sliderze i wykończenie widoku

00:12:52

17. Dostosowujemy projekt do mobilnych urządzeń 00:54:31

17.1. Zupełnie nowy widok sidebar togglera w wersji mobilnej

00:10:07

17.2. Tworzymy hamburger menu

00:06:03

17.3. Style wykańczające widok sidebara

00:05:58

17.4. Navbar w wersji mobilnej

00:04:48

17.5. Lekcja wyjaśniająca: jak wygląda tabelka w wersji mobile

00:03:41

17.6. Całkowita przebudowa widoku tabeli w prosty sposób

00:09:06

17.7. Wykresy i nawigacja

00:09:44

17.8. Slider - zmiana liczby widocznych kandydatów

00:05:04

18. Podsumowanie 00:03:31

18.1. Podsumowanie

00:03:31

Obierz kurs na... CSS/SASS!

Kaskadowe arkusze stylów to coś, bez czego nie może się obejść żadna efektowna wizualnie witryna internetowa — tak głęboko wrosły w nasze myślenie o tworzeniu pięknej strony, że nie możemy ich zastąpić niczym innym. Co więcej, CSS są rozwijane w dynamicznym tempie, a przeglądarki implementują i wspierają coraz to nowsze, bardziej zaawansowane reguły. Pozwala to twórcom stron dopieszczać swoje projekty i komponować niepowtarzalne layouty. Wszystkie te zalety CSS z pewnością już znasz i nie trzeba Cię przekonywać do ich wykorzystania. Sęk w tym, że kaskadowe arkusze stylów mają też pewną irytującą wadę: wymagają nieustannego powtarzania fragmentów kodu. Na szczęście wizjonerzy nowego, ergonomicznego programowania znaleźli na to sposób: zaprojektowali SASS — preprocesor CSS pośredniczący między przeglądarką a Twoim kodem. Dzięki temu możesz oszczędzić mnóstwo czasu!
CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu ma za zadanie pokazać Ci, jak inteligentnie i wydajnie korzystać z SASS przy nadawaniu stronie internetowej odpowiedniego wyglądu. To niezwykle elastyczne środowisko udostępnia fantastyczne narzędzia i wzorce, które możesz wykorzystać w swoich projektach. Podczas kursu nauczysz się używać najbardziej efektownych i najwygodniejszych skrótów, trików i metod działania w środowisku SASS.
Sprawdź, jak wygodnie możesz realizować swoje pomysły na stronę WWW — sięgnij po SASS!

Czego nauczysz się podczas naszego profesjonalnego szkolenia?

Zobaczysz, jak przygotować środowisko do pracy z SASS.
Nauczysz się instalować Node.
Sprawdzisz, do czego służy narzędzie Gulp i jak można go używać.
Zaczniesz korzystać ze zmiennych i mixin, a także z @import i media queries.
Opanujesz praktyczne wykorzystywanie nowoczesnych właściwości CSS, takich jak flexbox, transition, pseudoelementy i zaawansowane selektory.
Odkryjesz, jak animować elementy HTML oraz dostosowywać wygląd projektu do wszystkich urządzeń — od desktopowych po mobilne.
Poznasz zasady pozwalające zachować porządek i estetykę w kodzie.
Dowiesz się, jak ostylować elementy najczęściej wykorzystywane na stronach internetowych, czyli przyciski, dropdowny, nawigację, togglery, tabele.

Nie musisz być biegłym użytkownikiem CSS, by poradzić sobie z opanowaniem zawartego tu materiału. W trakcie ponad stu lekcji nauczysz się obsługi podstawowych i bardziej zaawansowanych narzędzi SASS. Zorientujesz się także, jak pisać ikonki w czystym CSS oraz efektowne i przyciągające wzrok zdarzenia :hover. Twoje strony internetowe wiele zyskają dzięki wzbogaceniu interfejsu o różne nowoczesne efekty, a estetyka w pisaniu kodu znacznie się poprawi. Co więcej, poznasz kluczowe elementy sposobu myślenia, który umożliwi Ci pisanie dowolnego interfejsu w CSS. Dowiesz się między innymi, jak odpowiednio nazywać klasy (i jak ich nie nazywać) oraz jak tworzyć odpowiednią konwencję dla projektu.
Jeśli zrealizujesz wszystkie zadania, jakie postawi przed Tobą autor szkolenia CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu, oraz starannie przeanalizujesz jego wskazówki, Twoje projekty staną się znacznie lepsze, a Ty zaoszczędzisz mnóstwo czasu i nerwów.

Eleganckie stylowanie stron

Ten kurs zawiera najróżniejsze zagadnienia: od stosunkowo prostych po zaawansowane. Jeśli radzisz sobie z podstawami CSS, z pewnością możesz go rozpocząć i stopniowo nabierać coraz większej biegłości w rozumieniu kodu, dostrzeganiu jego niuansów i stylizowaniu dowolnych elementów HTML. To z kolei poprawi Twoje umiejętności w zakresie szybkiej i trafnej oceny różnych obszarów strony, zwiększy Twoje wyczucie i pozwoli Ci zyskać nową perspektywę. Regularne używanie preprocesora SASS sprawi, że zaczniesz myśleć w kategoriach zestawów reguł potrzebnych do napisania danego elementu. Takie podejście znacznie przyspieszy Twoje standardowe projekty, a jednocześnie przygotuje Cię na większe wyzwania. Nie tylko bez problemu będziesz nadawać style standardowym przyciskom, rozwijanym menu i przełącznikom, lecz także zaczniesz w pełni wykorzystywać animację czy złożone zdarzenia. Będziesz też bez problemu dopasowywać interfejsy swoich stron do potrzeb różnych urządzeń — stacjonarnych i mobilnych.

W poszukiwaniu własnego stylu

Na świecie istnieje niewyobrażalnie dużo stron internetowych. Zdecydowana większość z nich nie świadczy najlepiej o ich projektantach. Nie chcesz chyba być jednym z nich? CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu pomoże Ci uniknąć wielu błędów i zrozumieć istotę tworzenia stron o dużych walorach graficznych. Jeśli myślisz o karierze programisty lub projektanta albo chcesz aplikować na dowolne stanowisko wymagające takich umiejętności, bez znajomości CSS i SASS nie masz co o tym marzyć. Znajomość SASS jest jednym z najczęstszych wymagań pojawiających się w ofertach pracy. Dzięki temu szkoleniu zdobędziesz umiejętność pożądaną na rynku pracy — nauczysz się analizować projekt pod kątem odpowiedniej konwencji i zwiększysz elastyczność własnego myślenia o graficznych aspektach strony.

Tylko dla wtajemniczonych

Sprawdzone wzorce, dobre praktyki, funkcjonalności SASS, nowoczesne możliwości CSS3 i sposoby ich wykorzystania na przykładzie pełnego, kompleksowego projektu — oto, co oferuje Ci CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu. Znajdziesz tu specjalistyczne narzędzia oraz jasne, precyzyjne i szerokie omówienia kolejnych elementów. Prześledzisz dokładnie, krok po kroku, jak zabrać się do projektowania i jakie kolejne czynności wykonać. Zobaczysz, jak Twój kod nabiera rozmachu i szyku, staje się dynamiczny, przejrzysty, dokładnie taki, jaki powinien być. Terminologia związana z CSS i SASS przestanie być dla Ciebie przeszkodą, a nowo poznane elementy posłużą Ci do stworzenia zachwycających projektów!

Wybrane bestsellery

O autorze kursu video

Michał Grząśko — front-end developer specjalizujący się w technologiach Angular 2+ oraz AngularJS. Od dziecka interesował się grafiką komputerową, co później przerodziło się w projektowanie stron. Grafika zaszczepiła w nim zmysł estetyczny, który na co dzień wykorzystuje w programowaniu javascriptowych aplikacji. Programista żywo zainteresowany kreatywnym i efektownym wykorzystaniem reguł CSS oraz łączeniem ich z nowoczesnymi technologiami JavaScriptu, na przykład z Angularem.