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.
Cześć tej lekcji opowiem o klip paw czyli właściwości która pozwala nam wycinać
dowolny obiekt według wytycznych które już podaliśmy.
Jest to troszkę podobne do CSS ships z tym że faktycznie klip paw pozwala na
po prostu przecięcie jakby nałożenie maski na dany element.
Tutaj pokazuje stronę klip Ping Pawłow.
Klip Paw autorstwa dat NG Julien mam nadzieję że to dobrze.
No i widzimy tutaj że klip paw jest w Splicie ze względu na wsparcie.
Oczywiście możecie sprawdzić
jak wygląda wsparcie danej właściwości w momencie kiedy będziecie oglądać ten kurs.
No i możemy tutaj eksperymentować z różnymi jego właściwościami.
Tutaj mamy na przykład metodę tak samo jak było w HP.
No i oczywiście możemy podać różne
jednostki aby sprawdzić jak to się zachowuje.
Czyli możemy podawać różnego rodzaju jednostki do klipu a do jego funkcji.
No i oczywiście są też inne metody takie jak Eclipse czyli po prostu lipca
koło które jest troszkę zniekształcone i możemy w dwóch osiach je zniekształcone.
To bardzo będzie przydatne jeżeli chcemy pokazać wycinek np.
zdjęcia czy Avatara czy innych elementów i
jest to o tyle ciekawe rozwiązanie że jesteśmy w stanie przeciąć dany element z
dowolnej strony zachowując jego aspekt oraz pozycję początkową gdzie normalnie w
CSS musielibyśmy to robić over Flow Hidden.
I byłoby to generalnie niewygodne i tak samo możemy poligonach wyciąć danego
elementu tak aby pokazać dany fragment elementu więc możemy np.
sobie podzielić dany obrazek na cztery i wyświetlić go cztery razy i.
Wyświetlić np.
cztery sekcje tego obrazka każdy z innym filtrem.
Jest to bardzo elastyczna właściwość która
pozwoli nam tworzyć dosyć zaawansowane klejnoty zwłaszcza takie które mają
skomplikowane pomysły zawarte w swoim który faktycznie
stworzył i możemy to animowane tak samo jak widzieliśmy na początku.
Jest możliwość animacji klipów a nie wiem czy to jest coś co bym polecał
faktycznie robić na stronach WWW poza jakimiś eksperymentami.
Ale jest taka możliwość jeżeli byśmy
chcieli się pobawić tą właściwością no i tutaj możemy nawet różne kształty
takie pseudo trójwymiarowe na płaskiej płaszczyźnie przedstawiać i
po prostu warto wiedzieć że taka właściwość istnieje.