Helion


Szczegóły kursu video

Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox

Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox


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:

  • 1. Wstęp
    • 1.1. Powitanie00:03:34
    • 1.2. Narzędzia00:05:42
  • 2. Flexbox - teoria
    • 2.1. Flexbox - wprowadzenie00:05:30
    • 2.2. Flex - direction00:03:13
    • 2.3. Flex - wrap00:04:42
    • 2.4. Wyrównanie i centrowanie z justify-content00:05:30
    • 2.5. Wyrównanie i centrowanie z z align-items00:04:25
    • 2.6. Wyrównanie przy zawijaniu elementów00:04:36
    • 2.7. Ustawienia pojedynczych elementów00:02:43
    • 2.8. Zmiana kolejności elementów elastycznych00:03:43
    • 2.9. Sposób na zarządzanie wolną przestrzenią kontenera00:04:56
    • 2.10. Zarządzanie wielkością elementów elastycznych cz. 100:04:07
    • 2.11. Zarządzanie wielkością elementów elastycznych cz. 200:03:56
    • 2.12. Relacja ustawień właściwości elementów elastycznych i kontenera00:04:23
  • 3. Flexbox - ćwiczenia
    • 3.1. Ćwiczenie 1 - layout elastyczny cz. 100:05:12
    • 3.2. Ćwiczenie 1 - layout elastyczny cz. 200:05:16
    • 3.3. Ćwiczenie 1 - layout elastyczny cz. 300:02:47
    • 3.4. Ćwiczenie 2 - responsywna nawigacja cz. 100:04:49
    • 3.5. Ćwiczenie 2 - responsywna nawigacja cz. 200:05:06
    • 3.6. Ćwiczenie 2 - responsywna nawigacja cz. 300:05:39
    • 3.7. Ćwiczenie 2 - responsywna nawigacja cz. 400:05:24
    • 3.8. Ćwiczenie 2 - responsywna nawigacja cz. 500:05:08
    • 3.9. Ćwiczenie 2 - responsywna nawigacja cz. 600:04:53
    • 3.10. Ćwiczenie 2 - responsywna nawigacja cz. 700:05:27
    • 3.11. Ćwiczenie 2 - responsywna nawigacja cz. 800:05:00
    • 3.12. Ćwiczenie 3 - oferta biura podróży cz. 100:05:09
    • 3.13. Ćwiczenie 3 - oferta biura podróży cz. 200:05:25
    • 3.14. Ćwiczenie 3 - oferta biura podróży cz. 300:05:18
    • 3.15. Ćwiczenie 3 - oferta biura podróży cz. 400:05:45
    • 3.16. Ćwiczenie 3 - oferta biura podróży cz. 500:05:41
    • 3.17. Centrowanie horyzontalne i wertykalne cz. 100:05:35
    • 3.18. Centrowanie horyzontalne i wertykalne cz. 200:05:34
    • 3.19. Centrowanie horyzontalne i wertykalne cz. 300:05:11
    • 3.20. Centrowanie horyzontalne i wertykalne cz. 400:05:31
    • 3.21. Centrowanie horyzontalne i wertykalne cz. 500:02:04
    • 3.22. Layout aplikacji mobilnej cz. 100:05:20
    • 3.23. Layout aplikacji mobilnej cz. 200:05:17
    • 3.24. Layout aplikacji mobilnej cz. 300:05:26
    • 3.25. Layout aplikacji mobilnej cz. 400:04:09
  • 4. CSS Grid - teoria
    • 4.1. CSS Grid - wprowadzenie00:05:11
    • 4.2. Definiowanie siatki00:05:04
    • 4.3. Wielkości w CSS Grid i auto-flow00:04:56
    • 4.4. Funkcja repeat i manipulowanie wielkością pojedynczych elementów00:05:55
    • 4.5. Rozmieszczanie elementów w siatce Grid00:05:39
    • 4.6. Auto-fill i auto-fit00:05:23
    • 4.7. Minmax00:03:43
    • 4.8. Nazewnictwo obszarów siatki00:05:16
    • 4.9. Nazewnictwo linii00:05:51
    • 4.10. Zarządzanie wolną pzrestrzenią00:05:21
    • 4.11. Zagęszczanie elementów w layoucie00:05:30
  • 5. CSS Grid - ćwiczenia
    • 5.1. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 100:05:22
    • 5.2. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 200:05:20
    • 5.3. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 300:05:30
    • 5.4. Ćwiczenie 6 - responsywna galeria w CSS Grid cz. 400:04:52
    • 5.5. Ćwiczenie 7 - responsywny layout bez @media query cz. 100:05:12
    • 5.6. Ćwiczenie 7 - responsywny layout bez @media query cz. 200:05:18
    • 5.7. Ćwiczenie 7 - responsywny layout bez @media query cz. 300:04:01
    • 5.8. Ćwiczenie 8 - strona w CSS Grid cz. 100:05:11
    • 5.9. Ćwiczenie 8 - strona w CSS Grid cz. 200:05:47
    • 5.10. Ćwiczenie 8 - strona w CSS Grid cz. 300:05:50
    • 5.11. Ćwiczenie 8 - strona w CSS Grid cz. 400:05:04
    • 5.12. Ćwiczenie 8 - strona w CSS Grid cz. 500:04:27
    • 5.13. Ćwiczenie 8 - strona w CSS Grid cz. 600:05:36
    • 5.14. Ćwiczenie 8 - strona w CSS Grid cz. 700:05:42
    • 5.15. Ćwiczenie 8 - strona w CSS Grid cz. 800:05:41
    • 5.16. Ćwiczenie 8 - strona w CSS Grid cz. 900:05:44
    • 5.17. Ćwiczenie 8 - strona w CSS Grid cz. 1000:05:38
    • 5.18. Ćwiczenie 8 - strona w CSS Grid cz. 1100:06:03
    • 5.19. Ćwiczenie 8 - strona w CSS Grid cz. 1200:05:58
    • 5.20. Ćwiczenie 8 - strona w CSS Grid cz. 1300:06:06
    • 5.21. Ćwiczenie 8 - strona w CSS Grid cz. 1400:05:52
    • 5.22. Ćwiczenie 8 - strona w CSS Grid cz. 1500:06:01
    • 5.23. Ćwiczenie 9 - Flexbox i CSS Grid - porównanie cz. 100:05:33
    • 5.24. Ćwiczenie 9 - Flexbox i CSS Grid - porównanie cz. 200:02:59
  • 6. Zakończenie
    • 6.1. Podsumowanie i zakończenie kursu00:01:04