Про курс
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 хв
- 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.
Доступ до повного курсу з навчальними матеріалами та тестуванням на 30 днів за 14,99 USD
Придбати
Запитання і відповіді
Онлайн курси мають низку переваг перед офлайн форматом:
- Незалежність від локації. Онлайн дозволяє навчатися де завгодно.
- Збереження часу та грошей на дорогу. Ви економите час та гроші з поїздок на курси та назад.
- Онлайн курси дешевші. Немає потреби в приміщенні та ноутбуках для студентів, тому вартість нижча
- Комфортний темп навчання, постійний доступ до інформації. Навчання у вашому темпі будь-коли і будь-де 24/7. Також є доступ до записаних уроків, чого немає в офлайн форматі.
На ITVDN є 2 формати навчання: Live Online та відео курси. Ціна навчання залежить від обраного вами способу навчання.
Якщо ви хочете навчатися самостійно у форматі відео курсів, вартість навчання складе в середньому 10-15 USD на місяць в залежності від обраного вами пакету підписки.
Live Online – це онлайн навчання з тренером у групах разом із іншими студентами. Навчання у даному форматі коштує в середньому 6-7 USD за одну годину.
Залежить від того, скільки уваги програмуванню ви виділятимете щоденно, яка саме це мова і який у вас досвід кодингу. Середній час на опанування однієї мови за умови регулярних занять хоча б 2 год/день:
- новачки – від 3 до 6 місяців;
- ті, хто мають базові знання з іншої мови – від 1 до 3 місяців;
- професійні програмісти – до 1 місяця.
Найкращий варіант інвестиції часу – 8 годин щоденно (20% теорії + 80% практики). Більше практики – швидше опанування програмування.
Для опанування ІТ-спеціальності треба виділити не менше 500 годин, з яких близько 100 годин – на перегляд відео уроків або відвідування онлайн занять із ментором, а 400 – на виконання практичних завдань за пройденими темами.
В залежності від того, скільки часу ви готові виділяти на навчання в день, ви зможете пройти програму за 3-8 місяців. Якщо у вас є певна база знань з ІТ, кількість необхідного часу буде меншою.
Також тривалість навчання залежить від обраної вами спеціальності, оскільки набір технологій, які ви маєте вивчити, буде різним.
Починати варто з тих, які містять в назві слово “Стартовий”. Такі курси мають вступний матеріал для знайомства з мовою або технологією.
Якщо ж ви плануєте навчатися за конкретною спеціальністю у форматі відео курсів, перейдіть на сторінку спеціальності і прокрутіть до заголовку “Відео курси за спеціальністю …”. Нижче буде список відео курсів, котрі відсортовано в порядку необхідності вивчення.
Ще нижче ви знайдете Roadmap зі спеціальності – путівник, на якому зображені відео курси у вигляді дерева, що також вас легко зорієнтує у послідовності проходження курсів.
Якщо ви обираєте Live Online навчання з тренером, все дуже просто:
- відвідуйте всі заняття, вчасно виконуйте д/з;
- додатково дивіться відео уроки на ITVDN;
- після кожного уроку проходьте коротке тестування;
- практикуйтеся в Інтерактивному практикумі;
- спілкуйтеся з одногрупниками в ході вирішення д/з, задавайте питання ментору на уроках та поза ними;
- в кінці кожного курсу складайте екзамен на TestProvider (та отримуйте Сертифікати);
- в кінці всього навчання проходьте екзамен зі спеціальності і отримайте Диплом.
Ми маємо спеціальний розділ – “Вакансії”, котрий допомагає нашим студентам шукати першу роботу в ІТ. Детальніше про можливості та призначення розділу за посиланням.
А для тих, хто навчається онлайн з ментором, у нас додатково передбачена індивідуальна допомога HR-фахівця щодо підготовки до працевлаштування з першого дня навчання і до отримання першого job-оферу. Вона включає в себе допомогу в оформленні соцмереж, підготовці резюме, проведення пробної співбесіди, надання порад щодо пошуку роботи та самопрезентації тощо.
На жаль, дана послуга на ITVDN не передбачена, однак ви можете замовити індивідуальну консультацію з нашим ментором. Деталі ви знайдете за посиланням.
На ITVDN відсутні курси для дітей, тому комфортний вік для початку навчання за нашими матеріалами – від 14 років.
Ніяких вимог до вашого рівня англійської ми не висуваємо, оскільки всі навчальні матеріали йдуть російською або українською мовами. При цьому базові знання англійської будуть корисні для комфортного пошуку інформації в гуглі, читання документацій в інтернеті тощо.
На ITVDN можна пройти повне навчання з нуля до спеціаліста рівня Trainee/Junior. Якщо ви вже практикуючий розробник, наші відео курси допоможуть поглибити ваші знання до рівня Middle.
Після закінчення дії вашої підписки доступ до відео курсів, на жаль, буде закрито. Однак ви зможете користуватися тими навчальними матеріалами, які ви завантажили на свій девайс під час навчання.
Ні, знижки не додаються.
Відгуки наших студентів
Відгуки в DOU
4,9/5 - 200 відгуків
Відгуки в Facebook
5,0/5 - 707 відгуків
Відгуки в Google
4,9/5 - 836 відгуків