#4. Адаптивная верстка сайта под WordPress на Bootstrap 4 + Sass | Реальный заказ.

Получите PSD макет и все материалы к нему по ссылке:
http://glo.academy/wp-playlist

Адаптивная верстка сайта — сегодня мы рассмотрим эту тему на практике. Вы узнаете как работать с медиа запросами.

Посмотрите полный плейлист верстки под WordPress на Bootstrap 4 + Sass + Flexbox CSS с самого начала:
https://www.youtube.com/playlist?list=PL3LQJkGQtzc5nqQ4G_QI-GfXA3Oklt9Z2

1:33 Как выглядит макет для мобильных устройств
2:37 Переходим к адаптиву сайта
2:48 Создаем файл _media.sass
3:02 Подключаем _media.sass к сайту через @import
3:42 В браузере открываем Developers Tool (f12) для проверки @media запросов
4:38 Проверяем @media запрос (как работают @media запросы?)
5:53 Скачиваем иконки с http://fontello.com/
7:19 Исправляем url путь до иконок
7:36 Добавляем в верстку кнопку с иконкой «меню»
11:11 Делаем выпающее меню при нажатии на кпопку «.top-nav_btn»
14:42 Пишим скрипт для выпадющего меню
18:08 Делаем выпадающий сайдбар («Категории»)
24:35 Пишим скрипт для выпадающего сайдбара («Категории»)
25:38 Скриваем рандомные обьекты (.left-sidebar_object)
26:15 Настраиваем слайдер
28:21 Делаем футер адаптивным
30:25 Докручиваем адаптив
34:04 Пишим media запрос для 768px-991px

Ссылка на сайт Bootstrap 4:
http://getbootstrap.com
Сервис для работы с макетами Avocode:
https://avocode.com
Справочник HTML/CSS на русском языке:
http://webref.ru
Документация Sass на русском
https://sass-scss.ru
Документация Sass на анлглийском
http://sass-lang.com
Сервис для составления своих шрифтовых иконок
http://fontello.com
Крутой слайдер на jQuery — Slick Slider
http://kenwheeler.github.io/slick/

Получить нужные материалы для любого веб-разработчика — https://taplink.cc/glo_web_academy

Получить консультацию куратора — http://bit.ly/2Ym5SqS

Связаться с автором: https://vk.com/aislam23 telegram: https://t.me/aislam23
Мой блог: https://vk.com/islamov_blog

Больше контента в нашей группе Вконтакте
https://vk.com/glo_academy
Присоединяйтесь к нашему сообществу Discord
https://discord.gg/e8AtwSu

Мой канал в telegram «Лысый из браузера»
https://tele.click/baldfrombrowser

Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
http://vk.me/glo_academy
————
Я использую хостинг Link Host с 2014 года
https://link-host.net/billing/pl.php?1786

Оцените запись
( Пока оценок нет )
Поделитесь с друзьями
Glo Academy
Добавить комментарий