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 w kolejnej lekcji z kursu flexbox od
podstaw i zaczynamy kodować w sekcji wideo w naszym fake
youtubie mamy już sekcje nawigacyjną całej naszej witryny mamy cały
header naszej witryny czyli tą sekcje no i teraz jako
że to jest główna treść która znajduje się na tej witrynie stworzymy
znacznik main o klasie video section
i to video section też będzie miało wewnątrz siebie znacznik
nav ponieważ mamy tutaj jakieś elementy nawigacyjne powiązane
z tą główną treścią z tą sekcją konkretną czyli
stworzymy nav o klasie video section nav
i
wewnątrz niego stworzymy odpowiednie elementy formularza już
nie będziemy tego zamykali w znacznik form oczywiście moglibyśmy natomiast
dla uproszczenia stworzymy po prostu odpowiednie znaczniki select
o nazwie video
filter powiedzmy każdy z tych
selectów będzie miał oczywiście odpowiednie opcje zobaczymy jakie tutaj można
mieć opcje wszystkie filmy przesłane filmy transmisje na żywo będziemy pisali po angielsku
czyli tutaj wpiszemy all videos value
all tutaj zrobimy
kolejny input uploaded powiedzmy
uploaded videos i
live videos teraz
tak naprawdę w tym momencie ten element przesłane
filmy nie jest częścią tego select boxa
oczywiście mógłby być wartością domyślną dla select boxa jako osobny option natomiast
my to zrobimy jako znacznik label i to będzie label for video
section filter i taki
sam atrybut będziemy musieli ustawić na faktycznym znaczniku
select pod jego id tylko tutaj jeszcze damy send
videos uploaded żeby było wspólnie
razem z tym co tutaj wpisaliśmy no i oczywiście
musimy wpisać tutaj tego id równego
dla tego atrybutu for w label'u no i ustawimy
taką samą nazwę klasy żeby po prostu było wygodniej to stylować no
i video section i
klasę video section label też możemy nadać na tym elemencie żeby po prostu łatwiej
było go stylować więc to jest pierwsza część naszego
markup'u jak przeskoczymy sobie na nasz layout no to wygląda to w tym momencie tak
no i idąc dalej tworzymy
kolejne elementy nawigacyjne czyli w tym
momencie będzie to button o klasie video section
play all powiedzmy no i jego
nazwa to też będzie play all i trzecim elementem może
być tak naprawdę skopiowany ten select który już stworzyliśmy razem
z label'em tylko zmienimy mu id
na video section sort tak
samo video section sort na atrybucie for no
klasę też aktualizujemy razem z nazwą tego selecta
zobaczmy jakie może mieć wartości najpopularniejsze
data dodania data dodania czyli most popular
to będzie wartość pierwszego entry
most popular drugą wartością
będzie added desc time
added descending i added
asc jako time added
ascending okej
oczywiście nie wygląda to w tym momencie dobrze natomiast
semantycznie jest całkiem poprawne moglibyśmy oczywiście te wszystkie elementy
wewnątrz listy nawigacyjnej również zamknąć w ul
i li ale już aż tak nie będziemy tego komplikowali i
kolejną rzeczą którą musimy zrobić to faktycznie pojedyncze thumbnail'e
pojedyncze opisy konkretnego wideo czyli
pod tym nav'em stworzymy już ul o klasie video section
list każda ul musi mieć jako
bezpośrednie dziecko li czyli nadamy klasę video
section powiedzmy po prostu
video i jako że cała ta sekcja
jest klikalna no to zamkniemy to w link na
dole na razie damy kotwiczkę te linki oczywiście powinniśmy
uaktualnić gdyby to był faktyczny serwis ale zrobimy
href o klasie video
section link albo
video link tak będzie troszkę bardziej szczególnie
nie będzie to taka ogólna klasa no i wewnątrz tego elementu encore
tworzymy kolejno diva o klasie video
section thumbnail i to będzie ten
element naszej strony docelowej no i wewnątrz niego musimy
stworzyć przynajmniej dwa batony ten dodaj do obejrzenia i
czas trwania naszego video czyli tworzymy button class video
section watch later i
od razu możemy tutaj dać fas fa clock no
i jakiegoś spana o klasie video section total
time na przykład i tutaj wpiszemy jakąś tam na
sztywno wartość 12 33 i
to jest już koniec tej sekcji thumbnail'owej pod
thumbnail'em mamy nazwę wideo możemy to zrobić jako h4 ponieważ
h1 to jest z reguły nazwa strony powiedzmy że h2 to jest nazwa
kanału h3 to może być sekcja tutaj tego nie widać ale powiedzmy że może
być sekcja więc h4 to byłaby nazwa konkretnego
video w tym linku czyli h4 to jest class video
section video name powiedzmy
css flexbox course
albo tutorial
no
i tu już poniżej moglibyśmy no zostawimy to w spanie class
video section details
i wpiszemy 6.9k views
powiedzmy two years ago i
ostatnie to będą te badge czyli w tym przypadku że dane wideo jest
na przykład w hd albo ma napisy więc zrobimy span class video
section badge i tutaj wpiszemy
cc jak closed captions czyli po prostu napisy wewnątrz
filmów i teraz jak wygląda nasza strona oczywiście
bez css nie wygląda to najlepiej natomiast semantycznie
jest na pewno czytelne i dla czytników i później
dla innych programów które będą korzystały z tej strony a też z
ostylowaniem tego przy pomocy flexboxa nie będziemy mieć problemu jeszcze tylko
dodajmy ten button tutaj który się pokazuje na hoverze
prawdopodobnie z dodatkowymi opcjami dotyczącymi
video więc umieścimy to obok tej h4
jeszcze albo wewnątrz tej h4 powiedzmy jako button
class video section more
details nie jestem pewien czy to powinno
być wewnątrz tej h4 ale żeby nie dodawać już kolejnych elementów w naszym markup'ie
zamkniemy to tutaj i możemy przejść do faktycznego stylowania
naszej strony później po prostu przekopiujemy
sobie treść tych li
i będziemy mieli tyle video ile potrzebujemy na naszej stronie