Проект: Позиционирование элементов (вместе с New York Times)
New York Times всегда была лидером в экспериментировании с включением мультимедийного контента в традиционные статьи. При этом возникают все виды интересных вопросов о позиционировании.
В этом проекте вашим заданием будет скопировать эту статью из New York Times (откройте ее в режиме "инкогнито" без куков, чтобы просмотреть, если вы превысили свой месячный лимит). Обратите внимание на то, как расположен раздел с названием "The Theory of Inflation" (необходимо расширить просмотровое окно, чтобы его было видно).
Шаги к победе
Обратите внимание: Как обычно, игнорируйте любую рекламу, комментарии и интерактивные элементы (которые используют Javascript) и не беспокойтесь о том, что происходит, когда вы меняете ширину страницы (они используют некоторые медиа-запросы, чтобы упорядочивать элементы). Сфокусируйтесь на том, чтобы сделать что-то похожее.
1.Перейдите на вышеупомянутую страницу NYT и осмотритесь.
- Следуя инструкциям в проекте "домашняя страница Google", создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название)
- Создайте новый HTML документ.
- Подумайте обо всех элементах на странице и как они сгруппированы.
- Сделайте разметку базовой структуры страницы с использованием пустых
<div>элементов подходящего размера, которые нужно задать подходящее позиционирование. Возможно, вы захотите задать им различные фоновые цвета, чтобы было проще их различать. Не забывайте использовать иструменты разработчика (Developer Tools) вашего браузера (кликните правой кнопкой мыши на странице и выберите «Inspect Element (Просмотр кода элемента)». - Настройте верхнюю навигационную панель (и снова, не беспокойтесь о том, чтобы сделать его изменяемым при прокручивании страницы вниз). Как сделать так, чтобы она была закреплена в верхней части страницы при прокручивании вниз?
- Разместите и заполните дополнительные разделы. Не беспокойтесь о заключении всех текстовых параграфов в тэги
<p>. - Отправьте ваше решение на Github.
Решения других студентов
- Решение Shouvik Roy | View in browser
- Решение Meher Chandan | View in browser
- Решение Artur Janik | View in browser
- Решение Ryan Jordan | View in browser