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 ostatniej już lekcji z kursu flexbox
od podstaw i tym razem chciałem ci przybliżyć kilka
źródeł z których możesz korzystać jeśli chciałbyś dalej
rozwijać się w kontakcie flexboxa jednym dobrym miejscem gdzie możesz poćwiczyć
swoją znajomość flexboxa jest strona flexbox froggy jest to rodzaj minigry
w przeglądarce gdzie musisz ustawiać czapki
na odpowiednie lilie wodne przy użyciu właściwości powiązanych
z flexboxem kolejną stroną która jest niezwykle przydatna jest strona flexbugs
jest to po prostu repository na github'ie i tam znajdziesz różne
błędy przeglądarek w większości starszych przeglądarek w odniesieniu
do flexboxa czyli jeśli będziesz miał sytuację że na
starym internet explorerze niestety twój konkretny
layout nie układa się dobrze ponieważ ta przeglądarka ma
błąd w implementacji flexboxa i po prostu to nie działa to znajdziesz tam
różne obejścia i haki jak sprawić żeby layout
wyglądał w porządku i jednocześnie nie psuł stron
dla przeglądarek które dobrze tego flexa wspierają inną stroną która może ci
się przydać jest strona solved by flexbox i przedstawia ona problemy
które flexbox rozwiązuje w bardzo trywialny sposób a które wcześniej
były bardzo trudne do implementacji przy tworzeniu stron www
po pierwsze jest to dobre źródło historyczne żeby po prostu wiedzieć jak
przeglądarki kiedyś działały i jak bardzo flexbox ułatwił tworzenie
stron www oczywiście w efekcie wizualnym ale też jeśli będziesz
musiał bądź będziesz musiała wspierać przeglądarki
które zupełnie nie rozumieją flexboxa to tam znajdziesz starsze
rozwiązania jak dany efekt osiągnąć poza tym zostawie też
dużo linków ogólnie powiązanych z flexboxem czyli jak tworzyć
jakieś konkretne layout'y jakie problemy flexbox tworzy w kontakcie
dostępności czy linki do polyfill'i bądź
autoprefiksera oczywiście śmiało też zadawajcie pytania w
odniesieniu do kursu w odpowiedniej sekcji komentarzy na portalu bądź
możecie do mnie twitnąć na twitterze znajdziecie mnie pod nickiem wopolow
bądź na stronie youtube projektu koduje pl
a tymczasem to już wszystko mówił do wojciech połowniak z eduweb.pl
trzymajcie się i do usłyszenia