CSS: Адаптивность сайта

Включено в курс

Чему вы научитесь

• Проверять адаптивность сайта, используя онлайн-инструменты.
• Использовать единицу измерения проценты для создания гибких макетов.
• Работать с Flex при создании адаптивных макетов.
• Создавать медиазапросы, позволяющие использовать стили для разных разрешений экранов.
• Работать с различными типами устройств и создавать стили под них.

Описание

На этом курсе вы изучите адаптивность страниц. Вы узнаете больше о способах адаптировать сайт под разные устройства. В итоге вы научитесь использовать резиновую верстку, флекс и медиазапросы. Адаптивность пригодится, если вы решите создать свою страницу, так как пользователи смотрят на страницы с разных устройств. Знания из этого курса помогают программистам создавать сайты под разные устройства и разрешения экранов.

Курс по адаптивности расширяет знания по позиционированию элементов: их ширина, переносы на разных разрешениях экрана. Для изучения курса понадобится умение верстать контент и позиционировать его на странице. Этим навыкам посвящены три курса:

1. Основы верстки контента
2. CSS: Позиционирование элементов
3. CSS: Основы Flex

Программа курса

• 1

  Введение

  Знакомимся с темой и целями курса

  теория
• 2

  Проверка адаптивности сайта

  Выясняем, как проверить ваш сайт на различных устройствах

  теория
• 3

  Viewport

  Выясняем, что такое мета-тег viewport и как он помогает в адаптивности

  теория

  тесты

• 4

  Гибкие элементы

  Познакомимся с версткой с использованием процентов

  теория

  тесты

  упражнение

• 5

  Flex

  Разбираемся в возможностях Flex при создании адаптивных макетов

  теория

  тесты

  упражнение

• 6

  Медиазапросы

  Знакомимся с одним из самых мощных инструментов для создания адаптивных сайтов — Media Queries

  теория

  тесты

  упражнение

• 7

  Медиазапросы и другие устройства

  Выясняем, для каких устройств возможно применять свои стили

  теория

  тесты

  упражнение

• 8

  Самостоятельная работа

  Дополнительные задания, которые позволяют закрепить полученную теорию
• 9

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

Отзывы

Андрей Андреев 02 мая 2020

https://ru.hexlet.io/code_reviews/259320 автор снимаю шляпу перед твоим решением, 2 вечера придумывал, а оно вон как все оказывается было просто...