Проект: Использование Twitter Bootstrap (с Newsweek)
В этом проекте у вас будет возможность попробовать в деле фреймворк Twitter Bootstrap при построении сайта, который на самом деле его использует - Newsweek.
Шаги к победе
Обратите внимание: Как обычно, игнорируйте любую рекламу, комментарии и интерактивные элементы (которые используют Javascript). Если вы действительно хотите использовать именно эти иконки, попробуйте сделать скриншот и сохранить его как файл изображения.
- Перейдите на newsweek.com и осмотритесь там.
- Следуя инструкциям в проекте домашняя страница Google, создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название).
- Создайте новый HTML документ.
- Подумайте обо всех элементах на странице и как они сгруппированы.
- Добавьте к вашему проекту Bootstrap, следуя инструкциям на GetBootstrap.com. Используйте примеры с этой страницы как шаблоны для того, чтобы организовать элементы на вашей странице.
- Сделайте разметку базовой структуры страницы с использованием пустых
<div>элементов подходящего размера, которым позиционирование задано с помощью подходящими Bootstrap классами. - Задайте верхний заголовок и навигационную панель.
- Продвигаясь внизу по странице, заполните ее размещением дополнительных разделов.
- Попробуйте изменить размер браузера, чтобы увидеть, имитируется ли поведение настоящей страницы Newsweek.
- Отправьте ваше решение на Github.
Решения других студентов
- Решение Леонарда Лабита | Просмотр в браузере
- Решение Артура Джаника | Просмотр в браузере
- Решение Фрэнка Пилена | Просмотр в браузере
- Решение AtActionPark | Просмотр в браузере