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 lekcje opowiem o Custom Properties czyli zwanych CSS Baja czyli zmiennych w CSS.
Jest to tak naprawdę coś co my jako Community walczyliśmy bardzo długo
w związku z czym fakt że jest to już zaimplementowane w większości przeglądarek
nie mnie cieszy i jestem pewien że tobie też z CSS Custom Properties
przypadną do gustu jak tylko zrozumiesz o co chodzi.
Generalnie do tej pory w CSS się.
Do momentu implementacji CSS Custom Properties nie było możliwości
współdzielenia kodu na zasadzie wszystkie te klasy powinny mieć ten sam kolor
a jakaś tam inna klasa powinna mieć wariacje tego koloru.
Trzeba było po prostu aplikować ten kolos czyli na przykład.
L I O.
Indeksie powiedzmy drugim powinno mieć.
Taki sam kolor jak
powiedzmy.
No tutaj powiedzmy Hot Pink
i oczywiście możemy testować sektory na
zasadzie podawania kilku naraz ale było to o tyle problematyczne że nie zawsze
mogliśmy adoptować pojedyncze wartości do różnych narodów czyli elementów w HTML u.
W związku z czym CSS Custom Properties pozwalają nam ustalić.
Wartość zmiennych.
Na jakąś myślą np.
zobaczmy jak to wygląda tutaj u nas w Polsce.
Czyli w takim pliku który ja przygotowałem już wcześniej.
No i widzimy że tutaj są za deklarowane jakieś zmienne Bagram bierze.
Zmienną o rencie jako swoją wartość.
I tutaj są w ogóle te zmienne zadeklarowany.
Więc jak to się robi ród jest to taki
specjalny sektor w którym możemy trzymać nasze zmienne takie jak globalne czyli to
są te podstawowe zmienne które nie zostaną.
Przez nic napisane jeżeli tego nie zrobimy to znaczy że jeżeli wróci.
Mamy zadeklarowanych takie zmienne możemy
ich używać w dowolnych elementach HTML na dowolnych właściwościach CSS.
Czyli jeśli ustalimy że
tutaj do kontenera to jest nasza elita.
Może nie ale jeśli ustalimy Może boks siadał
na tym kontenerze ma jakiś konkretny kolor no to możemy odwołać się do tych zmiennych
poprzez funkcję wiarę i wszystkie zmienne w CSS S.S. Custom Properties są
przez podwójny silnik przez taki dal Dash.
No i generalnie nazwa zmiennej jest po tych dachach.
Czyli jeśli chcemy użyć zmiennej obręcz którą zadeklarowali byśmy wrócili w takim
globalnym interfejsie dla zmiennych w CSS no to możemy odwołać się do tego poprzez
funkcję Var i podać tutaj nazwę zmiennej o którą nam chodzi.
Więc tutaj będzie boks Shadow.
O kolorze pomarańczowym który tak naprawdę
pod spodem może mieć zupełnie jakąś inną wartość co nie musi być orędzie jako słowo
kluczowe to może być RGB może być Helix może być SL.
Tak naprawdę za zmiennymi może kryć się
cokolwiek tam napiszemy mogą to być też liczby znaki ciągi znaków.
Nie ma w tym najmniejszego problemu
więc jeśli ustalimy że to powinno mieć boks szarą.
O wartościach 10 na 10 na 10 i takim tle tutaj usunięty.
Chwyt na sztywno na auto znów.
No to widzimy faktycznie że ten Box Shadow
jest przesunięty o te 10 pikseli w prawo i w dół.
No i ma 10 pikseli Gradient.
Jeżeli zrobimy tutaj 00 10 bodajże.
No to będzie po prostu 10 pikseli w tym samym miejscu.
Ustawione.
I faktycznie deklarowali to używając
zmiennej Custom Properties czyli jeżeli byśmy dali jakąś inną no to oczywiście to
się też zablokuje ale nie w tym jest cała siła Custom Properties
siła Custom Properties polega na tym że możemy wpisywać te zmienne które mamy
globalne one są w pliku CSS więc jak mogę je stąd spokojnie usunąć
i jestem w stanie na każdym sektorze na dowolnym sektorze wpisać te zmienne.
Czyli jeśli ja to zrobię.
Orange i nadał mi nową wartość czyli nie
chciałbym żeby to było takie Orange tylko powiedzmy jakaś tutaj
może troszkę jaśniejsza wersja tego pomarańczowego.
No to ten kontener.
Będzie miał inną.
Kolorystykę niż ten który tej klasy tutaj nie ma.
Jak byśmy to mogli zrobić powiedzmy.
Zapisujemy to poprzez osobną klasę czyli ogólnie.
Kontenery będą miały takie samo sterowanie.
Tutaj możemy dać Markin bo tam żeby.
Troszkę były od siebie oddalone no i.
Spieszył kontener będzie miał inne wartości zmiennych czyli np.
tutaj ten oręż możemy zastąpić jakimś innym i faktycznie widzimy że.
Poza aplikować tej klasy.
Spieszył.
Ten drugi kontener automatycznie zaktualizować.
Wygląd swoich kart które w nim się
znajdowały czyli tak naprawdę ten kontener nie ma na sobie żadnych
zmiennych użytych ale elementy wewnątrz niego już używając więc tutaj to
dziedziczenie o którym mówiłem na początku kursu.
Aplikacje zmienne CSS owe też się dziedziczą w związku z czym wpisują te
globalne które ustaliliśmy na rzucie i z których pierwszy kontener korzysta.
Jest to o tyle wygodne że faktycznie możemy stworzyć na przykład
Dark klasę która będzie przełączania nam na ciemny motyw
i możemy wziąć jakieś inne kolory.
Ciemniejsze niż te które mamy tam
domyślnie czyli jeżeli weźmiemy to tylko jako Referencje jakie tam mamy kolory
i tutaj zmienimy ich wartość to tylko dla tego kontenera is dark.
To się zmieni więc tutaj zmieniamy Green też na jakiś ciemniejszy odcień.
Tak samo to już prawie.
Blu też ma ciemniejszy i Rebecca Perry bardzo ładny kolor.
Poza pisaniu widzimy że faktycznie wszystko jest ciemniejsze.
Zrobiłem to zbyt po prostu zmieniając mogłem troszkę faktycznie przesunąć
barwę kolorystyczne.
Natomiast nie ma żadnego problemu żeby jedną klasą zmienić cały wygląd tej
struktury i tak naprawdę jeżeli byśmy tutaj stworzyli sobie zmienną na przykład.
Columbus.
Domyślnie byłoby to.
Kolumn ustawione na 6 odczytuje zmienne poprzez funkcję wiatr.
No to is dark może mieć inną liczbę kolumn.
Tak naprawdę nie musimy wiedzieć jak
stworzony jest ten nasz diesel inna gra idzie aby zmienić to jak on się wyświetla
ponieważ możemy po prostu zmienić Columbus na 3.
I w tym momencie cały nasz naród zupełnie się zmienił.
I takie właśnie użycia CSS Custom Properties sprawiają że jest to naprawdę
krok milowy w tym jak możemy tworzyć strony internetowe.
Do pewnego stopnia
eliminuje on konieczność korzystania z procesorów kodu.
Jeżeli zależy nam tylko i wyłącznie na zmiennych co nie zmienia faktu że
procesory kodu dalej są potrzebne i dalej zmienne w takich procesorach też
są bardzo często użyteczne i mogą pracować w tandemie razem z czasem Properties.
W kolejnej lekcji opowiem o tym jak wykorzystywać CSS Custom Properties aby
tworzyć klejnoty które mogą którymi możemy manipulować tylko i wyłącznie zmieniając.
Zmienne na poszczególnych elementach a cały leja odbędzie się tragicznie.
Sam układał.