Helion


Szczegóły kursu video

CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu

CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu

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!

Sprawdź jak wygląda finalny projekt tworzony w trakcie kursu. 

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!

  • 1. Wstęp
    • 1.1. Wprowadzenie00:04:31
    • 1.2. Czym jest SASS?00:04:27
    • 1.3. Instalacja Node oraz Gulpa00:03:41
    • 1.4. Workflow z Gulpem00:04:59
    • 1.5. Gulp - dokładne omówienie00:16:02
  • 2. Krótko o SASS
    • 2.1. Zagnieżdżanie stylów00:10:07
    • 2.2. Zmienne00:01:56
    • 2.3. Dziedziczenie oraz mixin00:03:25
    • 2.4. Pętle00:05:07
    • 2.5. @import00:04:39
  • 3. Nowoczesne CSS - fundamenty
    • 3.1. Rewolucja z flexbox00:17:32
    • 3.2. Transform00:06:32
    • 3.3. Transition00:07:07
    • 3.4. Animation00:12:09
    • 3.5. Pseudoelementy00:07:04
    • 3.6. Zaawansowane selektory00:08:40
    • 3.7. Media queries00:09:13
  • 4. Przygotowanie struktury projektu
    • 4.1. Resetujemy domyślne style00:07:05
    • 4.2. Podział projektu na 3 główne sekcje - HTML00:07:45
    • 4.3. Podział projektu na 3 główne sekcje - SASS00:12:04
    • 4.4. Własne fonty z Google Fonts00:05:05
  • 5. Rozpoczynamy pracę nad menu bocznym
    • 5.1. Lekcja wyjaśniająca: animacja logo00:04:38
    • 5.2. Logo - nieustająca animacja00:09:45
    • 5.3. Lekcja wyjaśniająca: avatar użytkownika00:02:19
    • 5.4. Avatar - efekt dynamicznej zmiany zdjęcia00:10:10
    • 5.5. Avatar - nazwa i status użytkownika00:07:32
    • 5.6. Lekcja wyjaśniająca: menu główne00:02:28
    • 5.7. Menu główne - efekt :hover00:13:10
    • 5.8. Lekcja wyjaśniająca: alternatywny efekt :hover00:04:45
    • 5.9. Alternatywny efekt :hover dla menu00:09:46
    • 5.10. Powiadomienia i alerty przy elementach nawigacji00:07:33
  • 6. Menu toggler - kompaktowy widok paska bocznego
    • 6.1. Lekcja wyjaśniająca: mechanika rozwijania i zwijania paska bocznego00:05:14
    • 6.2. Struktura HTML dla przełącznika00:04:07
    • 6.3. Dynamiczna strzałka zmieniająca wygląd na kliknięcie00:10:27
    • 6.4. Ukrycie logo00:02:15
    • 6.5. Avatar użytkownika w widoku kompaktowym00: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
    • 7.1. Lekcja wyjaśniająca: efekt 3D i perspektywy całego dashboardu00:08:26
    • 7.2. Lupka oraz napis wyjeżdżający spod myszki00:17:08
    • 7.3. Efekt 3D wyszukiwarki00:11:03
    • 7.4. Przygotowanie sekcji pod kolejne elementy00:09:04
  • 8. Language switcher - czyli zmieniarka języków
    • 8.1. Lekcja wyjaśniająca: rozwijanie menu oraz metoda tworzenia dowolnej flagi w CSS00:07:20
    • 8.2. Struktura HTML dla zmieniarki języków00:12:33
    • 8.3. Tworzymy flagę Polski00:06:41
    • 8.4. Tworzymy flagę Grecji00:07:38
    • 8.5. Tworzymy flagę Czech00:04:30
    • 8.6. Wyspy egzotyczne, cz. 1. - flaga Seszeli00:07:00
    • 8.7. Wyspy egzotyczne, cz. 2. - flaga Grenadyn00:06:25
    • 8.8. Wyspy egzotyczne, cz. 3. - flaga Malediwów00: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 flagach00:07:46
  • 9. Avatar w navbarze
    • 9.1. Lekcja wyjaśniająca: jak jedną klasą kompletnie zmienić widok avatara00:03:02
    • 9.2. Reużywalny komponent - korzystamy z już powstałego00:09:26
  • 10. Przycisk wylogowywania
    • 10.1. Lekcja wyjaśniająca: omówienie animacji00:02:41
    • 10.2. Struktura HTML potrzebna do efektu00:05:28
    • 10.3. Przygotowanie stylów do animacji00:09:20
    • 10.4. Tworzymy animację tekstu00:10:38
  • 11. Własny grid
    • 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 @for00:12:12
    • 11.3. Rozbudowa grida00:07:42
  • 12. Tabela z danymi
    • 12.1. Lekcja wyjaśniająca: kolumna z akcjami oraz efekt sortowania00:03:48
    • 12.2. Struktura HTML dla pierwszego wiersza tabeli00:08:33
    • 12.3. Tło tabeli - jako jedna z sekcji dashboardu00:05:57
    • 12.4. Podstawowe style dla tabeli00:08:37
    • 12.5. Przycisk ze statusem użytkownika00:04:12
    • 12.6. Kolumna z dodatkowymi akcjami - efekt :hover00:09:11
    • 12.7. Style dla nagłówków oraz efekt sortowania tabeli00:07:14
    • 12.8. Rozwijana lista z akcjami00:10:50
  • 13. Wykres pierścieniowy liczący postęp
    • 13.1. Lekcja wyjaśniająca: czy zrobienie wykresu w czystym CSS jest możliwe?00:03:53
    • 13.2. Wykres w praktyce - struktura HTML00:04:09
    • 13.3. Przycisk dla wykresu00:07:25
    • 13.4. Fundamentalna funkcjonalność wykresu00:14:17
    • 13.5. Przygotowanie stylów do pętli @for00:05:04
    • 13.6. Dynamiczne wypełnianie wykresu z użyciem pętli @for00:08:57
    • 13.7. Dopieszczamy wykres - dodatkowe reguły CSS00:09:42
    • 13.8. Style dla drugiego typu wykresu00:05:53
    • 13.9. Nawigacja dla drugiego typu wykresu00:07:59
  • 14. Kalendarz
    • 14.1. Lekcja wyjaśniająca: mechanika pojawiania się kalendarza00:01:58
    • 14.2. Struktura HTML dla kalendarza00:04:25
    • 14.3. Podstawowe style dla kalendarza00:06:25
    • 14.4. Górna sekcja kalendarza - nawigacja00:06:45
    • 14.5. Pojedyncze dni kalendarza i efekty :hover00:09:11
    • 14.6. Pokazywanie i ukrywanie kalendarza na kliknięcie00:02:20
  • 15. Pie chart - czyli wykres kołowy
    • 15.1. Lekcja wyjaśniająca: zupełnie inne podejście do wykresu w czystym CSS00:04:40
    • 15.2. Podstawowa struktura HTML wykresu - nowe elementy SVG00:03:45
    • 15.3. Nawigacja wykresu00:06:59
    • 15.4. Podstawowe style dla wykresu00:07:25
    • 15.5. Uzupełniamy style dla wykresu00:10:52
    • 15.6. Funkcjonalność wykresu - dynamiczna zmiana wartości wykresu na kliknięcie00:15:55
  • 16. Slider z kandydatami
    • 16.1. Lekcja wyjaśniająca: ruch slidera00:04:47
    • 16.2. Struktura HTML dla pojedynczej karty kandydata00:11:11
    • 16.3. Podstawowe style dla karty kandydata00:12:24
    • 16.4. Dopracowanie widoku oraz uzupełnienie slidera kolejnymi kandydatami00:09:47
    • 16.5. Wprawienie slidera w ruch00:09:49
    • 16.6. Rozmyte krawędzie sliderze i wykończenie widoku00:12:52
  • 17. Dostosowujemy projekt do mobilnych urządzeń
    • 17.1. Zupełnie nowy widok sidebar togglera w wersji mobilnej00:10:07
    • 17.2. Tworzymy hamburger menu00:06:03
    • 17.3. Style wykańczające widok sidebara00:05:58
    • 17.4. Navbar w wersji mobilnej00:04:48
    • 17.5. Lekcja wyjaśniająca: jak wygląda tabelka w wersji mobile00:03:41
    • 17.6. Całkowita przebudowa widoku tabeli w prosty sposób00:09:06
    • 17.7. Wykresy i nawigacja00:09:44
    • 17.8. Slider - zmiana liczby widocznych kandydatów00:05:04
  • 18. Podsumowanie
    • 18.1. Podsumowanie00:03:31

  • Tytuł: CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu
  • Autor: Michał Grząśko
  • Ilość rozdziałów: 18
  • Ilość lekcji: 105
  • Czas trwania: 13:11:07
  • ISBN: 978-83-283-4636-9, 9788328346369
  • Identyfikator pozycji: vcsssa