od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerWeb 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ę!
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.
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.
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.
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!
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)
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.
W tej lekcji opowiem czym jest Wschód.
Nie będę wchodził w jego szczegóły ponieważ holding składa się z bardzo wielu
różnych ekip które pozwalają nam robić różne rzeczy.
Jest to naprawdę szerokie zagadnienie natomiast w dużym skrócie jest Wschód
pozwala nam rozszerzać CSS a poprzez JavaScript czyli
nie tylko jesteśmy w stanie teraz robić różnego rodzaju.
Jesteśmy w stanie dodawać własne
rzeczy do CSS a jako specjalne właściwości których możemy używać pod spodem.
Generalnie opiera się to na tym że rysuje
Java skrypty pokazywane i wystawiamy to poprzez odpowiednie IP
do składni którą CSS jest w stanie zrozumieć.
No i jesteśmy w stanie stworzyć naprawdę ciekawe rozwiązania np.
zobaczmy tutaj na stronie gdzie faktycznie
możemy podejrzeć różne eksperymenty Chudego.
No to widać że jesteśmy w stanie stworzyć
sobie własną funkcję Point Corner Gradient.
I tutaj mamy różne właściwości i mamy gradient w danych kątach naszego boksu
przykładowo mamy możliwość dawania takich świętych elementów też jako pojedyncze
właściwości CSS owe co prawda wsparte chodzeniem ale my nie musimy wiedzieć jak
są zaimplementowane tylko używać pojedynczych właściwości z poziomu CSS a
więc tutaj dochodzi warstwa abstrakcji na to jak pracujemy z naszym kodem i jesteśmy
w stanie korzystać z technologii przyszłości już teraz poprzez niego np.
jesteśmy też w stanie stworzyć takie
bardzo ładne animowane boksy które mają naprawdę proste style.
Są one dosyć podobne do
CSS Custom Properties też tutaj jest ta składnia tabel.
No i po kliknięciu faktycznie będziemy widzieli taką ładną transakcję ponieważ
ten eksperyment zaimplementowane w krypcie i tych właściwości jest naprawdę duża więc
ja po prostu przejrzeć różne eksperymenty które możemy osiągnąć za pomocą niego.
No i tutaj widzimy że np.
jest ładny wygenerowany taki poligon nowy kształt który oczywiście możemy zmniejszać
i zwiększać możemy zmniejszać różne rezultaty to jesteśmy w stanie
zrobić za pomocą filtrów CSS owych ale takie rzeczy
też powoli ale takie rzeczy Chudik mi też pozwoli nam zrobić i osiągać takie efekty.
Przykładowo.
Oczywiście nie będę tutaj omawiał wszystkich opcji ale np.
jesteśmy w stanie zrobić taką jawną
wartość dla naszego awatara Six i będziemy mieli różne kształty tego poligonu.
Czy to będzie 6 12 skąd możemy to zmieniać dynamicznie za pomocą jednej właściwości.
No i tutaj obrót też możemy za pomocą.
Pojedynczej właściwości zmienić
ja tutaj jestem z niego nie będę omawiał ponieważ wymaga to tak naprawdę dosyć
sporej wiedzy z zakresu JavaScript przynajmniej korzystanie z niego.
W kontekście implementacji pojedynczych właściwości korzystanie
tak jak tutaj widzimy sprowadza się do korzystania z odpowiednich właściwości
którą znamy z odpowiednimi wartościami tak jak w systemie
CSS nie jest takim krokiem ku rozszerzaniu
CSS a wedle naszych potrzeb co też pozwoli.
Przeglądarką korzystać z różnych rozwiązań szybciej.
Jeśli mielibyśmy jakieś współdzielenie. Dla gminy.
Dochód z niego będziemy w stanie korzystać
ze skierowanych w wersji danej funkcjonalności
i tak naprawdę jeszcze bardziej przyśpieszyć rozwój sieci i CSS.
Zachęcam do zagłębienia tematu na własną rękę zwłaszcza jeżeli jesteś JavaScript
deweloperem i interesują cię takie niskopodłogowe tematy.