
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
- Tytuł: Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox
- Autor: Dorwij Nerda, Paulina Olszewska
- Ilość rozdziałów: 6
- Ilość lekcji: 75
- Czas trwania: 06:14:46
- ISBN: 978-83-283-8867-3, 9788328388673
- Data wydania: 2022-03-23
- Identyfikator pozycji: vzoweb
-
Kategorie: