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 części
z kursu flexbox od podstaw w poprzedniej
lekcji skończyliśmy kodować menu górne naszej
kopii youtube i w tym odcinku będziemy faktycznie
kodować część związaną z nagłówkiem nagłówkiem
czyli ja rozumiem nagłówek tutaj jako tą sekcje hero section ten
avatar nazwę kanału
liczbę subskrypcji button do subskrypcji ikonkę dzwoneczka
tą listę z pojedynczymi podstronami które dotyczą tego
konkretnego kanału no i tutaj są jeszcze strzałki nawigacyjne
które pozwalają się po tej liście nawigować je też
również stworzymy w markup'ie natomiast ich funkcjonalności
czyli faktycznego przesuwania tych elementów już kodować nie będziemy czyli
zaczynamy jak zawsze od stworzenia odpowiedniego markup'u
czyli tutaj zwiniemy tą
nawigację którą stworzyliśmy poprzednio i tworzymy nowy znacznik jest to header
ponieważ jest to nagłówek naszej strony nadamy mu klasę channel
header i wewnętrz niego znajdzie
się kolejno powiedzmy że obrazek któremu
za chwilę wstawimy jakiś source klasę będzie miał
channel header hero następnie
stworzymy tą sekcje czyli
najpierw stworzymy avatar powiedzmy że zamkniemy
sobie to w channel header
wrapper i teraz stworzymy img
src znowu puste channel header avatar
następnie
tworzymy sobie spana o klasie channel header
name i to będzie nazwa naszego
kanału czyli powiedzmy my channel w tym momencie możemy
zmienić ten wrapper na channel header details tak naprawdę
bo będziemy zamykać tutaj te szczegóły dotyczące danego kanału
następnie robimy
span o klasie channel
header subscount powiedzmy
bo to jest liczba subskrypcji danego kanału od razu tu wpiszemy
12 706 subscriptions
już będziemy pisać po angielsku jak zaczęliśmy i w sumie tu
by mógł być przydatny ten wrapper ponieważ potrzebujemy te elementy ułożyć
jeden pod drugim moglibyśmy to zrobić br'em natomiast nie
wiem czy to jest semantycznie poprawne więc zrobimy tutaj ten wrapper div
class channel header wrapper i
tego div'a zamykamy tutaj czyli wewnątrz
channel header wrapper znajduje się channel header name
i channel header subscount i dalej lecimy
tworząc button o klasie header
channel header subscribe
i tutaj
sobie wpiszemy subscribed jako
że tutaj już jest zasubskrybowany ten kanał i wpiszemy no
po prostu 12000 ostatnim
elementem będzie span w sumie tak naprawdę mógłby być to button
zrobimy to jako button o klasie channel
header subs albo
po prostu channel header bell i tutaj damy od razu ikonkę
fa fa bell
zamkniemy to
zobaczmy jak wygląda nasz markup jest ikonka dobra
wracamy skończyliśmy sekcje tą
tutaj szczegółów dotyczących danego kanału więc
możemy poza ten channel details
zrobić jeszcze sekcję nawigacją wewnątrz headera oczywiście
możemy zrobić nawigację i zrobimy tutaj channel header
nav no i w tym nav'ie będą na
początku samym te strzałki nawigacyjne które przesuwają nam element
więc wpiszemy tutaj button class channel header
powiedzmy slide button nazywamy
go ze względu na przeznaczenie a nie to jak faktycznie wygląda i
zrobimy dwa takie buttony no
i dodamy im jeszcze klasę channel header prev
i channel header next żeby
móc je rozróżnić tak na zaś później w css
i teraz pomiędzy między nimi tworzymy listę nawigacją nienumerowaną
o klasie channel header powiedzmy
tabs wewnątrz ul jednymi
poprawnymi dziećmi są li czyli tworzymy tutaj li
o klasie channel header tab już
już w formie pojedynczej i każdy pojedynczy li
będzie miał w sobie odnośnik a href zostawimy
w tym momencie puste o klasie channel
header link no i po kolei będziemy tu
wpisywać tą treść czyli już będziemy tłumaczyć main tutaj
poprawimy wcięcia video znowu
wcięcie no niestety brackets miewa z tym czasami lekkie problemy zwłaszcza
jak mamy taki wąski ekran playlists community
channels
okej to wpiszemy jeszcze tylko te channels
i ostatnim elementem tej
listy jest jakaś szukajka więc no
zostawimy to jako button więc tutaj
zrobimy button class channel
header search no
i tutaj damy fas fa search
dobra zobaczymy jak to wygląda więc ten markup jest już gotowy
oczywiście teraz będziemy musieli całą warstwę css
do tego napisać natomiast to zrobimy już kolejnej
lekcji z tego kursu