- Autor:
- Długość
- liczba lekcji: 105, czas trwania: 13:11:07
- Ocena
Kurs video
CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu
- Wydawnictwo:
- Videopoint
- Wersja:
- Online
- Czas trwania:
- 13 godz. 11 min.
- Technologia:
- Sass 1.0, Node 8.9, Gulp 3.9
- Ocena:
Spis lekcji kursu video
-
1. Wstęp 00:33:40
-
2. Krótko o SASS 00:25:14
-
3. Nowoczesne CSS - fundamenty 01:08:17
-
4. Przygotowanie struktury projektu 00:31:59
-
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
-
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
-
10. Przycisk wylogowywania 00:28:07
-
11. Własny grid 00:30:02
-
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
Opis
kursu video
:
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!
Wybrane bestsellery
Videopoint - inne kursy
Dzięki opcji "Druk na żądanie" do sprzedaży wracają tytuły Grupy Helion, które cieszyły sie dużym zainteresowaniem, a których nakład został wyprzedany.
Dla naszych Czytelników wydrukowaliśmy dodatkową pulę egzemplarzy w technice druku cyfrowego.
Co powinieneś wiedzieć o usłudze "Druk na żądanie":
- usługa obejmuje tylko widoczną poniżej listę tytułów, którą na bieżąco aktualizujemy;
- cena książki może być wyższa od początkowej ceny detalicznej, co jest spowodowane kosztami druku cyfrowego (wyższymi niż koszty tradycyjnego druku offsetowego). Obowiązująca cena jest zawsze podawana na stronie WWW książki;
- zawartość książki wraz z dodatkami (płyta CD, DVD) odpowiada jej pierwotnemu wydaniu i jest w pełni komplementarna;
- usługa nie obejmuje książek w kolorze.
Masz pytanie o konkretny tytuł? Napisz do nas: sklep@helion.pl
Książka drukowana
Oceny i opinie klientów: CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu Michał Grząśko (16) Weryfikacja opinii następuję na podstawie historii zamówień na koncie Użytkownika umieszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniające do uzyskania rabatu w ramach Programu Punktowego.
(15)
(0)
(1)
(0)
(0)
(0)
więcej opinii
ukryj opinie