Урок 6: Адаптивная вёрстка - практика в примерах фотогалереи, колонки, меню

План:

  • Адаптивная вёрстка
  • Адаптивная галерея
  • Адаптивные колонки
  • Адаптивное меню
Доступ к видео-уроку, а так же к домашним заданиям и дополнительному материалу откроется после оплаты за урок или курс.

Описание:

Без практики теория бесполезна. Поэтому в данном уроке мы рассмотрим следующие вопросы:

- Как грамотно оформить адаптивную вёрстку галереи (фотогалереи). Как сделать так, чтобы на странице выводились 3-4 фотографии, а для маленького размера уже 2, и для самых маленьких лишь одна фотка на всю страницу, а не 200-250px шириной.

- Как оформить адаптивную вёрстку боковой панели на сайте так, чтобы блок располагался слева (или справа), а при маленьком разрешении перемещался в верхнюю часть экрана или нижнюю.

- Как оформить адаптивную вёрстку меню на сайте, то есть не простую модернизацию размеров или перемещений, но и скрытие меню с кнопкой "развернуть меню" для iphone, ipad, android и других мобильных устройств и планшетов с маленьким разрешением. Зачем это делать? Всё очень просто, меню просто не поместится на экранах, поэтому придумали вот такое современное решение.

Практикуясь с этими элементами можно легко применить и к другим задачам те же подходы.
Главная БАЗОВЫЙ КУРС ПЕРВЫЙ УРОВЕНЬ программирования ВТОРОЙ УРОВЕНЬ верстки ВТОРОЙ УРОВЕНЬ программирования Начать обучение Запуск проекта Мелкие трюки Проверь свои знания Задачи по PHP MySQL Блог Отзывы