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 właściwościach paska przeglądania.
Czyli o tych barach które.
Pojawiają się gdy faktycznie przewija się nasze strony nie będziemy tu konkretnie
celować bo to jest coś co powinno zostać w konwencji.
Oczywiście można je ukryć bądź próbować celować.
Natomiast ja tego nie polecam polecam traktować to tak jak pasek przeglądarki w
związku z czym będziemy mówić o Scrolls Snap.
Line czy Scrolls margines.
Konkretnie skoro margines ten rozszerzony przykład.
Naszej strony z informacjami i
względem poprzedniego przykładu tutaj mamy jakiś nagłówek który ma pozytywne styki.
Jak tutaj sobie wpisujemy styki to widzimy że małą przestrzeń styki i.
Przykleja się do wartości zerowej w momencie kiedy zaczyna wyjeżdżać poza
moglibyśmy oczywiście dać jakiegoś jednego np.
żeby on wyglądał mniej więcej równo.
Jeżeli mamy taką potrzebę ale wtedy
będziemy mieli tutaj ten margines więc musielibyśmy dać jakiś tam
parking czy inne wartości żeby to wyglądało tak jak się tego spodziewano.
W każdym razie ja dodałem tutaj jeszcze
jeden nagłówek poziomu trzeciego i jest on widoczny tutaj i on ma identyfikator czyli
atrybut ID o nazwie Mor No i tutaj jest odnośnik do tego nagłówki
z informacją o tym że tutaj możemy dowiedzieć się więcej.
Ja zachęcam generalnie do robienia tego typu ćwiczeń
ponieważ jest to bardzo dostępne rozwiązanie i proste bo nie musimy
angażować do tego zupełnie skryptu ale generalnie z tym przykładem jest jeden
problem jeżeli faktycznie kliknięcie sobie Lechii more about as no to widzimy że
przez to że mamy tutaj pozytywne styki na naszym nagłówku no to on nam zasłania
część treści która jest jeszcze w tym Lechii more czyli oprócz tego że
zasłaniając je sam nagłówek poziomu trzeciego no to tutaj Sniper kodu czy
tekstu jest po prostu niewidoczny dla użytkownika więc jeżeli mielibyśmy tutaj
Table of content czyli po prostu spis treści i ktoś by sobie kliknąć na dany
element no to część treści mógłby nie zauważyć i po prostu ją ominąć która
mogłaby być oczywiście bardzo potrzebna w kontekście zrozumienia całego materiału.
W związku z czym jak sobie z tym radzić w przeszłości tworzono np.
różne haki w krypcie czy to margines ujemny który był dynamicznie dodawany w
zależności od tego jak zmieniła się kotwica.
Na szczęście The Future wyznał i jesteśmy w stanie taką sytuację oscylować w cs.
Bez większego problemu jeśli zobaczymy do którego elementu
przekierowanie jest równo jest to oczywiście tutaj ten element haczyk więc
jeśli sobie ustawiamy na trzy oczywiście moglibyśmy tutaj zrobić
albo bezpośredni sektor dla tego elementu albo nadać klasę.
Tak jak wspominałem najlepiej klasę bo generalnie genetyczne
sektory czy sektory pojedynkach nie są zalecane no ale powiedzmy że zostawiłem
tutaj A czy jesteśmy w stanie użyć Scrolls krol Marcin top.
No i tutaj podajemy dowolną wartość jaką
chcemy czyli możemy tutaj podać piksele Remy jako że my pracujemy przeważnie na
ramach to ustawie tutaj powiedzmy może 10 Romów napiszemy.
I teraz jak kliknąć.
No to widzimy że to faktycznie przesunęło nam ten akord gdzie jest przesłuchiwany
nasz krol ale troszkę to za dużo może dajmy tutaj
może 8 napiszemy jeszcze raz i zrobimy
kliknięcie i faktycznie teraz to działa i nie było żadnych haków żadnego skryptu w
czystym CSS jesteśmy w stanie takie sytuacje obsłużyć.
Co jeszcze możemy zrobić no to oczywiście
możemy dać skrobi Harbor czyli tak aby mieć tutaj Smooth Scrolls.
Jeżeli teoretycznie damy sobie na radę.
Scrolls i have
Smooth piszemy.
No to to nam powinno zrobić taką ładną animację.
Przejścia tylko to trzeba zawsze na dobrym
elemencie ja szczerze mówiąc nigdy nie pamiętam na którym prawdopodobnie na tym
który ma Scrolls a o HTML gdy już działa czyli faktycznie jak chcemy żeby.
Nasza treść niekoniecznie tak skakała to możemy dodać do tego jeszcze skrobi
Chajzer smooth i też nie ma konieczności tworzenia żadnych nowych rozwiązań.
Które będą nam to Scrolls przesuwamy względem czasu no nie jest to generalnie
dobre dla performance ani dla użytkowników.
I co jest też ciekawe.
Tak jak wspomniałem w poprzednich lekcjach jesteśmy w stanie to np.
skrobi Haber wyłączyć.
Jeśli użytkownik preferuje mieć
gust maszyn co pokazywane w lekcji w lekcji pierwszej tego działo
no i oczywiście mamy też właściwości które pozwalają nam ściągać jakby z w zależności
od tego jak spróbujemy do podanej marginalne wartości co się przydaje jeśli
chcemy robić takie pełną ekran nowe nawigacje np.
naszych Light Landing targach
i generalnie tutaj jest taki bardzo fajny artykuł na stronie X.
Który tłumaczy jak działa Scrolls czy Scrolls Online.
Co do wsparcia przeglądarek w kontekście
tych właściwości to oczywiście możemy zobaczyć z Kroll Jawor.
Jest całkiem nieźle wspierane.
Oczywiście jeżeli zależy nam na Internet
Explorer no to tutaj nie użyjemy tej właściwości ale
wydaje mi się że wtedy negatywne skoki będą naprawdę dobre.
Internet Explorer nie jest już oficjalnie wspierany ale na pewno nie będzie w
przyszłym roku w związku z odejściem Microsoftu od
wsparcia dla Office 365 dla tej przeglądarki.
Możemy też sprawdzić oczywiście Scrolls nap Elaine.
Faktycznie tutaj Global też jest nawet
lepszy niż dla skrobi Chajzer i krol Marcin.
TOP.
Którego użyłem aby naprawić ten konkretny problem.
Z nagłówków zasłaniając treść do której się przez trenowaliśmy
i generalnie wsparcie przeglądarek jest
naprawdę dobre ja polecam korzystać z tych właściwości
i zachęcać waszych klientów do tego aby nie wspierać przeglądarek które faktycznie
ich nie rozumieją bo jest to złe z poziomu user experience i wydajności co też
oczywiście przekłada się na rewanżu czyli po prostu zarobki danej firmy.