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ę w drugiej części wprowadzenia do kursu flexbox
od podstaw i w tym krótkim video opowiem troszkę o
przykładach na których będziemy pracowali w tym danym kursie w tym momencie korzystam
edytora brackets natomiast nie ma to znaczenia z jakiego ty edytora będziesz
docelowo korzystał ja korzystam z brackets'a a potrzeby kursu ponieważ
posiada bardzo przyjemny live preview i wszystkie zmiany które będziemy wpisywali
do naszego markup'u bądź naszych styli będą od razu aplikowane
w podglądzie po prawej stronie ekranu przykłady będą opierały się na strukturze kart
każda z tych kart będzie miała w sobie spana
o klasie card number jak widzisz tutaj w markup'ie faktycznie nie mamy
wypisanych numerów kart one są automatycznie generowane za pomocą
css counters i w pliku base kropka css znajdziesz
wszystkie deklaracje styli które sprawiają że przykład po prawej wygląda w ten sposób
a nie inaczej załadowałem też do naszego przykładu troszkę javascriptu
który ułatwi nam wizualizacje tego jak
flexbox w danym przypadku układa elementy na
stronie jeśli masz jakiekolwiek pytania nie bój się zadawać ich bezpośrednio w
komentarzu pod filmem a ja tymczasem nie przedłużam do usłyszenia w kolejnej lekcji
gdzie faktycznie zaczniemy już przerabiać flexboxa