Masz już konto? Zaloguj się

Kurs Flexbox

Naucz się Flexboxa, czyli nowoczesnego schematu tworzenia responsywnych stron z użyciem HTML i CSS.

31 lekcji

4h 7min

4 (12 oceny)

Flexbox - od Podstaw

Ten kurs to omówienie najpopularniejszej i najlepiej wspieranej metody pozycjonowania elementów ostatnich lat - Flexboxa. Zrozumiesz w pełni jak działa Flexbox, dlaczego elementy układają się w określony sposób przy danych właściwościach, a także jakie problemy rozwiązuje i jakie niesie za sobą ryzyko.Realizacja materiału będzie dla Ciebie solidną dawką wiedzy, dzięki której żaden layout na flexboxie już Cię nie zaskoczy. Został on skompresowany do granic możliwości, znajdziesz tu same konkrety.

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.

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

Zawartość

Flexbox

4 rozdziały 31 lekcji 4h 7min

  • Wstęp

    3min

    Wprowadzenie

    Podgląd lekcji

    2min

    Na czym będziemy pracować

    Podgląd lekcji

    1min

  • Poznajemy mechanikę flexboxa

    1h 15min

    Włączanie flexboxa

    Podgląd lekcji

    6min

    Kierunek i zawijanie wierszy

    9min

    Wyrównywanie względem głównej osi

    9min

    Wyrównywanie względem osi przeciwstawnej

    12min

    Rozmiar bazowy

    5min

    Rozszerzanie się elementów

    9min

    Kurczenie się elementów

    5min

    Kolejność renderowania

    5min

    Notacja skrócona

    5min

    Porady odnośnie marginesów

    10min

  • Tworzymy faktyczny layout na flexie

    2h 28min

    Wprowadzenie do tworzenia własnego YouTube

    4min

    Pasek nawigacyjny cz. 1

    13min

    Pasek nawigacyjny cz. 2

    17min

    Pasek nawigacyjny cz. 3

    9min

    Nagłówek kanału cz. 1

    8min

    Nagłówek kanału cz. 2

    11min

    Nagłówek kanału cz. 3

    14min

    Nagłówek kanału cz. 4

    10min

    Lista wideo - wprowadzenie

    2min

    Lista wideo cz. 1

    10min

    Lista wideo cz. 2

    12min

    Lista wideo cz. 3

    11min

    Lista wideo cz. 4

    15min

    Lista wideo cz. 5

    12min

  • Dalszy rozwój z flexboxem

    22min

    Wsparcie przeglądarek

    3min

    Problemy z dostępnością cz. 1

    7min

    Problemy z dostępnością cz. 2

    9min

    Dodatkowe materiały

    2min

    Zakończenie

Autor kursu

Wojciech Połowniak

Sr. Fullstack Engineer

Średnia ocen autora: 5

Bio
Cześć! Nazywam się Wojtek i moja obecna rola to Full Stack Engineer - tworzeniem stron zajmuję się już od ponad dziesięciu lat. Jeśli miałbym wskazać moją pasję, to zdecydowanie byłoby to programowanie w technologiach webowych i dalsze szerzenie się wiedzą :) Możesz kojarzyć mnie z kanału Koduje na Youtube, gdzie stworzyłem ponad 50 darmowych poradników dotyczących różnych zagadnień z Front-Endu, czy jako głównego koordynatora cyklicznych spotkań Meet.js Warszawa. Poza tym jestem też członkiem programu Mozilla TechSpeakers - technologie open-source, ich tworzenie oraz przemowy publiczne również nie są mi obce. Od czasu do czasu prowadzę również indywidualne zajęcia dla osób poszukujących swojej pierwszej pracy jako Front-End developer. Uwielbiam tematykę dostępności sieci - o której świadomość, zwłaszcza na polskim rynku - jest dosyć znikoma. Interesuję się również IoT oraz VR (❤️) czy Game-Developmentem, również w JavaScript! Uważam, że nauczanie jest zdecydowanie najlepszą metodą, by poszerzać swoje horyzonty i dalej się rozwijać! https://koduje.pl
Inne kursy tego autora
Docker Nuxt.js CSS Accessibility CSS Grid

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Ten kurs to masakra dla mózgu. Przypomniałem sobie politechnikę i ćwiczenia z doktorem co myślał, że wszyscy są ekspertami jak się zaczynają uczyć. Przekazywanie wiedzy przez tego Pana zniechęca do dalszej nauki niestety.

Maciej Grygiel

13 lutego 2021

Kurs jak dla mnie nie jest dobrze przygotowany, ciężko się tego słucha i ogląda. Ostatecznie daję jedną gwiazdkę na plus, bo jak się człowiek zaprze, to idzie z tego wyciągnąć jakąś wiedzę.

Mike Sosnowski

14 lutego 2021

W porównaniu z p.Grzegorzem to jest jedna wielka tragedia; zero tłumaczenia tylko mówienie w danym momencie co się robi; sporo rzeczy których wcześniej nie było a prowadzący używa tego i leci dalej; chyba ktoś zapomniał, że to kurs dla początkujących

Marcin

17 marca 2021

polecam ! super! :) kurs ten jest kursem flexbox od podstaw a nie kursem css od podstaw. Jeśli ktoś nie ma opanowanego css to kurs nie do przerobienia. Autor ma bardzo dużą wiedzę oraz wielkie doświadczenie w tym co robi. Jeszcze raz polecam.

Aleksander Jedynak

3 maja 2021

Józef Woziwoda

9 lipca 2021

Krzysztof Kiersnowski

24 sierpnia 2021

user deleted

7 października 2021

Konkretnie i na temat. Bardzo lubię tak prowadzone kursy. Warto znać trochę css i html bo flexbox to już krok dalej.

Robert Przepiórka

2 listopada 2021

Jako przypomnienie flexbox'a dla osób z doświadczeniem super. Trochę chaotyczny hands-on, ale ja to odbieram bardziej jako symulację naturalnego procesu, bo on jest chaotyczny - próbujesz, zmieniasz, przyszła idea jak to inaczej ogarnąć i robisz. Nikt z programistów nie siada do kodowania z idealnym blueprintem przed sobą i nie wprowadza idealnego kodu. To żywy proces i tutaj to wspaniale widać. Tak, zdaża się nam i literówka i błąd, naprawdę nie powód do śmiechu i frustracji. Jeżeli chcecie pracować w tym zawodzie - to wspaniała możliwość zobaczyć jak to na żywo wygląda. Czego się nie zrozumiało, MDN, CSS Tricks, samemu próbować. Im dalej, tym będzie ciężej, tak że nie oczekujcie, że nagle materiał będzie zrozumiały i magicznie wszystko będzie. Trzeba będzie popraktykować. Dużo popraktykować. Trafiasz na coś nowego lub zapomnianego i - 20% nauki/czytania, 80% praktyki.

user deleted

19 listopada 2021

Sposób w jaki została przedstawiona wiedza, totalnie nie pasuje do ścieżki HTML/CSS od podstaw. W ogóle nie jestem pewien czy to pasuje do kategorii "kurs". To nawet na youtube się nie nadaje, pomimo że "cena za darmo" wydaje się adekwatna do tego "kursu", to zrobiłoby to antyreklamę aniżeli reklamę serwisu eduweb.pl

Miłosz Miśkowiec

4 stycznia 2022

mój ulubiony cytat z kursu: "moglibyśmy to sobie zrobić beerem, natomiast nie wiem czy to jest semantycznie poprawne". To ja mam wiedzieć czy jest czy nie? Kolejna rzecz której nie zapisałam idzie mniej więcej tak: tu zrobimy taki hack którego się nie robi bo to jest zła praktyka. XD

klaudia

22 lutego 2023

Pierwszy odcinek rozdziału "Tworzymy faktyczny layout na flexie" skutecznie zniechęcił mnie do dalszego oglądania tego kursu. O ile wcześniejsze lekcje były dość jasne, dalsza część to niestety nieporozumienie i totalny chaos.

Remigiusz Radziszewski

10 lipca 2023

Kurs Flexbox

  • 31 lekcji wideo

  • 4h 7min materiału

  • Ostatnia rewizja 25.05.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!

Wiedza ekspertów

Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.

Praktyczne przykłady

Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.

Adam Romański

helloroman.com

Zacznij naukę w Flexbox

  • 31 lekcji wideo

  • 4h 7min materiału

  • Ostatnia rewizja 25.05.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych