Kurs CSS

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

9 ocen

Wprowadzenie

CSS jest już z nami ponad 20 lat i dalej się rozwija. Coraz to nowe właściwości są dostępne do dyspozycji developerów, tak by tworzenie stron WWW było szybsze, wygodniejsze i wydajniejsze. Tempo zmian w sieci jest ogromne, w związku z czym aby nie pozostać w tyle musimy patrzeć zarówno w przód, co czeka na nas w przyszlości - jak i to co mamy do dyspozycji już teraz. Kurs ten to pogląd na szereg terminów, technologii oraz architektur współczesnego CSSa w pigułce. Przedstawię Ci najważniejsze technologie oraz podejścia godne CSSa lat dwudziestych XXI wieku, oraz wskażę drogę dalej.

  1. Najważniejsze koncepcje CSS
  2. Praktyczne przykłady zastosowania
  3. Kompendium wiedzy o nowych technikach
  4. Preprocesory CSS
  5. Flexbox oraz Grid
  6. Podstawy tworzenia animacji
  7. Architektura CSS
  8. I wiele więcej!

CSS na miarę lat 20 XXI wieku

Web dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!

Architektura CSS

Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.

Tworzenie layoutów przy współczesnych metodach pozycjonowania

CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.

Przyśpiesz swoją stronę

Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.

Preprocesory CSS

Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!

Fundamenty animacji w CSS

Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)

Dla kogo jest ten kurs?

Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Autor: Wojciech Połowniak

Cześć! Nazywam się Wojtek i moja obecna rola to Full Stack Engineer - tworzeniem stron zajmuję się już od ponad dziesięciu lat. Jeśli miałbym wskazać moją pasję, to zdecydowanie byłoby to programowanie w technologiach webowych i dalsze szerzenie się wiedzą :) Możesz kojarzyć mnie z kanału Koduje na Youtube, gdzie stworzyłem ponad 50 darmowych poradników dotyczących różnych zagadnień z Front-Endu, czy jako głównego koordynatora cyklicznych spotkań Meet.js Warszawa. Poza tym jestem też członkiem programu Mozilla TechSpeakers - technologie open-source, ich tworzenie oraz przemowy publiczne również nie są mi obce. Od czasu do czasu prowadzę również indywidualne zajęcia dla osób poszukujących swojej pierwszej pracy jako Front-End developer. Uwielbiam tematykę dostępności sieci - o której świadomość, zwłaszcza na polskim rynku - jest dosyć znikoma. Interesuję się również IoT oraz VR (❤️) czy Game-Developmentem, również w JavaScript! Uważam, że nauczanie jest zdecydowanie najlepszą metodą, by poszerzać swoje horyzonty i dalej się rozwijać! https://koduje.pl

Cześć! Nazywam się Wojtek i moja obecna rola to Full Stack Engineer - tworzeniem stron zajmuję się już od ponad dziesięciu lat. Jeśli miałbym wskazać moją pasję, to zdecydowanie byłoby to programowanie w technologiach webowych i dalsze szerzenie się wiedzą :) Możesz kojarzyć mnie z kanału Koduje na Youtube, gdzie stworzyłem ponad 50 darmowych poradników dotyczących różnych zagadnień z Front-Endu, czy jako głównego koordynatora cyklicznych spotkań Meet.js Warszawa. Poza tym jestem też członkiem programu Mozilla TechSpeakers - technologie open-source, ich tworzenie oraz przemowy publiczne również nie są mi obce. Od czasu do czasu prowadzę również indywidualne zajęcia dla osób poszukujących swojej pierwszej pracy jako Front-End developer. Uwielbiam tematykę dostępności sieci - o której świadomość, zwłaszcza na polskim rynku - jest dosyć znikoma. Interesuję się również IoT oraz VR (❤️) czy Game-Developmentem, również w JavaScript! Uważam, że nauczanie jest zdecydowanie najlepszą metodą, by poszerzać swoje horyzonty i dalej się rozwijać! https://koduje.pl

5

Średnia ocen autora

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Wojciech Połowniak

Czas: 9 godzin 11 minut

Aktualizacja: 07.04.2021

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wprowadzenie

  • Wprowadzenie

  • Problemy z CSSem

Fundamenty współczesnego CSS

  • Kaskadowość

  • Specyficzność selektorów

  • Różne tryby wyświetlania

  • Model pudełkowy

  • Warstwy

  • Dostępne jednostki

  • Jednostki względne do rozmiaru okna

  • Media queries

CSS Flexbox

  • Pokrótce o flexie

  • Problematyka osi

  • Rozmiary względne między elementami flexa

  • Wady i zalety Flex boxa

CSS Grid

  • Pokrótce o gridzie

  • Podział na kolumny i wiersze

  • Umieszczanie elementów na siatce

  • Wady i zalety grida

Różnice między środowiskami uruchomieniowymi

  • Progressive enhancement

  • Fallback styles

  • Prefixy

  • Wspierane właściwości - klauzula Supports

  • Polyfille

CSS Custom properties

  • Zmienne w CSS

  • Semantyczne zastosowanie zmiennych

Preprocesory CSS

  • Problemy rozwiązywane przez preprocesory

  • Najpopularniejsze preprocesory CSS

  • Konfiguracja SCSS w VSCode

  • Konfiguracja SCSS z użyciem Gulp

  • Konfiguracja SCSS z użyciem Parcel

  • Konfiguracja SCSS z użyciem Webpack

SCSS w pigułce

  • Zmienne

  • Nesting

  • Pętle

  • Funkcje

  • Extendy kontra includy

  • Udostępnianie zmiennych do JavaScript

  • Moduły Sass

  • Co dalej z SCSSem?

Animacje

  • Animacje za pomocą przejść

  • Keyframes

  • Timing functions i krzywe

Wydajny CSS

  • Skomplikowane selektory

  • Will change

  • Malowanie układu strony

  • CSS Triggers

  • Odchudzanie CSSa

Czcionki i fonty

  • Importowanie fontów

  • Używanie iconic fontów

  • Font subsetting

Ciekawe zagadnienia

  • Pozycjonowanie absolutne

  • Odczytywanie atrybutów HTML

  • Procent czego?

  • CSS Counters

  • Selektory względne

  • Focus styles

  • CSS Shapes

  • Perspektywa

  • Clip path

  • Filter

  • Blendmodes

Architektura CSS

  • Czym jest BEM

  • Czym jest OOCSS

  • Czym jest SMACSS

  • Czym jest Atomic Design

  • Czym jest ITCSS

  • Czym są użyteczne klasy

CSS na miarę lat dwudziestych XXI wieku

  • Preferencje użytkownika

  • Aspect ratio

  • Content-visiblity i native lazy loading

  • Scroll properties

  • Conic Gradient

  • Stylowanie podkreśleń

  • Leading-trim

  • Stylowanie notcha oraz ekranów składanych

  • Czym jest houdini?

  • Co czeka w specyfikacji CSS?

Podsumowanie

  • Podziękowania

}