0:00 / 0:00

Flexbox: Wprowadzenie do tworzenia własnego YouTube

od Podstaw

4 godz. 7 min · HTML i CSS · Full-stack i Programowanie

Wojciech PołowniakSr. Fullstack Engineer

Czego się nauczysz

Omówienie podstaw pracy z flexboxem
Pojęcie osi i kierunków
Różne sposoby renderowania treści
Kurczenie i rozszerzanie się elementów
Wsparcie między przeglądarkami
Przedstawienie problemów z dostępnością
Dodatkowe materiały do poszerzania swojej wiedzy

Szczegółowo opisana mechanika działania flexboxa

Flexbox 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.

Problemy z dostępnością

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ć.

Dla kogo jest ten kurs?

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.

0:00Cześć witam cię bardzo serdecznie w części praktycznej kursu flexbox

0:04od podstaw i przez kilka najbliższych lekcji będziemy

0:08ćwiczyli faktycznie używanie flexboxa tak jakbyśmy pisali faktyczną

0:13stronę www i na potrzeby tego ćwiczenia będziemy po prostu odwzorowywać

0:17layout youtube jak widzisz ja tutaj wyczyściłem

0:21nasz markup usunąłem wszystkie zbędne znaczniki

0:26które stworzyliśmy w poprzednich lekcjach tego kursu no i

0:30oczywiście załadowałem takie rzeczy jak font który jest używany na youtubie

0:34czyli roboto oraz załadowałem fontawesome abyśmy nie musieli

0:38martwić się ikonkami więc

0:42gdybyśmy mieli zacząć kodować

0:47takiego youtube youtube jest w tym momencie taką naszą pseudo makietą to

0:51moglibyśmy zacząć od takiego abstrakcyjnego podzielenia tej

0:55strony na sekcje abyśmy mogli stworzyć odpowiedni markup reprezentujący

0:59naszą stronę pierwszą rzeczą która rzuca się w oczy jest oczywiście ta

1:05tutaj sekcja nawigacyjna i od niej tak naprawdę zaczniemy to ćwiczenie później

1:10można zauważyć że tutaj po kliknięciu tego hamburgera

1:14wysuwa się takie menu boczne więc

1:19tutaj mamy już drugą listę nawigacją mamy jakiś powiedzmy

1:25hero section po prostu z banerem naszego kanału jest też

1:29tutaj sekcja z dodatkowymi odnośnikami no

1:34i poniżej już jest sekcja z awatarem kanału

1:38nazwą kanału liczbą subskrybentów przyciskiem do subskrypcji

1:42dzwoneczkiem oraz

1:47dodatkowe jakieś tam listy nawigacyjne no i faktycznie same wideo które

1:52się na danym kanale znajdują my dla uproszczenia będziemy

1:56kodowali sekcje z wideo ponieważ jest tutaj mniej

2:01tych elementów UI które musielibyśmy odtworzyć a nie ukrywajmy że gdybym

2:05zaproponował ci zakodowanie całego layoutu youtuba ze wszystkimi

2:09podstronami no to zajęłoby to o wiele więcej czasu więc

2:14na potrzeby tego kursu będziemy kodowali tą stronę samodzielnie

2:19przy pomocy flexa oczywiście będziemy patrzyli jak ten layout składa

2:23się na mniejszych rozdzielczościach na większych że

2:27js tutaj nie będziemy pisali natomiast przygotujemy naszą strukturę i klasy

2:32w ten sposób aby ewentualne podpięcie odpowiednich akcji na kliknięcie

2:36czy najechaniu myszką nie sprawiało większych problemów chciałbym

2:41też nadmienić że ja tutaj jakoś specjalnie tego przykładu nie kodowałem

2:46wcześniej czyli wszystkie rzeczy ktore będę robił teraz na nagraniu to będą

2:50autentyczne rzeczy które ja jako deweloper robiłbym

2:54w pracy gdybym miał odwzorować taki oto właśnie layout jeśli będą sytuacje

2:59że w prawdziwym przypadku gdyby to była rzeczywista strona www

3:03z której docelowo będą korzystali użytkownicy i warto będzie coś zaimplementować

3:07to ja oczywiście o tym wspomnę natomiast implementacji takich rzeczy jak

3:12faktyczne karuzele czy jakieś drop-down'y to

3:17będzie ewentualne wyzwanie dla ciebie jeśli faktycznie chciałbyś chciałabyś poćwiczyć

3:21tego rodzaju zadania do odtwarzania tego layoutu wykorzystam

3:26rozszerzenie dimensions ono jest odpalane

3:30wewnątrz chroma za pomocą skrótu klawiszowego Alt D i możemy

3:35dzięki niemu mierzyć odpowiednie fragmenty strony i otrzymywać

3:39ich ekwiwalent w pikselach poza tym ten podgląd osi który

3:44widziałeś widziałaś w poprzednich lekcjach będzie uruchamiany na pojedynczych

3:49elementach które będą kontenerami flexa abyśmy widzieli jak

3:53te elementy wewnątrz tego kontenera powinny się układać w takim

3:57razie nie przedłużając już dłużej zapraszam do następnej lekcji gdzie

4:02zaczniemy kodować nasz ekwiwalent youtube