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.
Czyli inwektywCSS.
Jest to architektura którą stworzył Harry Roberts znany z takiej strony jak CSS.
No i jest to generalnie jego podejście do
tworzenia CSS a które on poleca swoim klientom.
Tak jak inne architektury nie narzuca
tutaj za dużo to są tylko bardziej Gay dla innych do tego jak powinniśmy tworzyć.
I wszystkie te problemy o których mówiłem
w kontekście CSS a w jednej z pierwszych lekcji.
Pokrywają się z tym co Harry Robert sądzi i jego rozwiązaniem na te problemy jak np.
specyfice kaskady nowość czy.
Niejasność niektórych zasad
CSS a są pokrywane przez ECA i generalnie jedną z zasad
jest to aby tworzyć jak najbardziej generycznych sektory.
Na samym początku kodu czyli tutaj widzimy pomimo na razie może
dwie górne sekcje tego trójkąta widzimy że są style bazowe.
Wewnątrz są obiekty wewnątrz są komponenty i wewnątrz są trampki.
Czyli jest to prawie takie same podejście jak smak się bo tam też mieliśmy podział
na style bazowe na style tu na style modułów czy komponentów.
Tutaj mamy obiekty
i dalej tam były motywy a tutaj mamy po prostu trampki czyli takie LPR.
I dlaczego to jest odwrócony trójkąt.
Ponieważ rzeczy z samej góry Sting i Turcy mają się do nas tylko wtedy
jeżeli korzystamy z procesorów takich jak CSS.
Jeżeli nie no to możemy zupełnie zignorować tą sekcję tej architektury i.
I im szerszy zasięg szersze efekty Dana warstwa ma tym jest wyżej w trójkącie.
Dlatego im schodzimy niżej tym bardziej jesteśmy konkretni.
Przykładowo w warstwie baz moglibyśmy mieć np.
jakiegoś naszego CSS seta
i tyle ogólne dla wszystkich znaczników w naszym kodzie źródłowym
schodząc dalej jeżeli stylowo byśmy jakieś listy czy media czy karty to.
Naturalnie nawet jeżeli specyfiki tych elementów byłyby identyczne takich jak
bass no to przez kaskady nowość obiekty będą miały nad tym przewagę i będą
spisywały bardziej konkretnymi stylami te bardziej generycznych.
Dlatego kolejna warstwa jest już węższe
i dalej komponenty będą w stanie korzystać ze wszystkiego co obiekty już im dały
ale będą w stanie jeszcze bardziej zawiesić te nasze.
Strony i sekcje danej aplikacji z bardziej konkretnymi przypadkami czyli np.
moglibyśmy stworzyć tyle dla danej listy
ale ten komponent trochę inaczej tę listę by wędrował i dlatego on wygra.
Po pierwsze że jest niżej a po drugie że ma bardziej konkretne sektory.
Jednym z celów Harry'ego Robertsa było to aby te najbardziej specyficzne sektory
umieszczać na samym końcu naszych plików CSS tak aby nie było żadnych
problemów z ich napisaniem później i w takiej kolejności powinniśmy ładować
wszystkie te warstwy tego odwróconego trójkąta czyli jak widzimy na samej górze
jest przedstawienie tego jak bardzo szeroko sięgają nasze sektory.
Im schodzimy niżej tym jest większe ich specyfice.
I tym większa jest ich dokładność.
Czy konkretny gość.
Sting z Tuluzy tak jak wspomniałem są tylko i wyłącznie dla procesorów więc
można wyrzucić jeżeli z niego nie korzystamy.
Jak widać tutaj nic pokrywa się do pewnego stopnia z Maksem.
Za tomik.
Designem już niekoniecznie bo tam mamy bardziej podział samych elementów stron
niż narzucanie tego jak powinno być ładowane implementacja.
Nasze arkusze.
No i tutaj mamy jeszcze przygotowane taką ściąga która jest swoją drogą
częścią slajdów Harry'ego Robertsa gdzie w świetlicach możemy umieszczać np.
globalne zmienne jakieś pliki konfiguracje.
Na przykład mogą być to miks do konwersji pikseli na rymy.
Generic których tutaj nie było bo
widocznie ktoś zaadaptował to na swoje potrzeby Generic i bas generalnie mogą
przechodzić na to samo też Harry Robert zrobił kilka i teraz za.
Obiekty te są kosmetyki Free leasing Pater komponenty to faktycznie postulowane
komponenty elementy interfejsu użytkownika i trampki to są jakieś.
Narzędzia pomocnicze które dany element mogą pociągnąć np.
na jedną stronę albo zmienić kolor
jest ostatnią architekturą CSS którą będę omawiał w tym kursie.
W związku z czym chciałbym troszkę podsumować jak podchodzić do architektury.
Architektura nie da nam gotowych rozwiązań i zawsze będziemy znajdować jakieś
przypadki gdzie nie będziemy pewni w którym miejscu coś się ułożyć czy nie dać
jakiegoś haka aby osiągnąć efekt który musimy otrzymać.
W związku z czym architektura będzie ewoluować z biegiem czasu i nie ma
najmniejszego problemu aby te wszystkie architektury się przenikają.
Ważne jest aby w jednym projekcie mieć
ustalone zasady pracy i sprawić aby wszyscy deweloperzy w danym
zespole do tych zasad się stosowali w kolejnej lekcji.
Opowiem o użytecznych klasach czyli po prostu tej windzie.