Проект: Адаптивный дизайн (с The Next Web)
В этом проекте у вас будет возможность построить адаптивный сайт. Мы будет созадвать клон The Next Web, технически-ориентированный журнал, который использует медиа-запросы для изящного изменения своего сайта при изменении размера окна.
Весь процесс будет похож на то, что мы уже делали раньше. На этом этапе у вас уже должны намного быстрее получаться создание макета сайта и позиционирование элементов, чем тогда, когда вы только начинали.
Шаги к победе
Как обычно, не беспокойтесь о мелких деталях вроде кнопок "поделиться в соцсетях", комментариев или Javascript-виджетов, таких как бесконечный скрол
- Посетите The Next Web и покопайтесь в их домашней странице. Поиграйте с изменением ширины окна и посмотрите, как при этом меняется сайт (например, когда исчезает боковая панель).
- Следуя инструкциям в проекте домашняя страница Google, создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название).
- Создайте новый HTML документ.
- Подумайте обо всех элементах на странице и как они сгруппированы.
- Попробуйте изучить, какие ширины браузера являются "пограничными значениями" при изменении свойств элементов (например, исчезновение боковой панели). Составьте план, чтобы понимать, какие элементы должны изменяться и при каких ширинах это должно происходить.
- Сделайте разметку базовой структуры страницы с использованием пустых
<div>элементов подходящего размера, которым нужно задать подходящее позиционирование. Возможно, вы захотите задать им различные фоновые цвета, чтобы было проще их различать. Не забывайте использовать иструменты разработчика (Developer Tools) вашего браузера (кликните правой кнопкой мыши на странице и выберите «Inspect Element (Просмотр кода элемента)». - А теперь - перед тем, как заполнять эти div-ы - добавьте медиа-запросы и атрибуты позиционирования/свойства float, которые необходимы для выстраивания правильной структуры при изменении размера браузера.
- Когда макет страницы будет вести себя так, как надо, заполните контейнеры и примените стили, чтобы все выглядело так, как на оригинальной странице. Не углубляйтесь в детали - нормально, если не будет точного сходства.
- Дважды проверьте, что все элементы ведут себя так же, как на оригинальном сайте, при изменении размера браузера.
- Отправьте ваше решение на Github.
Решения других студентов
- Решение Дональда | Просмотр в браузере
- Решение Леонарда Лабита | Просмотр в браузере
- Решение Артура Джаника | Просмотр в браузере
- Решение AyeSea | Просмотр в браузере