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ęść tej lekcji opowiem pokrótce o
sektorach względnym takich jak sektory najbliższego rodzeństwa czy
po prostu ich kreatywne użycie w przypadku tworzenia modułów takich jak star rating.
Tutaj mamy Marka gdzie w kontenerze Stars
znajduje się lista faktycznie mogła być lista nie numerowane naszych.
Elementów impulsów i są to
radio batony ponieważ przede wszystkim dlatego że nie jesteśmy w stanie zaznaczyć
więcej niż jednej odpowiedzi w naszym systemie star rating aby dać trzy gwiazdki
albo pięć nie możemy dać kilku dlatego jest to radio baton.
Jeżeli byśmy chwilowo usunęli to Hidden
no to zobaczymy że faktycznie te radio batony tutaj się znajdują i po kliknięciu
na daną gwiazdkę ten radio baton się ustawia.
Dzieje się to ponieważ tutaj mamy powiązanie belek czyli
belka dla Star 1 faktycznie będzie przekierowania cały ruch jakby kliknięcie
użytkownika do elementu o tym ile Star 1 i odpowiednio
gwiazdka numer dwa od przekierować je na check box numer dwa itd itd.
No i my tutaj to w sposób dostępny.
Ukrywamy za pomocą klasy 1 o której też już wcześniej wspominałem i ona ukrywa
elementy w taki sposób że są one dalej dostępne dla liderów
ale nie są widoczne dla użytkowników powiedzmy widzących klasycznie.
No i jako że wiemy że
te elementy zaznaczają nam Check boksy możemy to wykorzystać na nasz korzyść tak
aby zapalić te elementy które obecnie są zaznaczone więc stwórzmy elektor.
Label for bo tutaj sforze ustawiamy gwiazdkę jako side.
To też nie jest najlepsze rozwiązanie bo niestety Screen litery na Maku mogą tą
gwiazdkę różnie czytać ale generalnie czytają jako gwiazdkę.
No i jeśli ustalimy sobie że
label B FOR będzie miał kolor Var Orange no to faktycznie wszystkie te
elementy będą się teraz świecić i teraz cały klub polega na tym aby zapłacić tylko
te gwiazdki które nam powinny być zapalone.
Więc jeśli ustawiamy sobie sektor w taki sposób aby tabelka obok
zaznaczone radio Buttona miała inny kolor no to możemy to zrobić na zasadzie
put check in plus label B for czyli plus
to jest jeden bezpośredni brat czy siostra danego elementu.
No i po napisaniu po zaznaczenie danego
elementu ta gwiazdka będzie się nam zapalić więc mamy już jakby jedną trzecią
naszej funkcjonalności skończoną możemy teraz przywrócić to.
Tak jak.
Początkowo to miało miejsce ja to sobie przywrócenie.
żebyśmy mieli pełny tutaj stan początkowy no i zapisujemy i teraz zaznaczenie tej
gwiazdki faktycznie będzie wskazywało nam który element jest obecnie zaznaczony.
Więc co musimy dalej zrobić to sprawić aby każdy następny element
czyli na przykład zaznaczając trzy gwiazdki.
No to chcielibyśmy aby wszystkie pozostałe gwiazdki też się
zaznaczyły czyli jak tutaj zaznacza my na przykład drugą no to chcielibyśmy aby
dwie były zaznaczone koniec końców więc możemy to zrobić na takiej zasadzie że
put możemy dopisać w ogóle do tego sektora in put it.
Wszystkie następne elementy które się potem na płycie znajdują label
before.
Też będą zapalone i zobaczą jaki jest efekt zaznaczyli.
Trzy gwiazdki faktycznie zaznaczają się trzy gwiazdki.
Wyznaczyliśmy dwie i zaznaczyły nam się cztery więc tutaj jest już jakiś problem
no bo faktycznie ta logika jest odwrócona czyli to generalnie nam działa.
Możemy jeszcze dodać tylko opcję z Hubertem.
Czyli jeśli zrobimy import.
Hofer.
Label for no to będziemy w stanie.
Zaznaczyć dowolny element to znaczy będzie takie automatyczne
zaznaczenie tego który element jest zaznaczony.
To co możemy zrobić aby to wyglądało w miarę OK no to moglibyśmy teoretycznie na
naszym sektorze Stars ustawić Display Flex i ustawić Flex Direction na rogu rewers.
No i wtedy mamy faktycznie sytuację taką której już byśmy się spodziewali że
zaznaczając trzy gwiazdki tutaj trzecią gwiazdkę.
Te trzy poprzednie nam się zaznaczają i to
jest czysto czasowe rozwiązanie więc naprawdę bardzo fajne polecam.
Zamiast robienia tego JavaScript możemy do
tego użyć pewnych elementów HTML CSS no i generalnie problem jest tylko taki.
że.
Te elementy tutaj jeżeli zaznaczyły na np.
element numer 4 to tak naprawdę zaznaczam my tu Stars.
Więc jak to obejść.
Więc jak to obejść. Generalnie musimy.
Tak czy siak zmanipulować troszkę naszą Amerykanów.
Czyli albo zrobić sytuację gdzie.
Nasze gwiazdki będą limitowane od pięciu w dół co może być trochę dziwaczne
rozwiązaniem natomiast nie ma w nim nic złego ponieważ będą dobrze czytane dla
czytników ekranowych czyli jak to sobie odwróciły.
Ford Stars.
Tutaj dwie gwiazdki czyli tak naprawdę od wracamy.
Kolejność naszego Marka.
I w tej sytuacji jak to piszemy no to oczywiście nasza sytuacja wygląda
wizualnie w ten sam sposób czyli możemy tutaj sobie zaznaczyć
elementy nie wiem czemu trzecia gwiazdka nam się tutaj nie zaznaczyła.
Prawdopodobnie coś źle
przed kopiowaniem label in label import tak tutaj powinien być jeden iPod więcej.
4.
I tu nam gdzieś uciekło.
Więc musimy je tutaj przeciągnąć na dół.
I wstawić w tym miejscu
więc mamy teraz parę label in import dla każdej z gwiazdek.
No i po napisaniu faktycznie każda z tych
gwiazdek będzie działać i klikając gwiazdkę numer jeden faktycznie zaznaczam
gwiazdkę numer jeden ale one faktycznie są odwrotne więc
niestety tutaj jest to trochę rozbite w kontekście dostępności
ale nie jest to na tyle krytyczna rzecz żeby to rozwiązanie dyskryminować.
I faktycznie sektory względem mogą być
bardzo przydatne zwłaszcza jeżeli chcemy zrobić naprawdę
lekki komponent który pozwoli nam dawać opinie na temat danego produktu.
I bardzo dobrze wpisywać się vide
Progressive Enhanced o której też już wcześniej mówiłem.
W związku z czym musieliśmy zrobić kolejną upewnić się że
nasz Marka pozwala nam na to aby kolorowe kolejne tabelki odkryliśmy każdy z naszych
impulsów tak aby nie był po prostu widoczny.
Oczywiście kredyt ale dalej byłyby w stanie to sobie zaznaczyć.
Potem aby nie mieć tego problemu z
zaznaczeniem gwiazdek od końca odwrócili je w naszym Marka P.
No i stworzyliśmy odpowiednie sektory które będą pobierały
odpowiednio zaznaczone element czyli powiedzmy zaznacza ten
i wszystkie kolejne tabelki po nim w danym gdzie będą zaznaczone czyli wraz.
2 3 i 4 byłyby zaznaczone
I na cholerę robimy dokładnie to samo czyli po odświeżenia.
Mamy podgląd tego którą gwiazdkę chcemy potwierdzić.
Moglibyśmy oczywiście dać troszkę inny kolor na to.
Podświetlenie żeby nie było
problemu z rozróżnienie co tak naprawdę teraz się dzieje czyli
moglibyśmy tutaj dać jakąś pochodną tego pomarańczowego.
I oczywiście przenieść do Custom Properties.
Jeżeli byłaby taka potrzeba.
A tak widzimy że zaznaczała gwiazdki tylko teoretycznie.
Hoover ale po kliknięciu widzimy że to się nam.