СТВОРЕННЯ АДАПТИВНОГО САЙТУ
Навчіться впроваджувати адаптивну верстку сайту, щоб покращити користувацький досвід і оптимізувати власну роботу
ЛЕКТОРКА:
Катерина Горуля
Software Engineer у
MacPaw
Про гайд
- Формат:
відеокурс
- Тривалість:
5 занять
- Мова викладання:
українська
Короткий відеокурс, який познайомить із концептом адаптивності й навчить оптимізувати вебсайти під різні пристрої так, щоб не страждав UX/UI-дизайн і функціонал. Ви працюватимете з такими інструментами, як-от Fluid Grid, CSS Media Query та Lighthouse.
Ваші результати:
Програма
-
01 заняття
Інтро в адаптивну верстку
- дізнаєтеся, що таке адаптивний сайт та адаптивна верстка
- зрозумієте, навіщо потрібно робити сайти адаптивними
- з’ясуєте, як досягати адаптивності
- розглянете види верстки
- ознайомитеся з концепцією Fluid Grid
-
02 заняття
Основи адаптивної верстки
- ознайомитеся з основними принципами адаптивної верстки: незмінний контент, послідовність елементів, клікабельність тощо
- дізнаєтеся про інструменти, які застосовують для створення адаптивних сайтів
- створите базовий HTML&CSS-макет з використанням Fluid Grid
-
03 заняття
Використання відносних величин та гнучкість зображень
- ознайомитеся з поняттям відносних величин і зрозумієте, для чого їх застосовувати
- навчитеся використовувати величини EM, REM, %
- дізнаєтеся, як робити картинки гнучкими та адаптивними
- зрозумієте, чому тип зображення впливає на швидкість завантаження сторінки та адаптивність
-
04 заняття
Знайомство із CSS Media Query
- ознайомитеся з технікою CSS Media Query та її синтаксисом
- дізнаєтеся, як зручно та ефективно тестувати адаптивність у браузері
- навчитеся застосовувати Media Query на практиці
- дізнаєтеся, що таке контрольні точки (breakpoints), як ними користуватись і як їх визначати
-
05 заняття
Оптимізація перфомансу
- зрозумієте, для чого потрібна оптимізація перформансу
- дізнаєтеся, що картинки мають різну роздільну здатність та вагу, що впливає на швидкість завантаження
- навчитеся вказувати, які саме картинки завантажувати
- ознайомитеся з підходом mobile first
- навчитеся використовувати Lighthouse для покращення перформансу сайту й виявлення помилок
ВАРТІСТЬ
850 грн
• Інсайти й експертиза від досвідченого практика
• Фінальний тест на перевірку знань
• Доступ до відеоуроків залишається у вас назавжди
Суміжні курси
7+ років досвіду в наданні розробки у сфері Frontend/Backend
Курс, який допоможе опанувати платформу Node.js та основні фреймворки типу Express.js і Jest, щоб створювати кросплатформні застосунки.
Product Manager у Bolt
Практичний курс, на якому ви дізнаєтеся, як формувати гіпотези на основі даних, валідувати ідеї і прооводити А/В-тестування.
Senior Java Developer в Luxoft
Короткий відеокурс, який надасть базових знань та практичних навичок роботи з Figma, щоб перетворювати дизайн сайту на код і взаємодіяти з дизайнерами.