- Autorzy:
- Długość
- liczba lekcji: 75, czas trwania: 06:14:46
- Ocena
Kurs video
Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox Dorwij Nerda, Paulina Olszewska
- Autorzy:
- Dorwij Nerda, Paulina Olszewska
- Wydawnictwo:
- Videopoint
- Wersja:
- Online
- Czas trwania:
- 6 godz. 14 min.
- Technologia:
- Visual Studio Code, CSS3
- Ocena:
Spis lekcji kursu video
-
1. Wstęp 00:09:16
-
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 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 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
Opis
kursu video
:
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:
Wybrane bestsellery
Dorwij Nerda, Paulina Olszewska - pozostałe kursy
Videopoint - inne kursy
Dzięki opcji "Druk na żądanie" do sprzedaży wracają tytuły Grupy Helion, które cieszyły sie dużym zainteresowaniem, a których nakład został wyprzedany.
Dla naszych Czytelników wydrukowaliśmy dodatkową pulę egzemplarzy w technice druku cyfrowego.
Co powinieneś wiedzieć o usłudze "Druk na żądanie":
- usługa obejmuje tylko widoczną poniżej listę tytułów, którą na bieżąco aktualizujemy;
- cena książki może być wyższa od początkowej ceny detalicznej, co jest spowodowane kosztami druku cyfrowego (wyższymi niż koszty tradycyjnego druku offsetowego). Obowiązująca cena jest zawsze podawana na stronie WWW książki;
- zawartość książki wraz z dodatkami (płyta CD, DVD) odpowiada jej pierwotnemu wydaniu i jest w pełni komplementarna;
- usługa nie obejmuje książek w kolorze.
Masz pytanie o konkretny tytuł? Napisz do nas: sklep@helion.pl
Książka drukowana
Oceny i opinie klientów: Zostań webdeveloperem. Kurs video. CSS Grid i Flexbox Dorwij Nerda, Paulina Olszewska (1) Weryfikacja opinii następuję na podstawie historii zamówień na koncie Użytkownika umieszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniające do uzyskania rabatu w ramach Programu Punktowego.
(1)
(0)
(0)
(0)
(0)
(0)