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 o CSS czyli o
CSS.
Załóżmy że chcemy stworzyć stronę
internetową na której będą różne flagi flagi które stworzymy w samym CSS.
No i załóżmy że pierwsza nasza flaga powiedzmy że będzie to flaga
Włoch no to będzie miała klasę flagę i tę bo to jest trykot dla Włoch w tym.
Notacji dwóch liter owej i ustawiamy sobie display na Greena i ustawiamy GRID.
Templeton kolos na.
Rapid 3 1 Far tak aby
dowolne elementy które tutaj wystawimy to będą tak naprawdę nasze trzy kolory.
Możemy sobie je ustawić w ten sposób były
ustawione pionowo jeden obok drugiego no i oczywiście musimy jakieś tutaj rozmiary
tego elementu UPS ustawić czyli cofniemy tutaj i ustawiamy na powiedzmy 20.
I Bet Ground.
Na domyślnie biały żebyśmy tylko widzieli Xboksa hejt powiedzmy na 10.
I faktycznie jest nasza flaga.
Oczywiście flagi mają odpowiednie aspekty.
Generalnie jest to 4 3.
Więc możemy sobie tutaj zapisać Custom Properties S.A.
i zapisać 20 Romów.
I teraz dynamicznie tego chyba policzyć za
pomocą funkcji ulg jesteśmy w stanie pomnożyć sobie po prostu
trzy czwarte ponieważ to jest ta krótsza ściana flagi.
Razy tą zmienną którą znamy czyli
i za pomocą Custom Properties sobie do tego się dobierane.
Usuwamy to.
No i widzimy że to nam się tutaj nie aplikację więc spróbujmy.
Może na razie podać tutaj te 20 rozmów
z jakiegoś powodu to się nie dzieje zobaczmy 3 na 4 to jest.
275 i razy 20 to 15 kremów dosyć proste obliczenie ale wolałem to uruchomić.
Będę.
Ich chód na 15 też.
Aha no bo oczywiście nie ustawiła UEFA a więc tutaj musimy użyć tego wiarę.
Wcześniej możemy tak naprawdę przywrócić
tam to co sobie napisaliśmy czyli kalkulację.
Trzy czwarte to jest aspekt.
Crazy War.
Jak piszemy to faktycznie będziemy mieli rozmiar tej flagi.
Możemy ją troszkę oczywiście zmniejszyć.
No i jakiś margines dolne.
Powiedzmy pół między każdą z tych flag.
Gdy piszemy sobie ten kolor no to
oczywiście musimy dodać pojedyncze elementy czyli jeżeli zrobimy flagę.
I t d
n w.
1.
No i ustawiamy.
Beck und.
Na zielony.
Oczywiście powinniśmy tutaj wziąć odpowiednie kolory ale na potrzeby tego
uproszczenia weźmiemy takie jak nam podpowiada CSS i.
Poza pisaniu.
Faktycznie widzimy że
nasza flaga będzie wyglądała tak jak tego oczekujemy no bo ustaliliśmy że każda
kolejna kolumna w tym kontenerze będzie miała inny kolor.
I robimy to za pomocą pseudo klas pobierających kolejne elementy tej flagi.
Jeżeli byśmy chcieli stworzyć kolejną flagę.
Powiedzmy.
Tym razem Francji.
No to możemy sobie jeszcze raz skopiować.
I po prostu.
Zmienić tutaj wartość na.
No i oczywiście nie jest to optymalne rozwiązanie.
Oczywiście.
Te elementy powinny nam się oba wyświetlić.
Zastanawiam się czemu bo nie zmieniałem oczywiście tutaj Styrii.
Dla.
Tej klasy więc teraz mamy dwie klasy które będą stosowały te dwie flagi.
No i oczywiście jest tutaj bardzo dużo punktów wspólnych
i obrońcy orientację stara się wydzielić te części wspólne do osobnych klas
i generalnie wprowadza podział na strukturę i skórki czyli struktura to są
wszystkie te style które opisują jak duży jest element czyli np.
to że zadeklarowali że szerokość i ten element mają 10 rozmów
wysokości ma trzy czwarte tejże szerokości no i jest tutaj jakiś podział na kolumny
to co możemy wyciągnąć do osobnej klasy i powiedzmy że stworzymy sobie flagę.
Szkolną
która będzie trzymała faktycznie tę definicję.
Tak naprawdę możemy wrzucić zupełnie na
body bo to jest coś czego używamy wszędzie czyli tutaj piszemy sobie flag.
No i to powinniśmy w całym projekcie teraz sobie wpisać żeby nie było problemu flag
zapisujemy dalej powinno wyglądać tak jak wygląda super.
No i możemy przenieść te style
odpowiadające za play out do flag Weronika czyli mijamy ten The Grand.
W nosimy tylko te elementy które dotykają naszego Banking Box a do flag wersji.
No i oczywiście bądź niestety musimy to aplikować do samego elementu HTML czyli
flag w wersji KL zapisujemy tutaj oczywiście też.
I tym samym jesteśmy w stanie pozbyć się
większości tutaj tej logiki która doszła nam do publikowania flagi Francji.
Możemy zachować tak naprawdę ten
kolor domyślny.
Szary też docelowo pozbędziemy i tak naprawdę zostały tylko jakieś tam style
odnoszące się do koloru i dzięki temu tak naprawdę mamy już podział na.
Strukturę i skórki.
Ponieważ pierwsza klasa opisuje strukturę a druga klasa opisuje skórkę.
Jeśli stworzyli byśmy sobie więcej takich flag powiedzmy tym razem flag chory
zostal.
I powiedzmy że to będzie flaga Polski.
Stworzymy sobie dwa diwy.
No to możemy adekwatnie do tego co zrobiliśmy wcześniej z flagą Weronika.
Stworzyć flag Horizon tall.
I ustawić.
Great Temple Columbus na 1.
Teraz generalnie skoro robimy
flagę poziomą to szerokość danej kolumny jest zawsze 100 proc.
i będą dwa wiersze po prostu czyli GRID Temple Rocks.
To będzie Rapid. 2.
1 fr. .
Piszemy aspekt jest takie samo więc
moglibyśmy jeszcze tak naprawdę wynieść do osobnej klasy.
Tutaj flaga.
Możemy wynieść całą tę logikę dotyczącą szerokości i wysokości do klasy wspólnej.
W tym miejscu.
I zaaplikował oczywiście.
Klasę flag.
Jesteśmy dzięki temu w stanie pozbyć się
tych deklaracji z pojedynczych elementów i oczywiście flag weryfikacji flag
horyzont ale muszą już mieć inne style bo są to inne flagi.
Tutaj nam coś się zepsuło i zastanawiam się tak naprawdę co flag.
Tutaj nie daliśmy słowa jeszcze flag bo
mieliśmy trzy flagi tak i teraz to działa tak jak powinno.
No i flaga PL.
No to możemy bardzo szybciutko to oscylować.
Flaga PL The End Child pierwszy.
To Beck Grant oczywiście biały.
I drugi element.
Czerwone.
I dzięki temu mamy dwa wiersze jedną
kolumnę o danych kolorach i w ten sposób tworzymy konkretne skórki.
Więc jeśli podróżujemy troszkę ten kod.
Tutaj możemy pozbyć się tych domniemanych.
Kolorów.
Które tworzyliśmy zanim jeszcze podzieliliśmy nasz kod na
taki sposób i tak naprawdę mamy nasze skórki.
A tu jest cała deklaracja naszej struktury
i na tym polega Object orientację aby
rozdzielać te powtarzające się części do osobnych klas.
Aplikować te klasy do HTML a i z osobnymi klasami.
To jak konkretnie wyglądają na przykład w kontekście koloru.
I tutaj obiekt zajęty jest również nie narzuca jako takich konwencji nazewnictwa.
Oczywiście możemy stworzyć jakieś własne.
To oczywiście też moglibyśmy np.
za pomocą CSS wygenerować dynamicznie
poddać po prostu listę kolorów i CSS sam by nam stworzył tę klasę ale ja
chciałem to pokazać jak to można zrobić i generalnie.
Zupełnie nie byłem nie gryzie się z innymi.
Architektura mi CSS a ogólnie wszystkie
architektury CSS a są w stanie współdziałać i tworzyć jedną wielką
architekturę dostosowaną do Waszych potrzeb i do potrzeb waszego projektu więc
Object CSS wydzielanie wspólnych fragmentów do osobnych klas aplikować ich
do HTML a podział na strukturę i skórki z minusów.
Przede wszystkim to że trzeba pamiętać o tym i tym zarządzać aplikować
te wszystkie klasy do HTML a i możemy mieć z tych klas naprawdę całkiem sporo.
No i generalnie ten zysk wydajności w
kontekście tego co jest wysyłany z przeglądarki i tak ginie przez kompresji
czy lepszy ale mamy większy ład w naszym kodzie źródłowym.