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: CSS3, Visual Studio Code
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ół
Indywidualnie
104,30 zł 149,00 zł (-30%)
39,90 zł najniższa cena z 30 dni Dodaj do koszyka
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 (0)

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.

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
104,30 zł
Dodaj do koszyka
Płatności obsługuje:
Ikona płatności Apple Pay Ikona płatności Bank PEKAO S.A. Ikona płatności Bank Pocztowy Ikona płatności Banki Spółdzielcze Ikona płatności BLIK Ikona płatności Crédit Agricole e-przelew Ikona płatności Google Pay Ikona płatności ING Bank Śląski Ikona płatności Inteligo Ikona płatności iPKO Ikona płatności mBank Ikona płatności Millennium Ikona płatności Paypal Ikona płatności PayPo | PayU Płacę później Ikona płatności PayU Płacę później Ikona płatności Plus Bank Ikona płatności Płacę z Citi Handlowy Ikona płatności Płać z BOŚ Ikona płatności Płatność online kartą płatniczą Ikona płatności Santander Ikona płatności Visa Mobile