od Podstaw
4 godz. 7 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerFlexbox nie jest trudny - pod warunkiem, że rozumiemy dlaczego elementy renderują się w konkretny sposób. Do tego potrzebna jest szczegółowa wiedza o osiach flexboxa, o tym jak ustalane są ich kierunki i jak elementy będą układać się wzdłuż nich.Dopiero wtedy dobrze można zrozumieć jak działa rozszerzanie i kurczenie elementów, jak elementy będą zachowywać się przy zmianie rozmiaru okna przeglądarki czy przy przełączaniu wyświetlania z układu wierszy na kolumnowy. To wszystko oraz kilka innych mechanizmów ukrytych we Flexboxie znajdziesz dokładnie wyjaśnione w tym kursie - podgląd przykładów czy dodatkowe quizy po zakończeniu kursu pomogą w utrwaleniu zdobytej wiedzy.
Wielu developerów nie jest świadomych, że korzystanie z niektórych właściwości Flexboxa wpływa na dostępność naszych stron WWW - dostosowywanie naszych witryn pod czytniki ekranowe oraz użytkowników korzystających z witryn w sposób niestandardowy to temat który zyskuje na coraz większej popularności (zwłaszcza, jeśli planujesz kiedyś tworzyć strony rządowe - te są zobligowane do tworzenia stron dostępnych dla osób niepełnosprawnych).W tym kursie, dowiesz się jakie problemy może nieść za sobą używanie flexboxa i jak ich unikać.
Kurs ten jest dla wszystkich osób, które dobrze czują się z CSS - wystarczy podstawowa umiejętność pisania selektorów. Nie ma żadnych wymagań dotyczących JavaScript, czy znajomości konkretnych frameworków. Natomiast jeśli do tej pory korzystałeś/aś z innych, starszych technologii do pozycjonowania elementów i chcesz nauczyć się prostszej, dobrze wspieranej współczesnej technologii - nie trać czasu! Flexbox to idealne wprowadzenie do kolejnych sposobów pozycjonowania jak np. CSS Grid.
Cześć witam cię bardzo serdecznie w kolejnej lekcji z kursu flexbox
od podstaw i teraz będziemy zajmowali się tą sekcją gdzie
faktycznie znajdują się wideo na naszym kanale
w chwili obecnej nasz fake youtube
wygląda w ten sposób i
docelowo powinien wyglądać mniej więcej tak jak zwykle
zaczniemy od tworzenia markup'u ale zanim do tego przejdziemy
zobaczymy jak tak naprawdę oryginalny
youtube się zachowuje żebyśmy mogli stworzyć odpowiedni do
niego markup czyli jak widać tutaj mamy jakąś sekcję nawigacyjną
gdzie możemy filtrować elementy tak aby
pokazywały się wszystkie filmy albo tylko te nagrane na żywo możemy
odtworzyć wszystkie filmy jeden pod drugim możemy je również
posortować zaczynając od najpopularniejszych
bądź w odniesieniu do daty ich dodania dalej
mamy całą listę różnych wideo które są udostępnione
na danym kanale cała sekcja pojedynczego wideo jest klikalna
czyli możemy założyć że jest linkiem tutaj jest thumbnail tego wideo on ma
na sobie jakiś button oraz czas trwania
tego konkretnego wideo mamy tutaj jakieś dodatkowe buttony nazwę
wideo dodatkowe informacje i jakieś dodatkowe badge i
ten cały markup będziemy oczywiście musieli przemnożyć razy ilość wideo które chcemy zasymulować
na naszym fake youtubie tutaj widać że nasz
layout troszkę się różni
na tym breakpoint'cie względem oryginalnego tego typu drobne
poprawki będziemy wprowadzali na samym
końcu no i oczywiście różne feature'y dodatkowe pokroju ustawianie
sticky na tym głównym elemencie
nawigacyjnym przy przescrollowaniu naszego kanału tak że normalnie
wyjechałby poza viewport też będziemy się zajmować w późniejszym czasie więc
to tyle słowem wprowadzenia zapraszam do następnej lekcji gdzie faktycznie będziemy tworzyli
wspomniany wcześniej markup