Проект: Использование Twitter Bootstrap (с Newsweek)

В этом проекте у вас будет возможность попробовать в деле фреймворк Twitter Bootstrap при построении сайта, который на самом деле его использует - Newsweek.

Шаги к победе

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

  1. Перейдите на newsweek.com и осмотритесь там.
  2. Следуя инструкциям в проекте домашняя страница Google, создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название).
  3. Создайте новый HTML документ.
  4. Подумайте обо всех элементах на странице и как они сгруппированы.
  5. Добавьте к вашему проекту Bootstrap, следуя инструкциям на GetBootstrap.com. Используйте примеры с этой страницы как шаблоны для того, чтобы организовать элементы на вашей странице.
  6. Сделайте разметку базовой структуры страницы с использованием пустых <div> элементов подходящего размера, которым позиционирование задано с помощью подходящими Bootstrap классами.
  7. Задайте верхний заголовок и навигационную панель.
  8. Продвигаясь внизу по странице, заполните ее размещением дополнительных разделов.
  9. Попробуйте изменить размер браузера, чтобы увидеть, имитируется ли поведение настоящей страницы Newsweek.
  10. Отправьте ваше решение на Github.

Решения других студентов

Поделиться уроком: