СОЗДАНИЕ АДАПТИВНОГО САЙТА
Научитесь внедрять адаптивную верстку сайта, чтобы улучшить пользовательский опыт и оптимизировать работу
ЛЕКТОРКА:
Екатерина Горуля
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, чтобы превращать дизайн сайта в код и взаимодействовать с дизайнерами.