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 opowiem o smak się czyli akronim ie który rozwijamy jako
skalę laur Architecture for CSS i generalnie Maksa dzielimy na.
Pięć takich kategorii jest to pas.
Aut.
Moczu.
Stad.
Oraz film i te pięć kategorii
pozwala nam układać nasz kod CSS w taki sposób aby był on dla nas zrozumiały i np.
w bazie powinniśmy dawać takie style globalne które sterują np.
baby które robią nam jakieś recepty w Jałcie.
Powinniśmy umieszczać wszystkie style
powiązane ze strukturą tak jak w Object orientację np.
style powiązane z szeroko siłami wysoko
ścianami metodą pozycjonowania umieszczamy w sekcji struktur.
No to tutaj możemy umieścić je w kategorii out full.
Jest to analogicznie do Bema czy do Atomic Dina komponent czyli np.
nasza karta jest w tym momencie modułem i
style dla tej karty powinny znajdować się w sekcji modułów
sekcja Street czyli sekcja stanu powinna przechowywać różne warianty
modułów w zależności od tego jaki jest ich stan czyli np.
jeżeli byśmy dodali do biznes is active.
Które na przykład byłoby aktywowane za
pomocą Java skryptu no to możemy dodać sobie jakąś regułę typu.
Business Card.
Is active no i tutaj nadać jej np.
inny b Ground albo jakiś Drop Shadow
albo na przykład oprócz możemy na potrzeby tego przykładu ustawić opaski na pół.
No i faktycznie domyślnie ono będzie
tutaj nam na sztywno przezroczyste ponieważ ustaliliśmy tą klasę nie
dynamicznie a w HTML u ale jeżeli robiliśmy to przez JavaScript to style
powiązane z IS Active powinny iść do sekcji stanu.
No i ostatnie motywy czyli filmy
to są tak naprawdę modyfikacje gry które
znamy z Bema i powinny one reprezentować różne wartości czyli np.
ten styl Darek dla biznes Kardaś on jest
dobrym przykładem motywu bo on tak naprawdę nie zmienia całej struktury
naszej karty tylko sprawia że karta wygląda w inny sposób.
Dlatego jest to motyw no i możemy to szybko spróbować sobie zrobić.
Czyli jeśli stworzymy sobie odpowiednio pliki baz kropka CSS.
A tutaj już taki plik nawet mamy.
No to po prostu zmienimy jego przeznaczenie.
Leja od kropka CSS to następny plik.
Dodajmy stawce FS.
Następnie.
CSS oraz firmy CSS.
Nie jestem pewien czy to wszystkie wydaje mi się że któryś pominął.
Zobaczmy.
Nie dodałem lay out jest cool jest bas jest.
Tak zgadza się mamy wszystkie
więc możemy usunąć sobie ten kod stąd i faktycznie po prostu przenosić logikę
naszych plików pomiędzy odpowiednimi nazwami czyli jeśli tutaj sobie
pracowaliśmy baza no to później zainwestujemy tj.
zgodnie z tą metodologią.
Następnie zainwestujemy moduły następnie.
Stany a następnie.
Films.
Jeśli modyfikuje tego baza tutaj widzimy że akurat ten tekst jest naprawdę dobry bo
faktycznie stylu tylko i wyłącznie rzeczy ogólne nie ma tutaj żadnych
sektorów konkretnych więc zostawmy go tak jak jest dole YouTube.
Na pewno możemy przenieść to na przykład
można przenieść do baza i połączyć te dwie reguły ze sobą.
To od razu zróbmy póki pamiętamy.
Zapisujemy.
Dodać tutaj.
Space i tak to będą modyfikacje tory to do tego dojdziemy.
Najpierw sama struktura leja u nas akurat
na stronie nie ma jako takiego leja globalnego.
W związku z czym być może ta reguła którą
sobie tutaj umieściliśmy mogłaby być przeniesiona do sekcji Out
i albo zamieścić to w Buddy albo zrobić po prostu tutaj kontener.
I chyba tak zrobimy że po prostu stworzymy dodatkową otoczkę.
W postaci kontenera Class kontener.
No i jak zginiemy ten kod możemy go całego przenieść.
Tutaj zapisujemy
i faktycznie teraz klejnot nam się układa w osobnym pliku leja kropka CSS.
Możemy tutaj odpalić buty i fałszowanie naszego pliku.
No i lecimy dalej.
Moduł czyli komponenty to nasza Business
Card musi zostać przeniesiona razem ze wszystkimi elementami Bema czyli
zarówno ten tekst jak i tutaj to logo też powinniśmy tam przenieść.
Prawdopodobnie te style też tam możemy przenieść.
Jeśli więc wchodzimy do modułów i tutaj warto nadmienić że to niekoniecznie muszą
być pojedyncze pliki to mogłyby być pojedyncze katalogi.
I do każdego z tych katalogów mielibyśmy
kilka plików które reprezentowały różne komponenty.
Nie ma z tym najmniejszego problemu.
Ja tutaj po prostu robię uproszczoną
wersję tego maksa aby zaprezentować jak tego można faktycznie używać.
Generalnie chodzi tutaj tylko i wyłącznie o organizację kodu.
Nie jest to żadna właściwość CSS której należy używać a jedynie.
Sposób myślenia dostosowany do tego aby
szkole był skalą realny i następnie przeniesiemy firmę do
kategorii film czyli wszystkie nasze modyfikacje zostały przeniesione.
No i business card is active którego tak naprawdę u nas w kodzie za bardzo nie ma.
Ale ogólnie.
Być może w całej aplikacji byłoby potrzebne.
To może być tam co prawda ten z that is active.
Można byłoby podpiąć od tego biznes karta
i być może każdy element który miałby tę konkretną klasę mógłby być przezroczysty.
To jest oczywiście kwestia implementacji
danej strony ale tutaj warto pomyśleć czy na pewno w odpowiednim pliku czy.
W odpowiednim miejscu umieszczamy nasze
bloki kodu i dzięki temu nasz kod jest o wiele czystsze.
Ponieważ nie mamy tutaj.
Linowych Styrii zawartych w znaczników
staje tylko importuje sobie wszystkie pliki zgodnie z ich przeznaczeniem czyli
najpierw ładuje te najbardziej genetyczne potem leje out czyli strukturę
pojedyncze komponenty stany oraz motywy które teoretycznie jeżeli mają taką samą
specyficzną sieć powinny mieć pierwszeństwo nad poprzednimi rzeczami.
I tak wygląda max.
I tak jak już wspomniałem nie mam najmniejszego problemu żeby
korzystać ze Maksa z innymi metodą lekami CSS
i dostosowywania tego do własnych potrzeb.
To jest narzędzie z którego w.
Wybieracie aby korzystać i ono ma wam upraszcza tworzenie stron internetowych.