Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Адаптивная вёрстка — неотъемлемая часть современной разработки. При создании адаптивной вёрстки мы меняем дизайн страницы в зависимости от поведения пользователя, размеров экрана, ориентации устройства.

Ранее для создания мобильной версии сайта использовали отдельный шаблон, который зачастую подгружался с поддомена. Данное решение было сложным с точки зрения поддержки сайта, ведь для создания/удаления новых блоков приходилось выполнять двойную работу: для основного сайта и для его мобильной версии. В настоящее время мы можем существенно экономить время и не отдавать пользователю новый макет, а изменять текущий.

В этом курсе будут рассмотрены стандартные практики по созданию адаптивных сайтов:

гибкие элементы;
использование возможностей Flex;
использование media-запросов CSS;
создание контрольных точек (breakpoint).

Адаптивная вёрстка

В этом введении сразу хочется расставить некие акценты, с которыми нам будет проще в изучении темы. Разделение понятий адаптивной и резиновой вёрстки остались в прошлом, когда в моде были разделения по конкретным разрешениям экрана и полное изменение CSS в зависимости от этого. Многообразие различных устройств в современном мире слишком большое, чтобы можно было выбрать 3-5 конкретных разрешений и верстать под них. Необходимо брать максимально много из всех подходов, чтобы, в конечном итоге, получить макет, который будет отображаться хорошо на любых устройствах при любых разрешениях.

В рамках курса все подходы будут сложены в одно понятие — адаптивная вёрстка.

Практика

Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.

Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях viewport.

Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests_/_image_snapshots__.

Инструменты разработчика

Каждый современный браузер имеет специальный инструментарий разработчика. В браузере Google Chrome его можно вызвать, используя контекстное меню, в котором есть пункт Inspect, либо воспользоваться комбинацией Ctrl+ Shift+I (Command+Option+I на Маке). В этой панели нас интересует кнопка Toggle Device Toolbar. Это вызовет специальный вид браузера, внутри которого можно указывать разрешение экрана и проверять вёрстку сайта.

Как подготовиться к этому курсу

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужен базовый план

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

Получить доступ

130

курсов

1000

упражнений

2000+

часов теории

3200

тестов