Відеокурс Верстка на Grid українською мовою - відеоуроки програмування | ITVDN
ITVDN: курси програмування
Відеокурси з
програмування

Замовити дзвінок

Вибери свою IT спеціальність

Підписка

Замовити дзвінок

+38 099 757 27 82

Про курс

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
  • Оновлено: 02.07.2023
  • Мова: українська

Що входить до курсу

  • 10 відео уроків
  • Домашні завдання
  • Тестування
  • Сертифікат
  • Перевірка ДЗ

×

Ви відкрили доступ до тесту! Пройти тест

Ви дійсно бажаєте відкрити доступ до тестування за курсом Верстка на 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.

Читати далі...
ПОКАЗАТИ ВСЕ

Купуй передплатуз доступом до всіх курсів та сервісів

Бібліотека сучасних IT знань у зручному форматі

Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

Стартовий
  • Усі відеокурси на 3 місяці
  • Тестування з 10 курсів
  • Перевірка 5 домашніх завдань
  • Консультація з тренером 30 хв
48.00 $
59.99 $
Придбати
Акція
Базовий
  • Усі відеокурси на 6 місяців
  • Тестування з 16 курсів
  • Перевірка 10 домашніх завдань
  • Консультація з тренером 60 хв
54.00 $
89.99 $
Придбати
Акція
Преміум
  • Усі відеокурси на 12 місяців
  • Тестування з 24 курсів
  • Перевірка 20 домашніх завдань
  • Консультація з тренером 120 хв
85.00 $
169.99 $
Придбати
Акція
коментарі та обговорення
Notification success
Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.