ODBIERZ TWÓJ BONUS :: »

Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox

Podstawowe informacje:
Czas trwania: 06:14:46
Poziom: początkujący
Autor: Dorwij Nerda, Paulina Olszewska
Liczba lekcji: 75
Technologia: Visual Studio Code, CSS3
Dla firm
Rozwiń umiejętności swoich pracowników dzięki kursom video
Dowiedz się więcej
  • Monitorowanie postępów pracowników. Przejrzyste raporty i imienne certyfikaty ukończenia kursów
  • Atrakcyjne rabaty dla zespołów. Im więcej pracowników liczy zespół, tym większy uzyskasz rabat
  • Doradztwo w wyborze tematyki szkoleń. Mamy setki kursów, dostosujemy program nauczania pod Twój zespół
Korzyści:
  • Materiały dodatkowe do kursu
  • Dostęp w aplikacji (także offline)
  • Napisy w języku polskim
Ścieżki rozwoju w ebookpoint.pl

Czego się nauczysz?

  • Tworzenia layoutów w CSS z użyciem Flexbox (jednowymiar) i Grid (dwuwymiar)
  • Rozumienia osi, wyrównania, rozmieszczenia i zawijania elementów w Flexboxie
  • Projektowania responsywnych siatek, obszarów i template'ów w CSS Grid
  • Łączenia obu technik w nowoczesnych interfejsach webowych
  • Optymalizowania układu pod dostępność i czytelność na różnych urządzeniach
  • Debugowania układów w narzędziach przeglądarkowych i stosowania dobrych praktyk

Spis lekcji

1. Wstęp 00:09:16
1.1. Powitanie
00:03:34
1.2. Narzędzia
00:05:42
2. Flexbox - teoria 00:51:44
2.1. Flexbox - wprowadzenie
00:05:30
2.2. Flex - direction
00:03:13
2.3. Flex - wrap
00:04:42
2.4. Wyrównanie i centrowanie z justify-content
00:05:30
2.5. Wyrównanie i centrowanie z z align-items
00:04:25
2.6. Wyrównanie przy zawijaniu elementów
00:04:36
2.7. Ustawienia pojedynczych elementów
00:02:43
2.8. Zmiana kolejności elementów elastycznych
00:03:43
2.9. Sposób na zarządzanie wolną przestrzenią kontenera
00:04:56
2.10. Zarządzanie wielkością elementów elastycznych cz. 1
00:04:07
2.11. Zarządzanie wielkością elementów elastycznych cz. 2
00:03:56
2.12. Relacja ustawień właściwości elementów elastycznych i kontenera
00:04:23
3. Flexbox - ćwiczenia 02:06:06
3.1. Ćwiczenie 1 - layout elastyczny cz. 1
00:05:12
3.2. Ćwiczenie 1 - layout elastyczny cz. 2
00:05:16
3.3. Ćwiczenie 1 - layout elastyczny cz. 3
00:02:47
3.4. Ćwiczenie 2 - responsywna nawigacja cz. 1
00:04:49
3.5. Ćwiczenie 2 - responsywna nawigacja cz. 2
00:05:06
3.6. Ćwiczenie 2 - responsywna nawigacja cz. 3
00:05:39
3.7. Ćwiczenie 2 - responsywna nawigacja cz. 4
00:05:24
3.8. Ćwiczenie 2 - responsywna nawigacja cz. 5
00:05:08
3.9. Ćwiczenie 2 - responsywna nawigacja cz. 6
00:04:53
3.10. Ćwiczenie 2 - responsywna nawigacja cz. 7
00:05:27
3.11. Ćwiczenie 2 - responsywna nawigacja cz. 8
00:05:00
3.12. Ćwiczenie 3 - oferta biura podróży cz. 1
00:05:09
3.13. Ćwiczenie 3 - oferta biura podróży cz. 2
00:05:25
3.14. Ćwiczenie 3 - oferta biura podróży cz. 3
00:05:18
3.15. Ćwiczenie 3 - oferta biura podróży cz. 4
00:05:45
3.16. Ćwiczenie 3 - oferta biura podróży cz. 5
00:05:41
3.17. Centrowanie horyzontalne i wertykalne cz. 1
00:05:35
3.18. Centrowanie horyzontalne i wertykalne cz. 2
00:05:34
3.19. Centrowanie horyzontalne i wertykalne cz. 3
00:05:11
3.20. Centrowanie horyzontalne i wertykalne cz. 4
00:05:31
3.21. Centrowanie horyzontalne i wertykalne cz. 5
00:02:04
3.22. Layout aplikacji mobilnej cz. 1
00:05:20
3.23. Layout aplikacji mobilnej cz. 2
00:05:17
3.24. Layout aplikacji mobilnej cz. 3
00:05:26
3.25. Layout aplikacji mobilnej cz. 4
00:04:09
4. CSS Grid - teoria 00:57:49
4.1. CSS Grid - wprowadzenie
00:05:11
4.2. Definiowanie siatki
00:05:04
4.3. Wielkości w CSS Grid i auto-flow
00:04:56
4.4. Funkcja repeat i manipulowanie wielkością pojedynczych elementów
00:05:55
4.5. Rozmieszczanie elementów w siatce Grid
00:05:39
4.6. Auto-fill i auto-fit
00:05:23
4.7. Minmax
00:03:43
4.8. Nazewnictwo obszarów siatki
00:05:16
4.9. Nazewnictwo linii
00:05:51
4.10. Zarządzanie wolną pzrestrzenią
00:05:21
4.11. Zagęszczanie elementów w layoucie
00:05:30
5. CSS Grid - ćwiczenia 02:08:47
5.1. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 1
00:05:22
5.2. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 2
OGLĄDAJ » 00:05:20
5.3. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 3
00:05:30
5.4. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 4
00:04:52
5.5. Ćwiczenie 7 - responsywny layout bez @media query cz. 1
00:05:12
5.6. Ćwiczenie 7 - responsywny layout bez @media query cz. 2
00:05:18
5.7. Ćwiczenie 7 - responsywny layout bez @media query cz. 3
00:04:01
5.8. Ćwiczenie 8 - strona w CSS Grid cz. 1
00:05:11
5.9. Ćwiczenie 8 - strona w CSS Grid cz. 2
00:05:47
5.10. Ćwiczenie 8 - strona w CSS Grid cz. 3
00:05:50
5.11. Ćwiczenie 8 - strona w CSS Grid cz. 4
00:05:04
5.12. Ćwiczenie 8 - strona w CSS Grid cz. 5
00:04:27
5.13. Ćwiczenie 8 - strona w CSS Grid cz. 6
00:05:36
5.14. Ćwiczenie 8 - strona w CSS Grid cz. 7
OGLĄDAJ » 00:05:42
5.15. Ćwiczenie 8 - strona w CSS Grid cz. 8
00:05:41
5.16. Ćwiczenie 8 - strona w CSS Grid cz. 9
00:05:44
5.17. Ćwiczenie 8 - strona w CSS Grid cz. 10
00:05:38
5.18. Ćwiczenie 8 - strona w CSS Grid cz. 11
00:06:03
5.19. Ćwiczenie 8 - strona w CSS Grid cz. 12
00:05:58
5.20. Ćwiczenie 8 - strona w CSS Grid cz. 13
00:06:06
5.21. Ćwiczenie 8 - strona w CSS Grid cz. 14
00:05:52
5.22. Ćwiczenie 8 - strona w CSS Grid cz. 15
00:06:01
5.23. Ćwiczenie 9 - Flexbox i CSS Grid - porównanie cz. 1
00:05:33
5.24. Ćwiczenie 9 - Flexbox i CSS Grid - porównanie cz. 2
00:02:59
6. Zakończenie 00:01:04
6.1. Podsumowanie i zakończenie kursu
00:01:04

Obierz kurs na... nowoczesne projektowanie stron internetowych

Trudno sobie wyobrazić współczesny świat bez internetu. Żyjemy w nim, pracujemy, robimy zakupy, zbieramy informacje, spędzamy wolny czas. Oczywiście, w ostatnich latach model spędzania czasu w sieci się zmienił - wielu z nas korzysta przede wszystkim z social mediów. Jednak trafiamy także na strony WWW, na przykład do e-sklepów, na blogi czy witryny interesujących nas firm lub organizacji. Część z nich opuszczamy szybko i bez żalu, zirytowani nie tylko nieadekwatnością zamieszczonych na stronie informacji, ale także długim czasem przełączania między podstronami, nieintuicyjnością i ogólnie słabą funkcjonalnością. Przygotowane w niedzisiejszych technologiach, nieprzyjazne dla użytkownika witryny internetowe wielu firm, osób publicznych i organizacji odstraszają, zamiast przyciągać.

Jeśli chcesz się nauczyć projektować strony internetowe, które będą zachwycać i działać niczym magnes na odwiedzających, musisz sięgnąć po najlepsze, co oferują twórcy służących do tego rozwiązań. Na Twoim radarze webdevelopera powinien się znaleźć genialny system tworzenia layotu w CSS, czyli CSS Grid i CSS Flexbox - moduł CSS, który zapewnia efektywny sposób zarządzania kontenerami strony i rozkładem elementów wewnątrz kontenerów. Z tych technologii korzysta się obecnie powszechnie, zarówno do budowy nowych stron internetowych, jak i do przekształcania już istniejących witryn. Z ich użyciem stworzysz nie tylko prostą wizytówkę czy aplikację, ale także bardziej skomplikowaną stronę o responsywnym layoucie - podstawę dzisiejszego internetu, dostępnego na urządzeniach o rozmaitych wielkościach ekranu.

Co cię czeka podczas naszego profesjonalnego szkolenia

Dzięki nauce z proponowanym przez nas kursem video między innymi:

  • Poznasz właściwości Flexboxa i dowiesz się, jak z nich korzystać
  • Zrozumiesz korelację między regułami dla kontenera i dla pojedynczych elementów
  • Dowiesz się, czym jest main axis, a czym cross axis
  • Opanujesz zasady budowy układu responsywnego z Flexboxem i siatki CSS Grid
  • Zorientujesz się, jakie są sposoby rozmieszczania elementów w siatce

Co więcej...

  • Przyswajając wiedzę i umiejętności, zrozumiesz, jakie są różnice między Flexboxem i CSS Grid

Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox kończy się na poziomie podstawowym, co oznacza, że jako absolwent tego szkolenia będziesz posiadać solidne podstawy w zakresie omawianych technologii. Do osiągnięcia biegłości w tej dziedzinie przyda Ci się dalsza praktyka już we własnym zakresie.

Nowa jakość w kaskadowych arkuszach stylu

Kaskadowe arkusze stylu, z angielskiego skrócone do akronimu CSS, to język stworzony specjalnie do opisu formy prezentacji stron WWW. Arkusz stylów CSS zawiera listę reguł, które „informują” przeglądarkę internetową o tym, w jaki sposób powinna wyświetlić zawartość elementów HTML czy XML. Języka CSS używa się od drugiej połowy lat 90., przez ten czas stopniowo go unowocześniano i dodawano do niego kolejne usprawniające technologie. Flexbox jest jedną z nich. Pozwala na tworzenie kompleksowego i elastycznego układu strony bez odwoływania się do właściwości float i position (które są nadal w porządku i działają, ale... nie zawsze idealnie). O ile Flexbox jest jednowymiarowy - pozwala rozmieszczać elementy w wierszach i kolumnach tak, by się odpowiednio rozszerzały i kurczyły - o tyle CSS Grid jest dwuwymiarowy. W praktyce oznacza to, że pozwala sterować zarówno wierszami, jak i kolumnami. Tym samym Grid należy uznać za technologię bardziej zaawansowaną od Flexboxa, ale wciąż obie są użytkowe i równie warte poznania.

Patronat medialny:

Wybrane bestsellery

O autorach kursu video

Dorwij Nerda - pierwsza techniczna agencja rekrutacyjna. Buduje zespoły, realizuje projekty, weryfikuje kandydatów, edukuje rekruterów. Działa w szeroko rozumianym IT. Oferuje szkolenia, między innymi z języków programowania, zarządzania projektami, architektury czy procesów wytwarzania oprogramowania. Organizuje spotkania z zagranicznymi specjalistami z danej dziedziny by zagwarantować najwyższą jakość przekazywanego materiału. Po więcej szczegółów zajrzyj na: https://dorwijnerda.pl.

Paulina Olszewska - WordPress developer, szkoleniowiec technologii webowych, digital marketer, absolwentka Politechniki Gdańskiej. Poza pracą uwielbia bieganie i ekstremalną turystykę górską. Wycisza się przy szyciu i szydełkowaniu.

Dorwij Nerda, Paulina Olszewska - pozostałe kursy

Oceny i opinie klientów: Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox Dorwij Nerda, Paulina Olszewska (2)

Informacja o opiniach
Weryfikacja opinii następuje na podstawie historii zamowień na koncie Użytkownika umiejszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniającej do uzyskania rabatu w ramach Programu Kadr.
4.5
  • 6 (1)
  • 5 (0)
  • 4 (0)
  • 3 (1)
  • 2 (0)
  • 1 (0)
  • Dobra robota. Świetny start do zdobycia umiejętności robienia fajnych stron. Wszystko prosto i dobrze wytłumaczone. Autorka ma dar przekazywania wiedzy. Dzięki!

    Opinia: Tomek Opinia dodana: 2022-04-25 Ocena: 6   
    Opinia niepotwierdzona zakupem
    Opinia dotyczy produktu: kurs video
    Czy opinia była pomocna:
  • Prowadząca nie ma zbytnio talentu do przekazywania wiedzy. Płytkie, szybkie projekty pokazują podejście prowadzącej do kursanta. Mimo, że stylowanie stron nie jest tematem kursu, mogłoby się tutaj znaleźć dla estetyczności. Prowadząca mało tłumaczy pojęcia, pokazuje tylko, co one robią. Częste pomyłki i zawachania też pokazują, że prowadząca nie przygotowała się merytorycznie do nagrywania i słuchając miałem wrażenie, że Pani nie wie o czym mowi. Dobrze, że już mam jakieś pojęcie na temat grida i flexboxa. Kurs za drogi. Cena nie jest adekwatna.

    Rozwiń »
    Opinia: anonimowa Opinia dodana: 2025-10-20 Ocena: 3   
    Opinia potwierdzona zakupem
    Opinia dotyczy produktu: kurs video
    Czy opinia była pomocna:
więcej opinii »

Szczegóły kursu

Dane producenta » Dane producenta:

Helion SA
ul. Kościuszki 1C
41-100 Gliwice
e-mail: gpsr@helion.pl
Format: Online
Data aktualizacji: 2022-03-23
ISBN: 978-83-283-8867-3, 9788328388673
Numer z katalogu: 169714

Videopoint - inne kursy

Kurs video
149,00 zł
Dodaj do koszyka
Sposób płatności