Przejdź do treści
strefakursów

Flexbox & Grid - responsywne layouty od podstaw

Naucz się wykorzystywać Flexbox i Grid do tworzenia responsywnych layoutów. Spraw, by Twoje strony wyświetlały się poprawnie na wszystkich urządzeniach.

4,8 111 opinii Autor: Bartosz Szmit
28 lekcji 21 pytań testowych Poziom: Podstawowy Język: polski Certyfikat
119 zł

Dostęp od razu po zakupie

Płacisz raz i wchodzisz prosto do lekcji - bez subskrypcji, bez czekania na grupę.

Dodaj do listy życzeń

Ten kurs jest częścią ścieżki

Web Designer

Szczegóły, które warto znać

5 godzin materiałów
Bezterminowy dostęp
Imienny certyfikat PDF
28 lekcji wideo
Poziom: Podstawowy
Testy i zadania
21 pytań testowych
Rekomendacje na LinkedIn
Napisy dostępne w językach: polski, angielski, ukraiński
Dostęp w aplikacji mobilnej

Opis szkolenia

Czego się nauczysz:

  • tworzenia layoutów dopasowanych do wielu urządzeń i przeglądarek

  • definiowania kontenerów w flexbox i grid

  • tworzenia responsywnych artykułów, formularzy i galerii zdjęć

  • wyrównywania elementów w pionie i poziomie

  • pozycjonowania elementów layoutu

  • dobrych praktyk pracy z HTML i CSS

  • pracy z layoutami wielokolumnowymi

  • poprawnego zawijania tekstu

Mnogość przeglądarek i urządzeń z jakich korzystają dzisiaj użytkownicy sprawia, że budowa strony wyglądającej dobrze w każdej sytuacji jest zajęciem dość wymagającym, ale nie niemożliwym. Z pomocą przychodzą tutaj technologie takie jak flexbox i grid. Dzięki ich znajomości będziesz mógł znacznie prościej tworzyć elastyczne, responsywne i zawsze świetnie wyglądające layouty. W tym kursie dowiesz się jak wykorzystać ich możliwości, tak by Twoje strony były nowoczesne i wyglądały dobrze niezależnie od urządzenia i przeglądarki, na których będą wyświetlane.

Flexbox czy grid?

Zanim przejdziemy do bardziej praktycznych zadań i pracy z projektami, zapoznam Cię z podstawami pracy z flexbox i grid. Dowiesz się w czym te technologie są do siebie podobne, a czym się różnią. Zobaczysz kiedy lepszym wyborem będzie grid, a kiedy flexbox, a także przekonasz się, że zdarzają się przypadki, kiedy można obie te technologie łączyć. Zdobycie tej wiedzy pozwoli Ci wykorzystywać flexbox i grid w bardziej uniwersalny sposób.

Rozmieszczanie elementów

Duża liczba elementów na stronie bez odpowiedniego ich rozplanowania to gotowy przepis na katastrofę. Katastrofę w postaci kiepsko wyglądającej i nieużytecznej strony. W trakcie kursu pokażę Ci jak takich sytuacji unikać. Dowiesz się jak poprawnie definiować kontenery i zarządzać elementami. Nauczę Cię wyrównywania elementów w pionie i poziomie, ustalania ich kolejności oraz poprawnego zawijania tekstu. Dowiesz się też jak modyfikować szablony siatki czy tworzyć własne linie siatki. Nad naszym kodem będziemy pracować w cenionym przez web developerów i darmowym narzędziu Visual Studio Code.

Responsywne layouty

Większość wiedzy jaką zdobędziesz będzie się opierała głównie na pracy z praktycznymi projektami z wykorzystaniem zarówno na flexbox jak i grid. Bez problemu pozwoli Ci to zadbać o responsywność i poprawny layout w przypadku Twoich stron. W trakcie kursu wspólnie wykonamy projekty zawierające artykuł, formularz i galerie zdjęć. W przypadku wszystkich projektów przyjrzymy się dokładnie zarówno strukturze HTML jak i stylom CSS, tak abyś nie tylko wiedział jak z nimi pracować, ale też rozumiał wszelkie zależności między technologiami.

Co jeszcze powinieneś wiedzieć?

Aby komfortowo korzystać z tego kursu powinieneś posiadać podstawową wiedzę na temat tworzenia stron internetowych i wykorzystania technologii HTML i CSS. Jeżeli jeszcze nie zdobyłeś tej wiedzy, możesz to zrobić dzięki naszym szkoleniom.

Kup w pakiecie i oszczędź

Flexbox & Grid - responsywne layouty od podstaw

Flexbox & Grid - responsywne layouty od podstaw

4.8 (111)

119 zł

Kurs HTML i JavaScript - praktyczne projekty

Kurs HTML i JavaScript - praktyczne projekty

4.8 (69)

149 zł

Cena za zakup pakietu

214 zł 268 zł −20%

Oszczędzasz w pakiecie: 54 zł

Zyskujesz 21.44 zł w punktach na kolejne zakupy.

Kup w pakiecie

Program kursu

6 modułów · 28 lekcji

1 · Szybkie wprowadzenie:
  • Wstęp 01m 03s
  • Jak korzystać z plików 02m 27s
  • Omówienie technologii flexbox 04m 10s
  • Omówienie technologii grid 03m 47s
2 · Praktyczne podstawy flexbox
  • Jak zdefiniować kontener flex 16m 18s
  • Zmiana kierunku 14m 41s
  • Zawijanie wierszy ze zmianą kierunku 12m 04s
  • Wyrównywanie elementów w pionie 13m 48s
  • Ustawianie kolejności oraz wymiarów 16m 52s
3 · Praktyczne podstawy grid
  • Jak zdefiniować kontener grid 12m 39s
  • Jak określić własne linie siatki 14m 38s
  • Modyfikowanie szablonów siatki 15m 54s
  • Wyrównywanie elementów siatki w pionie 11m 06s
  • Definiowanie szablonów zaawansowanych 15m 35s
4 · Zaawansowane projekty flexbox
  • Projekt Artykuły - struktura html 12m 24s
  • Projekt Artykuły - style css 10m 44s
  • Projekt Formularz - struktura html 17m 07s
  • Projekt Formularz - style css 09m 58s
5 · Zaawansowane projekty grid
  • Definiowanie stylów siatki poprzez funkcję repeat 13m 34s
  • Galeria grafiki 2D 17m 54s
  • Galeria z wykorzystaniem jednostek fr cz.1 13m 06s
  • Galeria z wykorzystaniem jednostek fr cz.2 11m 56s
6 · Łączenie technologii flex i grid
  • Wykorzystanie parametrów column-count oraz column-gap 09m 28s
  • Wykorzystanie align-items oraz justify-content 13m 42s
  • Responsywny formularz z wykorzystaniem różnych parametrów siatki 09m 35s
  • Galeria z wykorzystaniem flex oraz flex-direction 10m 41s
  • Galeria oparta o różne parametry siatki 08m 58s
  • Zakończenie 01m 07s

Twój instruktor

Bartosz Szmit

Bartosz Szmit

Inżynier technologii internetowych

Posiada bogate doświadczenie głównie w pracy z technologiami frontendowymi: HTML5, CSS3, JavaScript i jQuery, ale nie są mu również obce narzędzia backendowe. Lubi dzielić się swoją wiedzą, chętnie pomaga w nauce programowania i matematyki studentom uczelni wyższych. W wolnych chwilach zajmuje się pisaniem muzyki na potrzeby teatru i filmu.

Opinie kursantów

5,0 Zweryfikowana
„Kurs Flexbox i Grid polecam osobom które opanowały język znaczników HTML oraz kaskadowe arkusze styli CSS. Autor kursu przestawia ciekawie te dwie techniki dzięki którym łatwo można panować nad układem strony. Polecam."
P Paweł Zarębski zweryfikowany kursant
5,0 Zweryfikowana
„Dla kogoś kto chce być na bieżąco z aktualnymi rozwiązaniami dotyczącymi RWD kurs jest idealnym rozwiązaniem. Dzięki niemu na praktycznych przykładach nauczysz się tworzyć strony w oparciu o Flexbox oraz CSS Grid - poznasz różnice między nimi oraz dowiesz się, jak oraz kiedy je ze sobą łączyć. Znajomość tych technologii jest już standardem wśród wymagań pracodawców, zatem szczerze polecam zgłębienie zagadnień z przygotowanych lekcji!"
Czytaj więcej
D Dawid Kopicki zweryfikowany kursant
5,0 Zweryfikowana
„Bardzo przyjemny kurs, dzięki któremu nauczyłem się ustawiać elementy na stronie w taki sposób w jaki potrzebowałem. Zagadnienia wyjaśnione w jasny i klarowny sposób który dotrze do każdego. Polecam"
B Bartosz Olczak zweryfikowany kursant
5,0 Zweryfikowana
„Kurs w przystępny sposób prowadzi przez zagadnienia związane z technologiami Flexbox i Grid. Zastosowane przykłady bardzo dobrze pokazują różnice pomiędzy Flexbox, a Grid. Kurs mogę polecić trzeba jednak podkreślić, że jest to jednak wprowadzenie do tych technologii, ale pozwalające na bezproblemowy start w pracy z ich wykorzystaniem. Na koniec jedna mała uwaga, ciągłe przechodzenie do katalogu, aby uruchomić stronę po zmianach w pliku... jest trochę męczące i monotonne."
Czytaj więcej
P Paweł Jaworski zweryfikowany kursant

Najczęściej zadawane pytania

Jak wygląda uczestnictwo w kursie online?

Kursy online w strefakursów.pl to kompletne pakiety materiałów wideo przygotowane przez zespół naszych specjalistów. Po zakupie otrzymujesz natychmiastowy dostęp do wszystkich lekcji, testów i materiałów dodatkowych na swoim koncie - możesz zacząć się uczyć od razu, bez czekania. Konto jest bezpłatne i możesz założyć je w dowolnym momencie lub w trakcie dokonywania pierwszego zakupu w serwisie strefakursów.pl. Materiały, do których otrzymasz dostęp, pozwolą Ci rozwinąć się zawodowo i podnieść swoje kwalifikacje. Każdy kurs przepełniony jest praktyczną wiedzą, która ułatwi Ci osiągnięcie wymarzonych życiowych celów. Zdobytą wiedzę i postępy możesz w łatwy sposób zweryfikować za pomocą licznych testów i ćwiczeń dołączonych do każdego kursu.

Czy otrzymam certyfikat ukończenia kursu?

Do każdego ukończonego przez Ciebie kursu wystawiamy imienny certyfikat w formacie PDF - będzie on dostępny na Twoim koncie w zakładce Certyfikaty. Warunkiem jego otrzymania jest zaliczenie testów dołączonych do kursu oraz obejrzenie wszystkich lekcji. Na certyfikacie znajduje się Twoje imię oraz nazwisko, nazwa ukończonego kursu, data wystawienia i unikalny numer certyfikatu. Certyfikat możesz wydrukować lub opublikować w Internecie za pośrednictwem specjalnego odnośnika np. na LinkedIn lub innych portalach społecznościowych, jak również dołączyć do swojego CV. Pamiętaj, że certyfikatów nie wysyłamy w formie papierowej.

Czy otrzymam fakturę VAT za zamówienie?

Tak, do każdego zamówienia wystawiamy fakturę VAT (23%) lub paragon - w zależności od danych podanych przy zakupie. Pobierzesz ją z zakładki Historia zamówień na swoim koncie. Powiadomimy Cię mailowo, gdy dokument będzie gotowy.
Potrzebujesz proformy? Zaznacz pole "Chcę otrzymać dokument proforma" przy składaniu zamówienia lub napisz: biuro@strefakursow.pl


Zakup w aplikacji mobilnej? Jeśli kupujesz przez App Store lub Google Play, sprzedawcą jest odpowiednio Apple lub Google. Fakturę otrzymasz od nich zgodnie z ich zasadami:



Możesz również pobrać dokument przez stronę Apple. Przejdź pod ten adres: https://reportaproblem.apple.com/, następnie zaloguj się swoim Apple ID, znajdź zakup na liście i kliknij, aby zobaczyć szczegóły i ewentualnie pobrać dokument. Apple zwykle wystawia fakturę jako dostawca usług cyfrowych. Jeśli potrzebujesz faktury VAT, możesz skontaktować się z pomocą techniczną Apple, aby uzyskać dodatkowe informacje na temat zgodności faktury z przepisami w Twoim kraju.

Zakup w Google Play(Android)

Gdy dokonujesz zakupu w aplikacji strefakursów.pl na Android za pośrednictwem Google Pay sprzedawcą jest Google. Fakturę lub dokument zakupu znajdziesz zgodnie z poniższą instrukcją:

  • Otwórz aplikację Google Play.
  • Kliknij ikonę swojego profilu w prawym górnym rogu.
  • Wybierz Płatności i subskrypcje > Historia zakupów.
  • Znajdź interesujący Cię zakup i kliknij na niego, aby zobaczyć szczegóły. Jeśli chcesz pobrać fakturę, kliknij przycisk Faktura (jeśli jest dostępny).

    • Możesz również znaleźć fakturę na stronie Google Pay. Przejdź pod ten adres: pay.google.com i zaloguj się na swoje konto Google, z którego dokonano zakupu. W sekcji Aktywność znajdziesz wszystkie transakcje dokonane w Google Play. Kliknij daną transakcję, aby zobaczyć szczegóły i pobrać fakturę.

Ile mam czasu na przerobienie materiałów?

Tyle, ile potrzebujesz! Uczysz się we własnym tempie - bez presji i bez abonamentu. Płacisz raz i zachowujesz dostęp do zakupionego kursu na swoim koncie bez z góry określonej daty końcowej. Przez pierwsze 12 miesięcy od zakupu dbamy o aktualność materiałów i zapewniamy pełną dostępność testów oraz certyfikatu. Później kurs nadal pozostaje na Twoim koncie - wracasz do lekcji, kiedy masz ochotę. Szczegółowe zasady dostępu znajdziesz w regulaminie.

Dla firm
Uczysz się do pracy? Kup ten kurs przez firmę
Dla siebie, pracownika lub zespołu – z fakturą i opcją ceny zespołowej.
Sprawdź zakup firmowy
Sprawdź zakup firmowy

Powiązane tematy

Web Designer Tworzenie stron internetowych CSS HTML

Zobacz też

Podobne kursy

Kurs HTML i JavaScript - praktyczne projekty

Programowanie

Kurs HTML i JavaScript - praktyczne projekty

4.8 (69)

149 zł

Produktywne tworzenie stron z LESS & SASS

Programowanie

Produktywne tworzenie stron z LESS & SASS

4.9 (236)

119 zł

Warsztaty tworzenia stron internetowych

Programowanie

Warsztaty tworzenia stron internetowych

5.0 (119)

119 zł

Fundamenty CSS - stylowanie stron od podstaw

Programowanie

Fundamenty CSS - stylowanie stron od podstaw

4.9 (121)

159 zł

Kurs Metodologia BEM - jak pisać dobry kod CSS

Programowanie

Kurs Metodologia BEM - jak pisać dobry kod CSS

4.9 (38)

129 zł

Kurs Bootstrap 4 - od podstaw

Programowanie

Kurs Bootstrap 4 - od podstaw

5.0 (193)

119 zł

Kurs Bootstrap 4 - praktyczny projekt

Programowanie

Kurs Bootstrap 4 - praktyczny projekt

4.9 (127)

119 zł

Kurs Błyskawiczne tworzenie stron z Tailwind CSS

Programowanie

Kurs Błyskawiczne tworzenie stron z Tailwind CSS

4.8 (39)

159 zł

Fundamenty języka HTML - kodowanie stron od podstaw

Programowanie

Fundamenty języka HTML - kodowanie stron od podstaw

4.9 (178)

159 zł

Kurs Tworzenie stron internetowych - praktyczne projekty

Programowanie

Kurs Tworzenie stron internetowych - praktyczne projekty

4.9 (48)

159 zł

Ten kurs jest częścią ścieżki

4,8

Web Designer

Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony!

675 wykładów 21578 uczestników
Dowiedz się więcej

Dostęp od razu po zakupie

119 zł

Zwrot w 3 krokach

Masz 30 dni na zwrot od daty zakupu.

  1. 1

    Zleć zwrot jednym kliknięciem

    Przejdź do Historii zamówień i wybierz „Dokonaj zwrotu" przy zamówieniu, które chcesz zwrócić.

  2. 2

    Potwierdzamy zwrot

    Dostajesz potwierdzenie przyjęcia zwrotu - zwykle w 1 dzień roboczy.

  3. 3

    Pieniądze wracają

    Tą samą metodą, którą zapłacono - zwykle w 3-5 dni roboczych, maksymalnie 14 dni.

Pełne warunki znajdziesz w regulaminie zakupów.

Kod na pierwszy zakup

Odbierz 10% rabatu na pierwsze zamówienie

Dołącz do newslettera z promocjami i odbierz kod rabatowy.

Jest z nami już ponad 106 tys. subskrybentów

Podając adres e-mail zapisujesz się do newslettera i akceptujesz politykę prywatności. W każdej chwili możesz się wypisać.

Ups! Coś poszło nie tak

Zabezpieczenie antybotowe uznało, że Twoje ostatnie zgłoszenie mogło pochodzić od bota, i je zablokowało. Spróbuj ponownie. W razie problemów skontaktuj się z nami.