Адаптивная вёрстка — неотъемлемая часть современной разработки. При создании адаптивной вёрстки мы меняем дизайн страницы в зависимости от поведения пользователя, размеров экрана, ориентации устройства.
Ранее для создания мобильной версии сайта использовали отдельный шаблон, который зачастую подгружался с поддомена. Данное решение было сложным с точки зрения поддержки сайта, ведь для создания/удаления новых блоков приходилось выполнять двойную работу: для основного сайта и для его мобильной версии. В настоящее время мы можем существенно экономить время и не отдавать пользователю новый макет, а изменять текущий.
В этом курсе будут рассмотрены стандартные практики по созданию адаптивных сайтов:
В этом введении сразу хочется расставить некие акценты, с которыми нам будет проще в изучении темы. Разделение понятий адаптивной и резиновой вёрстки остались в прошлом, когда в моде были разделения по конкретным разрешениям экрана и полное изменение CSS в зависимости от этого. Многообразие различных устройств в современном мире слишком большое, чтобы можно было выбрать 3-5 конкретных разрешений и верстать под них. Необходимо брать максимально много из всех подходов, чтобы, в конечном итоге, получить макет, который будет отображаться хорошо на любых устройствах при любых разрешениях.
В рамках курса все подходы будут сложены в одно понятие — адаптивная вёрстка.
Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.
Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях viewport.
Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests_/_image_snapshots__.
Каждый современный браузер имеет специальный инструментарий разработчика. В браузере Google Chrome его можно вызвать, используя контекстное меню, в котором есть пункт Inspect, либо воспользоваться комбинацией Ctrl+ Shift+I (Command+Option+I на Маке). В этой панели нас интересует кнопка Toggle Device Toolbar. Это вызовет специальный вид браузера, внутри которого можно указывать разрешение экрана и проверять вёрстку сайта.
Курс по адаптивности расширяет знания по позиционированию элементов: их ширина, переносы на разных разрешениях экрана. Для изучения курса понадобится умение верстать контент и позиционировать его на странице. Этим навыкам посвящены три курса:
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт