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
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
-
Poznajemy mechanikę flexboxa
1h 15min
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
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
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 24.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
Zadzwoń +48 880880606
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 24.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk