Do kursu dołączamy materiały dodatkowe
CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu
- Autor:
- Długość
- liczba lekcji: 105, czas trwania: 13:11:07
- Ocena
Kurs video
CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu
(ebook)
(audiobook)
(audiobook)
- Wydawnictwo:
- Videopoint
- Wersja:
- Online
- Czas trwania:
- 13:11:07
- Technologia:
- Sass 1.0, Node 8.9, Gulp 3.9
- Ocena:
Spis lekcji kursu video
-
1. Wstęp 33:40
-
2. Krótko o SASS 25:14
-
3. Nowoczesne CSS - fundamenty 1:08:17
-
4. Przygotowanie struktury projektu 31:59
-
5. Rozpoczynamy pracę nad menu bocznym 1:12:06
- 5.1. Lekcja wyjaśniająca: animacja logo 4:38
- 5.2. Logo - nieustająca animacja 9:45
- 5.3. Lekcja wyjaśniająca: avatar użytkownika 2:19
- 5.4. Avatar - efekt dynamicznej zmiany zdjęcia 10:10
- 5.5. Avatar - nazwa i status użytkownika 7:32
- 5.6. Lekcja wyjaśniająca: menu główne 2:28
- 5.7. Menu główne - efekt :hover 13:10
- 5.8. Lekcja wyjaśniająca: alternatywny efekt :hover 4:45
- 5.9. Alternatywny efekt :hover dla menu 9:46
- 5.10. Powiadomienia i alerty przy elementach nawigacji 7:33
-
6. Menu toggler - kompaktowy widok paska bocznego 41:00
- 6.1. Lekcja wyjaśniająca: mechanika rozwijania i zwijania paska bocznego 5:14
- 6.2. Struktura HTML dla przełącznika 4:07
- 6.3. Dynamiczna strzałka zmieniająca wygląd na kliknięcie 10:27
- 6.4. Ukrycie logo 2:15
- 6.5. Avatar użytkownika w widoku kompaktowym 4:52
- 6.6. Menu główne w widoku kompaktowym, cz. 1. 5:11
- 6.7. Menu główne w widoku kompaktowym, cz. 2. 8:54
-
7. Wyszukiwarka z nowoczesnym efektem 3D 45:41
-
8. Language switcher - czyli zmieniarka języków 1:17:20
- 8.1. Lekcja wyjaśniająca: rozwijanie menu oraz metoda tworzenia dowolnej flagi w CSS 7:20
- 8.2. Struktura HTML dla zmieniarki języków 12:33
- 8.3. Tworzymy flagę Polski 6:41
- 8.4. Tworzymy flagę Grecji 7:38
- 8.5. Tworzymy flagę Czech 4:30
- 8.6. Wyspy egzotyczne, cz. 1. - flaga Seszeli 7:00
- 8.7. Wyspy egzotyczne, cz. 2. - flaga Grenadyn 6:25
- 8.8. Wyspy egzotyczne, cz. 3. - flaga Malediwów 7:25
- 8.9. Flaga Stanów Zjednoczonych - wszystkie gwiazdki jedną regułą 10:02
- 8.10. Efekt :hover na menu wyboru języka oraz flagach 7:46
-
9. Avatar w navbarze 12:28
-
10. Przycisk wylogowywania 28:07
-
11. Własny grid 30:02
-
12. Tabela z danymi 58:22
- 12.1. Lekcja wyjaśniająca: kolumna z akcjami oraz efekt sortowania 3:48
- 12.2. Struktura HTML dla pierwszego wiersza tabeli 8:33
- 12.3. Tło tabeli - jako jedna z sekcji dashboardu 5:57
- 12.4. Podstawowe style dla tabeli 8:37
- 12.5. Przycisk ze statusem użytkownika 4:12
- 12.6. Kolumna z dodatkowymi akcjami - efekt :hover 9:11
- 12.7. Style dla nagłówków oraz efekt sortowania tabeli 7:14
- 12.8. Rozwijana lista z akcjami 10:50
-
13. Wykres pierścieniowy liczący postęp 1:07:19
- 13.1. Lekcja wyjaśniająca: czy zrobienie wykresu w czystym CSS jest możliwe? 3:53
- 13.2. Wykres w praktyce - struktura HTML 4:09
- 13.3. Przycisk dla wykresu 7:25
- 13.4. Fundamentalna funkcjonalność wykresu 14:17
- 13.5. Przygotowanie stylów do pętli @for 5:04
- 13.6. Dynamiczne wypełnianie wykresu z użyciem pętli @for 8:57
- 13.7. Dopieszczamy wykres - dodatkowe reguły CSS 9:42
- 13.8. Style dla drugiego typu wykresu 5:53
- 13.9. Nawigacja dla drugiego typu wykresu 7:59
-
14. Kalendarz 31:04
- 14.1. Lekcja wyjaśniająca: mechanika pojawiania się kalendarza 1:58
- 14.2. Struktura HTML dla kalendarza 4:25
- 14.3. Podstawowe style dla kalendarza 6:25
- 14.4. Górna sekcja kalendarza - nawigacja 6:45
- 14.5. Pojedyncze dni kalendarza i efekty :hover 9:11
- 14.6. Pokazywanie i ukrywanie kalendarza na kliknięcie 2:20
-
15. Pie chart - czyli wykres kołowy 49:36
- 15.1. Lekcja wyjaśniająca: zupełnie inne podejście do wykresu w czystym CSS 4:40
- 15.2. Podstawowa struktura HTML wykresu - nowe elementy SVG 3:45
- 15.3. Nawigacja wykresu 6:59
- 15.4. Podstawowe style dla wykresu 7:25
- 15.5. Uzupełniamy style dla wykresu 10:52
- 15.6. Funkcjonalność wykresu - dynamiczna zmiana wartości wykresu na kliknięcie 15:55
-
16. Slider z kandydatami 1:00:50
- 16.1. Lekcja wyjaśniająca: ruch slidera 4:47
- 16.2. Struktura HTML dla pojedynczej karty kandydata 11:11
- 16.3. Podstawowe style dla karty kandydata 12:24
- 16.4. Dopracowanie widoku oraz uzupełnienie slidera kolejnymi kandydatami 9:47
- 16.5. Wprawienie slidera w ruch 9:49
- 16.6. Rozmyte krawędzie sliderze i wykończenie widoku 12:52
-
17. Dostosowujemy projekt do mobilnych urządzeń 54:31
- 17.1. Zupełnie nowy widok sidebar togglera w wersji mobilnej 10:07
- 17.2. Tworzymy hamburger menu 6:03
- 17.3. Style wykańczające widok sidebara 5:58
- 17.4. Navbar w wersji mobilnej 4:48
- 17.5. Lekcja wyjaśniająca: jak wygląda tabelka w wersji mobile 3:41
- 17.6. Całkowita przebudowa widoku tabeli w prosty sposób 9:06
- 17.7. Wykresy i nawigacja 9:44
- 17.8. Slider - zmiana liczby widocznych kandydatów 5:04
-
18. Podsumowanie 3: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
-
Ta książka to doskonały wybór na początek dla osób, które chcą się nauczyć pisać kod. W łatwy i przyjemny sposób nauczy Cię podstaw HTML i CSS. Nie znajdziesz w niej nużącej i trudnej teorii ― poszczególne zagadnienia zostały przystępnie i angażująco wyjaśnione, między innymi dzięki ilustra...(41.40 zł najniższa cena z 30 dni)44.85 zł
69.00 zł(-35%) -
Mimo intensywnego rozwoju mediów społecznościowych, a co za tym idzie – nowego modelu kontaktu z klientami i „followersami”, zapotrzebowanie na profesjonalne, nowoczesne strony WWW nie maleje. Firmy i osoby prywatne wciąż poszukują twórców witryn w pełni responsywnych i maksymal...(39.90 zł najniższa cena z 30 dni)92.95 zł
169.00 zł(-45%) -
If you're a web designer or app developer interested in sophisticated page styling, improved accessibility, and less time and effort expended, this book is for you. This revised fifth edition provides a comprehensive guide to CSS implementation along with a thorough review of the latest CSS speci...(271.15 zł najniższa cena z 30 dni)279.65 zł
329.00 zł(-15%) -
CSS w Wordpress. Samodzielne zmiany w wyglądzie motywu Naucz się samodzielnie wprowadzać zmiany w wyglądzie motywu swojej strony WWW. Teraz będzie wyglądała dokładnie tak, jak tego chcesz! Ten e-book jest idealny dla Ciebie, jeśli: - czujesz frustrację przy klikaniu swojej strony, ... -
W świecie frontendu mnogość nowoczesnych narzędzi, pluginów i frameworków niejednego przyprawi o zawrót głowy. Zmieniają się standardy języków programowania i można rzec – wszystko płynie. Jednak i w tym świecie bez zawahania da się wymienić dwóch największych graczy – są nimi HTML i ...(39.90 zł najniższa cena z 30 dni)70.95 zł
129.00 zł(-45%) -
Framework Tailwind CSS to prawdziwy webmasterski hit ostatniego roku. Wyjątkowym i nowatorskim czyni go przyjęta filozofia pracy. Twórcy frameworka proponują bowiem oryginalne podejście do tworzenia stron i aplikacji internetowych. Zamiast ściśle semantycznego sposobu tworzenia klas CSS Tailwind ...(35.40 zł najniższa cena z 30 dni)38.35 zł
59.00 zł(-35%) -
Trudno sobie wyobrazić współczesny świat bez internetu. Żyjemy w nim, pracujemy, robimy zakupy, zbieramy informacje, spędzamy wolny czas. Oczywiście, w ostatnich latach model spędzania czasu w sieci się zmienił - wielu z nas korzysta przede wszystkim z social mediów. Jednak trafiamy także na stro...(39.90 zł najniższa cena z 30 dni)74.50 zł
149.00 zł(-50%) -
Ta książka jest kolejnym, uaktualnionym i uzupełnionym wydaniem lubianego podręcznika projektowania responsywnych stron internetowych. Omówiono w niej wszystkie nowości i ulepszenia z dziedziny projektowania responsywnych stron internetowych, w tym zapewnianie lepszej dostępności, fonty zmienne c...(41.40 zł najniższa cena z 30 dni)55.20 zł
69.00 zł(-20%) -
To kolejne, rozbudowane i uaktualnione wydanie świetnego podręcznika projektowania i programowania stron internetowych, zawierające wiedzę niezbędną do rozpoczęcia samodzielnej pracy. Opisano tu zasady tworzenia witryn WWW oraz przedstawiono język HTML i techniki CSS. Sporo miejsca poświęcono mul...(38.90 zł najniższa cena z 30 dni)38.90 zł
129.00 zł(-70%) -
To kolejne wydanie lubianego samouczka, dzięki któremu w ramach 24 godzinnych lekcji przyswoisz solidne podstawy programowania. Zrozumiesz, jak działają programy, i nauczysz się reguł stosowanych przez profesjonalistów przy ich projektowaniu. Dowiesz się, jak wygląda świat programistów i na czym ...(29.90 zł najniższa cena z 30 dni)34.50 zł
69.00 zł(-50%)
Videopoint - inne książki
-
Firmy z branży IT prześcigają się w tworzeniu rozwiązań zwiększających wydajność pracy, jak również podnoszących poziom specjalizacji pracowników w określonych dziedzinach. Od kilku już lat pozycja full stack developera, który wykonywał wszystkie prace programistyczne, jest wielką rzadkością. Obe...(39.90 zł najniższa cena z 30 dni)103.34 zł
159.00 zł(-35%) -
Czy znasz Angulara? Warto się z nim bliżej zaznajomić, ponieważ należy do najważniejszych frameworków służących do budowania interfejsów użytkownika w aplikacjach internetowych. Stworzony i wspierany przez Google, ma niezwykle spójny ekosystem i oferuje pełny zestaw narzędzi do tworzenia skalowal...(39.90 zł najniższa cena z 30 dni)77.35 zł
119.00 zł(-35%) -
Proponowany przez nas kurs video jest poświęcony grupie produktów typu open source, występujących pod wspólną nazwą Elastic Stack. Składają się na nią Elasticsearch, Kibana, Beats i – dla bardziej zaawansowanych – Logstash. Razem stanowią one zestaw narzędzi służących analizie i wizua...(39.59 zł najniższa cena z 30 dni)64.35 zł
99.00 zł(-35%) -
Sztuczna inteligencja, ChatGPT, sieci neuronowe, uczenie maszynowe, uczenie głębokie... Oto hasła, które elektryzują nie tylko branżę informatyczną na całym świecie. Wraz z rozwojem tej dziedziny wiedzy i w rytmie prezentowania kolejnych narzędzi rosną nadzieje na praktyczne, naukowe i biznesowe ...(39.90 zł najniższa cena z 30 dni)83.85 zł
129.00 zł(-35%) -
Power Apps to platforma stworzona przez Microsoft, umożliwiająca łatwe projektowanie, tworzenie i dostosowywanie aplikacji bez konieczności posiadania głębokiej wiedzy programistycznej. Z użyciem Power Apps można budować niestandardowe aplikacje, które efektywnie wspierają i automatyzują różne pr...(39.90 zł najniższa cena z 30 dni)129.35 zł
199.00 zł(-35%) -
W dzisiejszej praktyce biznesowej duże znaczenie mają dane i ich analiza. W analizie zastosowanie znajduje wiele modeli statystycznych, implementowanych w różnych programach komputerowych. Na przykład Excel ma specjalny dodatek, nazwany po prostu Analiza Danych. Bardzo popularne narzędzie stanowi...(39.90 zł najniższa cena z 30 dni)74.50 zł
149.00 zł(-50%) -
Oprogramowanie Apache Kafka powstało jako broker wiadomości w LinkedIn. Obecnie pełni funkcję rozproszonego systemu przetwarzania strumieniowego danych, używanego do budowania aplikacji opracowujących duże ilości danych w czasie rzeczywistym. Z zalet tego oprogramowania korzystają firmy na całym ...(39.90 zł najniższa cena z 30 dni)39.90 zł
89.00 zł(-55%) -
Wraz z rozwojem sztucznej inteligencji i modeli językowych – a niewątpliwie żyjemy w czasach eksplozji AI – rośnie znaczenie osób będących w stanie w praktyce sięgać po zasoby, jakie oferuje nam ta nowoczesna technologia. Okazuje się, że pośród rozmaitych innych umiejętności potrafi o...(39.90 zł najniższa cena z 30 dni)84.50 zł
169.00 zł(-50%) -
Czy znany Ci jest termin pentesting? Jeśli nie, oto jego krótka definicja: pentestingiem nazywamy proces badawczy mający na celu identyfikację słabych punktów w systemach komputerowych, sieciach i aplikacjach. W ostatnim czasie zapotrzebowanie na specjalistów od pentestingu i etycznego hakingu, p...(39.90 zł najniższa cena z 30 dni)109.85 zł
169.00 zł(-35%) -
Właściwe wymagania to nie tylko kwestia ich dokumentacji, ale też przede wszystkim kwestia odpowiedniego ich pozyskania i walidacji. Dobrej jakości wymagania zmniejszają ryzyko produktowe i projektowe, pozwalają tworzyć systemy, które realnie spełniają potrzeby interesariuszy i umożliwiają im osi...(39.90 zł najniższa cena z 30 dni)109.85 zł
169.00 zł(-35%)
Dzieki 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[at]helion.pl.
Książka, którą chcesz zamówić pochodzi z końcówki nakładu. Oznacza to, że mogą się pojawić drobne defekty (otarcia, rysy, zagięcia).
Co powinieneś wiedzieć o usłudze "Końcówka nakładu":
- usługa obejmuje tylko książki oznaczone tagiem "Końcówka nakładu";
- wady o których mowa powyżej nie podlegają reklamacji;
Masz pytanie o konkretny tytuł? Napisz do nas: sklep[at]helion.pl.
CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu
Proszę wybrać ocenę!
Książka drukowana
Oceny i opinie klientów: CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu Michał Grząśko (15)
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.
- 6
- 5
- 4
- 3
- 2
- 1
5.9(14)
(0)
(1)
(0)
(0)
(0)
więcej opinii