Про курс
CSS Grid Layout – це гнучкий і потужний спосіб керування розміщенням елементів, що разом із базовими елементами CSS реалізує повну і завершену систему створення макетів вебсторінок.
Під час проходження курсу «Верстка на Grid» ви познайомитеся з основами CSS Grid і на практиці дізнаєтеся, як ефективно використовувати CSS Grid для створення гнучких та адаптивних макетів. Ви навчитеся створювати сітки за допомогою grid-template-columns та grid-template-rows, задавати розміри та розташування елементів у середині сітки з використанням grid-column та grid-row, а також керувати простором між елементами за допомогою grid-gap. По закінченню курсу ви зможете створювати складні сітки, зрозумієте, як керувати розташуванням та розмірами елементів, а також навчитеся використовувати потужні функції, такі як позиціювання елементів, створення областей сітки та багато інших.
Даний навчальний курс надасть вам не тільки теоретичне розуміння найкращих практик та сучасних трендів у галузі верстки, а й практичні навички створювання гнучких та сучасних вебмакетів. Після проходження курсу ви зможете отримати сертифікат, що підтверджує ваші знання та вміння використовувати Grid-верстку.
Курс «Верстка на Grid» ідеально підходить для веброзробників, дизайнерів та всіх, хто зацікавлений у створенні сучасних та адаптивних вебсторінок за допомогою CSS Grid.
Цей курс входить до спеціальності:
Попередні Вимоги
Курс підійде тим, хто вже має базові знання HTML та CSS, та хоче познайомитись із CSS Grid і вивчити основи роботи цієї технології для впевненого використання її на практиці.
Ви навчитеся
- Використовувати CSS Grid під час верстки ваших вебсторінок.
- Використовувати Figma для побудови шаблонів і подальшої роботи.
- Створювати свої стилі.
- Створювати адаптивні макети за допомогою медіазапитів.
- Використовувати Grid для створення різних макетів для різних пристроїв та екранів.
- Розуміти особливості та вміти застосовувати Grid colums (стовпці) та Grid rows (рядки).
- Розуміти та застосовувати на практиці можливості об'єднання комірок та іменування ліній.
- Застосовувати функції repeat, minmax, fit-content та інші, що дозволяють створювати складні та гнучкі сітки.
- Використовувати фракційні одиниці (fr) та автоматичні розміщення (auto-fit та auto-fill).
- Застосовувати grid-template-areas та розбивати грід на grid-areas.
- Вирівнювати комірки гріду за допомогою правил justify-items та align-items. Вирівнювати контент у комірках.
- Використовувати значення max-content та min-content.
- Впорядковувати елементи та керувати відображенням елементів у блоках.
- Обмежувати області переміщення блоків із абсолютним позиціюванням.
- Використовувати властивості flex та grid. Вміти перетворювати флекс блоки на грід.
- Розуміти автовластивості грід, і вміти контролювати побудову гріду.
- Вміти поєднувати медіазапити та правила грідблоків.
- Створювати готовий зверстаний проєкт та деплоїти його на github.
- 3 год 46 хв
- 02.07.2023
- 10 з 10
- 02.07.2023
- українська
Що входить до курсу
×
Ви дійсно бажаєте відкрити доступ до тестування за курсом Верстка на Grid на 40 днів?
Ціль уроку – познайомитися з описом курсу, дізнатися, що таке Grid в CSS, попрацювати з онлайн IDE Codeopen, налаштувати робоче оточення та розглянути приклади роботи з Grid container.
Ціль уроку – ознайомитися з Grid Generator, розглянути властивість grid-template-columns, дізнатися про нову одиницю виміру fr (fraction - доля), на практиці засвоїти поєднання та змішування різних одиниць виміру, таких як гнучкі та фіксовані, а також навчитись задавати треки за допомогою repeat.
Ціль уроку – зрозуміти різницю між явним і неявним Grid, дізнатися про Grid-клітинки, Grid-області, Gap (проміжки), вивчити властивості minmax, grid-auto-rows, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column.
Ціль уроку – дізнатися про підгріди, навчитися керувати порядком відображення за допомогою z-index, зрозуміти різницю між двовимірним (Grid) та одновимірним позиціюванням (Flex), вивчити властивості auto-fill і auto-fit для автозаповнення треків, та знати про display сontents.
Ціль уроку – зрозуміти як правильно позиціонувати елементи в сітці Grid за допомогою направляючих ліній, на практиці засвоїти grid-template-columns та grid-template-rows, grid-column та grid-row, grid-area та використання span в Grid.
Ціль уроку – вивчити шаблони в Grid, навчитись позиціонувати елементи в сітці за допомогою імен (alias), перевизначати контент за допомогою медіавиразів чи додаткових класів, на практиці засвоїти такі властивості як: grid-template-areas, grid-template / grid.
Ціль уроку – дізнатись про те, як правильно визначати назви ліній в Grid, а також як працювати з неявними областями сітки з іменованих ліній. На практиці засвоїти repeat при визначенні ліній Grid.
Ціль уроку – вивчити, як працює автоматичне розміщення елементів, який дефолтний розмір рядків, коли не достатньо місця для контенту, дізнатися про заповнення прогалин та анонімні елементи сітки Grid.
Ціль уроку – вивчити техніки вирівнювання блоків у CSS-розмітці Grid, зокрема осей Grid Layout, режимів запису в сіткових макетах, фізичних та логічних значень у вирівнюванні макета сітки, вирівнювання елементів на блоці або стовпці по осі, вирівнювання елементів на вбудованій або рядковій осі, центрування елементу у області Grid, вирівнювання доріжок сітки на осі блоку або стовпця, вирівнювання та auto margins.
Ціль уроку – створення власного проєкту, на основі отриманих знань з курсу та деплой проєкту на github pages і хостинг Netlify.
Доступ до повного курсу з навчальними матеріалами та тестуванням на 30 днів за 14,99 USD
Придбати