Верстка сайта под мобильные устройства

верстка сайта под мобильные устройства

От автора: Интересуешься версткой сайта под мобильные устройства? Скачай бесплатный видеокурс по основам адаптивной верстки сайта. Уже сегодня ты создашь свой первый сайт, который будет красиво отображаться на ЛЮБОМ устройстве. Узнай основные секреты самого перспективного направления сайтостроения. Пошаговые уроки в наглядном формате видео. Выполняй адаптивную верстку под заказ и зарабатывай приличные деньги.

Урок 1. Введение

Тема: адаптивная верстка

Время ролика: 00:11:02

Cложность: легкая

Автор: Бернацкий Андрей

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

Насколько важно сегодня адаптировать свои сайты под различные устройства? Об этом поговорим в данном уроке.

Рассмотрим список наиболее популярных разрешений, под которые следует адаптировать сайт.

Урок 2. Медиа-запросы

Тема: адаптивная верстка

Время ролика: 00:33:22

Cложность: легкая

Автор: Бернацкий Андрей

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

Медиазапросы — это отличный инструментдля создания веб сайтов, оптимизированных для отображения на мобильных устройствах.

Урок 3. Адаптивные изображения

Тема: адаптивная верстка

Время ролика: 00:17:41

Cложность: легкая

Автор: Бернацкий Андрей

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

Урок 4. Практический пример. Часть 1

Тема: адаптивная верстка

Время ролика: 00:13:55

Cложность: легкая

Автор: Бернацкий Андрей

В данном уроке мы выполним практический пример верстки учебного макета несложной структуры. Создадим разметку оптимальную для дальнейшей адаптации под мобильные устройства.

Урок 5. Практический пример. Часть 2

Тема: адаптивная верстка

Время ролика: 00:22:14

Cложность: легкая

Автор: Бернацкий Андрей

Во втором уроке по верстке учебного макета, мы добьемся красивого отображения макета на всех мобильных устройствах. Используя медиазапросы, мы адаптируем нашу верстку к планшетам и смартфонам. Улучшим верстку, чтобы она не зависела от «контрольных точек» в медиазапросах. Это будет гарантировать нам хорошее отображение верстки в различных устройствах, не зависимо от их разрешений.

получить мини-курс

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (12)

  1. Сергей

    Здравствуйте.Ваши уроки скачиваю.Но почему нет на сайте регистрации.Забыли?

  2. Veronica

    Описание уроков очень интересное. Жаль, что самих уроков нет. (

  3. Galina

    Статья для меня интесна, меня очень волнует вопрос: «Как адаптировать уже созданные сайты, например, на вордпресс?» Создавать заново не хотелось бы.
    Если будете отвечать, то немного попроще, объясните, пожалуйста, из-за возраста не всё понимаю хорошо. Может у вас есть уроки по этой теме? Спасибо.

  4. Андрей

    Интересные уроки, главное все доходчиво и понятно! Адаптивная верстка работает.
    Хочу задать вопрос, нигде не могу найти информацию. При установке скрипта jquery перестает работать выпадающее меню подрубрик, может подскажете, что можно сделать в этом случае?

    • Андрей Кудлай

      Возможно происходит конфликт скриптов, возможны и другие варианты. Чтобы ответить точнее — нужно смотреть сайт.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree