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 stylowe podkreślenie czyli czymś co możemy
zrobić już w HTML u i chce się od niemal samego początku tak naprawdę podkreślenia
są jednym z fundamentalnych rzeczy w sieci bo wszystkie odnośniki były domyślnie
podkreślone żeby wskazywać że dany tekst jest interaktywny i może przenieść nas na
inny dokument na dowolnym elemencie html owym jesteśmy w
stanie ustalić tekst jako rejon Andre line aby ustawić podkreślenie danego elementu
czego nie mogliśmy zrobić w CSS przez ostatnie kilka lat to zmienić np.
koloru podkreślenia czyli jeśli zmieniliśmy kolor tekstu powiedzmy na.
RP.
To wygląda praktycznie jak klasyczne linki HTML.
No to faktycznie zmienia się cały tekst
razem z podkreśleniem nie było tu takiego rozwiązania albo jeśli chcieliśmy dać inny
styl podkreślenia też nie było to możliwe albo grubość.
To są nowe właściwości których możemy używać w CSS aby to osiągnąć czyli np.
mamy do dyspozycji tekst rejon.
Still jesteśmy w stanie dać np.
tutaj WiFi czyli taki faulowany.
No i mamy tutaj takie podkreślanie które często kojarzy nam się np.
z błędnym tekstem.
I możemy też to konkretne podkreślanie
oczywiście zmienić mu styl na różne inne wartości tutaj jest cała lista.
Jest to podobne generalnie do Portera i
też kiedyś orderem próbowaliśmy tego typu podkreślenia robić.
Próbowaliśmy też robić je za pomocą
boksera dołu natomiast mamy teraz do tego dedykowaną właściwość.
Więc jeżeli wrócimy do ławki.
Ja korzystam tutaj znowu z Firefoxa bo Firefox ma najlepsze dlatego wsparcie.
Jakby dalej omawiamy CSS.
Lat 20 21 wieku więc to są dalej dosyć nowe rzeczy i mogą nie być świetnie
wspierane ale jeśli zmienimy teksty Kordian.
Kolor. No to jesteśmy w stanie np.
zrobić tutaj czerwony.
I faktycznie będzie to wyglądało tak jakby ten element jest niepoprawny tekst.
Co można zrobić jeszcze to można zmienić grubość tego podrobienia tekst dekoracje
czyli grubość.
No i tutaj możemy podać wartość w ramach piksela jak kto woli.
Powiedzmy że mamy tutaj 10 pikseli
zapisane i faktycznie dla akurat wygląda to dziwnie bo to się
nam skanuje w ten sposób że to jest pojedyncza walka.
Więc jeśli zmienimy sobie z powrotem na Solid napiszemy.
No to mamy faktycznie taką linię po prostu grupą.
Ale takie klasyczne podkreślanie tych właściwości jest naprawdę sporo.
Firefox starał się dać deweloperom w końcu
kontrolę nad rzeczami powiązanymi z tekstem.
No bo jeśli mielibyśmy tutaj sobie jakiś
pełny paragraf powiedzmy że samym sobie tutaj są w kodzie możemy sobie wpisywać.
I faktycznie za pomocą trzeba podpowiadać
cały tekst i dzięki temu mieć jakiś tekst do dopasowania naszych
jeśli sobie zmienimy to z panem bo pan jest elementem liniowym
i liniowym a nie tak jak blokował.
I tutaj jeszcze raz piszemy kolorem
piszemy no to ten tekst nam się tutaj podkreśli i będzie wyglądał jak część
całości którą możemy sobie też oczywiście wyrównać Elaine.
Tekst Elaine.
Będzie to wyrównany do lewej strony tak jakbyśmy faktycznie czytali ten tekst.
Jeśli pozbędziemy się tego wykresu ustawiony na ławie.
No to faktycznie widać jakby tutaj był
błąd w naszym tekście więc jesteśmy w stanie stymulować pojedyncze elementy
tak aby użytkownik wiedział że coś jest nie tak z tym tekstem.
Np. jeśli tworzymy jakiś edytor stron WWW.
Bądź mamy załadowany skrypt do wykrywania literek w systemie zarządzania treścią.
No to możemy użyć takich nowych właściwości CSS aby to zrobić zamiast
malować to dynamicznie albo jakimś Belgrad i mieczem.
Albo innymi atakami CSS nowymi więc tekst dekoracje dostał naprawdę
dobrego gustu w kontekście ilości oficerów i możliwości które możemy robić.
Co prawda na razie na Firefoxa ale być może inne przeglądarki też łapią temat.
No i po prostu polecam śledzić TUTAJ kraju za.
W kwestii tego kiedy to będzie faktycznie
możliwe na każdej przeglądarce jeśli oczywiście do tego dojdzie.