Проект: Вставка изображений и видео (с YouTube)

Не забывайте использовать Git для сохранения ваших проектов!

В курсе по основам веб-разработки вы создавали домашнюю страницу Google. Студенты постоянно сообщают, что проект был интересным, но при этом намного сложнее, чем выглядел. В этом курсе вы создадите столько веб-страниц, что будете смеяться над чем-то таким же простым, как Google.com.

Наш первый проект потребует от вас достать ваши новые знания о том, как работать с медиа, при построении страницы видеоплеера YouTube (в этом видео автор проекта theodinproject.com рассказывает, как внести свой вклад в опенсорс).

Целью здесь является не создание точной копии страницы YouTube, а сфокусироваться на том, чтобы показать медиа элементы. Это означает две вещи - вставить видеоплеер YouTube на страницу так, чтобы он работал, и показать миниатюрные изображения по правой стороне.

Как далеко вы продвинетесь дальше в плане стилизации - зависит от вас, некоторые из вас чувствуют себя уже более уверенно с CSS, чем другие, поэтому покажите себя.

Некоторые элементы на странице YouTube созданы при помощи Javascript, вам не стоит не беспокоиться о них - собственно, все, что изменяет страницу по клику, подключено с использованием Javascript. Примером может быть ссылка "Еще" под описанием, которая динамически раскрывается, чтобы показать больше. И еще раз, не беспокойтесь об этих динамических элементах!

Также не беспокойтесь и о том, как правильно сделать форму для комментариев... Ваша задача - сделать так, чтобы страница выглядела похожей и показывала видео.

Шаги к победе

  1. Следуйте инструкциям в начале проекта домашней страницы Google, чтобы настроить Github репозиторий для этого проекта (конечно же, нужно будет поменять название).
  2. Создайте пустой HTML документ.
  3. Продумайте план - какие секции на странице должны быть сгруппированы (например, навигационное меню, видео, боковое меню).
  4. Создайте пустые <div> тэги, чтобы заключить в них эти секции.
  5. Используйте базовые CSS, чтобы задать им размеры и правильно расположить их на странице. Может оказаться полезным задать контейнерам разные фоновые цвета, чтобы можно было их видеть. Не забывайте об использовании инструментов разработчика в вашем браузере (клик правой кнопкой мыши на странице, "просмотр кода элемента"). 6.А теперь давайте начнем заполнение этих контейнеров контентом с создания навигационного меню.
  6. Посмотрите это видео о том, как вставить YouTube видео на вебстраницу.
  7. Вставьте любое YouTube видео на вашу страницу.
  8. Далее, постройте боковое меню, где показываются привью рекомендованных видео. Очевидно, не стоит беспокоиться о том, как сгенерировать эти привью... Просто возьмите несколько картинок подходящего размера и вставьте их.
  9. Далее, закончите заполнением некоторых элементов под видео - название, описание, количество просмотров. Проигнорируйте иконки (многие из них создаются с использованием спрайтов или более продвинутых техник, поэтому вы не сможете просто скопировать их).
  10. Отправьте ваше решение на Github.

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

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