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.
Część w tej lekcji będę mówił o funkcjach w czasie.
Część z tych funkcji już faktycznie
dokonaliśmy przy ostatnich lekcjach na przykład jedną z takich funkcji było
latem i generalnie funkcję wywołuje się poprzez nazwę funkcji bez żadnych tam
snów czyli małp i wywołuje je tak byśmy wykonywali funkcje np.
w krypcie.
Czyli mamy na was okrągłe i listę parametrów oddzielną przyciskami
więc możemy tworzyć takie funkcje samodzielnie.
Ja też pokażę jak stworzyć własne funkcje misyjny.
Później w dalszych części tego kursu natomiast można użyć tutaj składni Faction
gdzie nazwą funkcji jest to co podamy właśnie po małpa.
No i tutaj definiujemy parametry i możemy
użyć do tego na przykład wcześniej już poznanych przez nas pętli aby sobie
zaimplementowane proste Power Falcon czyli generalnie potęgi.
I tutaj ta funkcja pozwala nam podać
liczbę którą chcemy podziękować i do której potęgi tę liczbę chcemy wznieść.
No i oczywiście możemy korzystać z takiej notacji.
Ja na przykład korzystam z funkcji do generowania.
Moich wartości CSS owych z pikseli na rymy
które są o wiele bardziej dostępne i nie są jednostkami absolutnym tak jak piksele.
O tym już wspominałem na początku tego kursu natomiast Możemy też podejrzeć
wbudowane funkcje Sasa możemy też dostosować np.
odcień za pomocą.
I tutaj jako parametr podajemy kolor który
chcemy dostosować ilość stopni o jakich chcemy obrócić tutaj ten kolor.
Jeżeli zrobimy
piszemy w internet
to zobaczymy że to jest faktycznie koło kolorów które możemy obracać za pomocą.
Stopni matematycznych i w ten sposób zmieniać kolor czy odcień danej zmiennej
o podaną wartość no i oczywiście takich funkcji jest o wiele więcej.
Mamy tutaj Alfy która pozwala nam
zmienić przez uroczystość danego koloru czy opaskę.
Na scenie.
Poprzez użycie rejon.
Funkcji mamy naprawdę co niemiara i to są tylko te funkcje dotyczące koloru.
Oczywiście są też funkcje dotyczące innych
rzeczy natomiast nie będę tutaj tego omawiał odsyłam do dokumentacji Sasa bądź
innego procesora z którego będziesz korzystał.
Ale warto wiedzieć że możemy korzystać z
funkcji które pozwolą nam tworzyć zaawansowaną logikę i w tych funkcjach
faktycznie możemy używać warunków takich jak IF aby obsługiwać jakieś przypadki
gdzie wartość po prostu nie będzie miała sensu.