Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 17/ 78Umieszczanie elementów na siatce
CSS: Umieszczanie elementów na siatce
Czego się nauczysz
- Najważniejsze koncepcje CSS
- Praktyczne przykłady zastosowania
- Kompendium wiedzy o nowych technikach
- Preprocesory CSS
- Flexbox oraz Grid
- Podstawy tworzenia animacji
- Architektura CSS
- I wiele więcej!
CSS - od Podstaw
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.
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.
Kurs CSS
15 rozdziałów78 lekcji9h 11min
Wprowadzenie
9min
- Wprowadzenie1min(zablokowana)
- Problemy z CSSem8min(zablokowana)
Fundamenty współczesnego CSS
1h 17min
- Kaskadowość7min(zablokowana)
- Specyficzność selektorów13min(zablokowana)
- Różne tryby wyświetlania11min(zablokowana)
- Model pudełkowy8min(zablokowana)
- Warstwy10min(zablokowana)
- Dostępne jednostki10min(zablokowana)
- Jednostki względne do rozmiaru okna7min(zablokowana)
- Media queries11min(zablokowana)
CSS Flexbox
38min
- Pokrótce o flexie6min(zablokowana)
- Problematyka osi11min(zablokowana)
- Rozmiary względne między elementami flexa12min(zablokowana)
- Wady i zalety Flex boxa9min(zablokowana)
CSS Grid
31min
- Pokrótce o gridzie6min(zablokowana)
- Podział na kolumny i wiersze7min(zablokowana)
- Umieszczanie elementów na siatce11min(zablokowana)
- Wady i zalety grida7min(zablokowana)
Różnice między środowiskami uruchomieniowymi
31min
- Progressive enhancement5min(zablokowana)
- Fallback styles5min(zablokowana)
- Prefixy5min(zablokowana)
- Wspierane właściwości - klauzula Supports9min(zablokowana)
- Polyfille7min(zablokowana)
CSS Custom properties
17min
- Zmienne w CSS9min(zablokowana)
- Semantyczne zastosowanie zmiennych8min(zablokowana)
Preprocesory CSS
39min
- Problemy rozwiązywane przez preprocesory5min(zablokowana)
- Najpopularniejsze preprocesory CSS7min(zablokowana)
- Konfiguracja SCSS w VSCode6min(zablokowana)
- Konfiguracja SCSS z użyciem Gulp6min(zablokowana)
- Konfiguracja SCSS z użyciem Parcel5min(zablokowana)
- Konfiguracja SCSS z użyciem Webpack9min(zablokowana)
SCSS w pigułce
59min
- Zmienne12min(zablokowana)
- Nesting10min(zablokowana)
- Pętle8min(zablokowana)
- Funkcje3min(zablokowana)
- Extendy kontra includy9min(zablokowana)
- Udostępnianie zmiennych do JavaScript8min(zablokowana)
- Moduły Sass5min(zablokowana)
- Co dalej z SCSSem?4min(zablokowana)
Animacje
22min
- Animacje za pomocą przejść7min(zablokowana)
- Keyframes9min(zablokowana)
- Timing functions i krzywe6min(zablokowana)
Wydajny CSS
31min
- Skomplikowane selektory11min(zablokowana)
- Will change6min(zablokowana)
- Malowanie układu strony6min(zablokowana)
- CSS Triggers3min(zablokowana)
- Odchudzanie CSSa5min(zablokowana)
Czcionki i fonty
16min
- Importowanie fontów5min(zablokowana)
- Używanie iconic fontów6min(zablokowana)
- Font subsetting5min(zablokowana)
Ciekawe zagadnienia
1h 25min
- Pozycjonowanie absolutne9min(zablokowana)
- Odczytywanie atrybutów HTML16min(zablokowana)
- Procent czego?7min(zablokowana)
- CSS Counters6min(zablokowana)
- Selektory względne9min(zablokowana)
- Focus styles7min(zablokowana)
- CSS Shapes8min(zablokowana)
- Perspektywa8min(zablokowana)
- Clip path3min(zablokowana)
- Filter8min(zablokowana)
- Blendmodes4min(zablokowana)
Architektura CSS
39min
- Czym jest BEM5min(zablokowana)
- Czym jest OOCSS11min(zablokowana)
- Czym jest SMACSS8min(zablokowana)
- Czym jest Atomic Design6min(zablokowana)
- Czym jest ITCSS6min(zablokowana)
- Czym są użyteczne klasy4min(zablokowana)
CSS na miarę lat dwudziestych XXI wieku
57min
- Preferencje użytkownika11min(zablokowana)
- Aspect ratio6min(zablokowana)
- Content-visiblity i native lazy loading7min(zablokowana)
- Scroll properties7min(zablokowana)
- Conic Gradient7min(zablokowana)
- Stylowanie podkreśleń4min(zablokowana)
- Leading-trim2min(zablokowana)
- Stylowanie notcha oraz ekranów składanych6min(zablokowana)
- Czym jest houdini?4min(zablokowana)
- Co czeka w specyfikacji CSS?3min(zablokowana)
Podsumowanie
- Podziękowania1min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Autor kursu
Bio
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