Положите на него птицу

Обучение кодированию адаптивного веб-сайта с нуля с помощью Portlandia.

Как дизайнер, я хотел научиться программировать базовые веб-сайты по нескольким ключевым причинам:

  1. Как веб-дизайнер, я считаю важным понимать, как веб-сайты работают «внутри». Точно так же, как я ожидал, что кинорежиссер должен знать, как работает камера, а модельер должен знать, как шить, мне нужно было изучить основы внешнего кодирования.
  2. Изучите базовый синтаксис, чтобы лучше общаться с разработчиками в будущих проектах.
  3. Изучите достаточно HTML и CSS, чтобы иметь возможность создавать легкие прототипы для пользовательского тестирования и продуктовых спринтов.

Я прошел курс начальной подготовки на General Assembly в Сан-Франциско, поэтому хотел поделиться некоторым прогрессом. В феврале 2016 года я создал с нуля веб-сайт на тему «Портландия», размещенный на Github, чтобы отточить свои новые навыки работы с HTML5, CSS и JavaScript. Посмотри:

Представляем мой первый веб-сайт —Put A Bird On It

Для контекста: «Портландия» — это телешоу с Кэрри Браунштейн и Фредом Армисеном в главных ролях. Если вы еще не видели пародию «Наденьте птичку», приготовьтесь к 1 минуте и 40 секундам золотой комедии на тему птиц:

Задача обучения № 1 — использовать видео-обложку

Вы видите это повсюду, от Airbnb до спорного редизайна Uber. Видеообложки в моде, они делают целевые страницы более динамичными и интересными благодаря свежему видеоконтенту. Я лично люблю их, поэтому хотел сделать один для себя. Я нашел лебединое видео на Coverr.co; это отличный ресурс, потому что они предоставляют стартовый код и бесплатные видео.

Одной из больших проблем была стилизация и позиционирование обложки, чтобы она была адаптивной. Я узнал, что «минимальная высота» (ранее установленная на 800 пикселей) вызывала проблемы с моими CSS и JavaScript (подробно показано ниже). Изначально я хотел, чтобы видео имело минимальную высоту, чтобы было легче стилизовать два элемента div с текстом, расположенным поверх видео. Но, как я выяснил, минимальная высота создавала нежелательные проблемы с интервалами (белая полоса, обведенная красным ниже) над и под обложкой видео.

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

Задача обучения № 2 — использовать статическое фоновое изображение для мобильных устройств вместо обложки видео.

Я обнаружил, что веб-сайты обычно не используют обложки для мобильных устройств. Я предполагаю, что кавер-видео имеет медленную скорость загрузки с ошибками. Чтобы заменить видео с обложки фоновым изображением, я сделал следующее:

  • HTML — добавлено изображение с классом «.mobile-background» после видео в том же div.
  • CSS, часть 1. Присвоение стилю изображения «display: none;» классу «.mobile-background».
  • CSS, часть 2. Чтобы сделать сайт адаптивным, я добавил медиа-запрос к «display: block;», чтобы показывать статичную фоновую фотографию при ширине экрана 500 пикселей или меньше. Я расположил статичную фоновую фотографию по горизонтали с помощью простого «margin-left».

Задача обучения № 3 — Разместить элементы div с текстом поверх обложки видео.

С обложкой на тему лебедя еще одна проблема, с которой я столкнулся, заключалась в размещении двух элементов div поверх видео, которые содержали текст заголовка (H1) и подзаголовка (p). Сохранение двух элементов div поверх видео-обложки Сделать отзывчивым видео-обложку, сохранив два div-элемента с текстом внутри области видео-обложки, оказалось на удивление сложной задачей.

Спустя 25 медиазапросов обложка видео и два блока div с текстом были готовы к показу. Из этой статьи CSS-Tricks «Logic in Media Queries» я научился использовать медиа-запросы с max-width и max-height для решения различных задач. размеры экрана. Из-за каскадного характера таблиц стилей я помещаю медиа-запросы для наименьших размеров экрана после больших размеров экрана.

Отзывчивые результаты, от малого до большого благодаря 25 медиазапросам:

Цель обучения № 4 — Использование элемента iframe

Чтобы узнать, как использовать элемент встроенного фрейма HTML ( ‹iframe› ), я встроил клип YouTube из Портландии прямо на свой сайт.

Чтобы сделать клип YouTube отзывчивым, я хотел убедиться, что размеры высоты и ширины останутся неизменными, независимо от размера экрана. Я присвоил всему элементу div класс «.youtube-container» и вложил iframe в класс «.youtube-container», чтобы добиться нужного стиля. Видео iframe было «позиционировано: абсолютное;» и было дочерним по отношению к родительскому div «.youtube-wrapper;», который был «позиционировано: относительным; ».

Таким образом, зрители могут смотреть весь клип YouTube на любом экране без проблем со стилем или пропорциями.

Цель обучения № 5 — Использование JavaScript для превращения веб-сайта в игру

Я сделал этот сайт простой игрой, чтобы узнать больше о JavaScript.

Суть игры с птицами состоит в том, чтобы щелкнуть каждое из трех изображений, чтобы «поместить на него птицу». . Для этого я использовал JavaScript:

  • HTML — я использовал два изображения для каждого элемента: 1) первое, показывающее элемент со значком цели (цель указывает, где щелкнуть), и 2) второе, показывающее элемент с птицей на нем.
  • HTML — все три элемента, не относящиеся к птицам, имели класс «image-swap».
  • HTML — все три элемента с птицами имели класс «скрыть», так что только первый элемент был виден.
  • JavaScript — я использовал jQuery и создал прослушиватель событий, чтобы заменить изображение, не являющееся птицей, изображением птицы, чтобы имитировать «поместить на него птицу».
  • JavaScript. Передав «image-swap» в функцию щелчка, я использовал метод «addClass», чтобы скрыть изображение, отличное от птицы. Затем я использовал «removeClass» для того же события, чтобы удалить «hide» и, следовательно, показать изображение птицы.

Сайт начинается с трех изображений, не являющихся птицами, которые показываются пользователю. Если щелкнуть каждое изображение, новое изображение птицы заменит цель и появится в том же месте.

По клику на предмет перед пользователем появляется розовая птичка. Пользователя просят щелкнуть все три элемента, чтобы добавить птиц ко всему, чтобы выиграть игру.

Задача обучения № 6 — Использование счетчика в JavaScript

Чтобы сообщить пользователю об успешном завершении игры, я хотел, чтобы появилось подтверждающее сообщение.

  • HTML — я создал раздел под названием «final» после трех элементов с классом «скрыть». В этом разделе было подтверждение успеха, которое я хотел отобразить, как только пользователь нажмет на все три элемента… я знаю, поставить птиц на все!
  • JavaScript — я создал переменную с именем «counter» и объявил начальное значение = 0.
  • Каждый раз, когда нажималось новое изображение, я добавлял «1» к значению счетчика.
  • Когда счетчик равнялся («===») трем, я показывал раздел «.finale», прокручивая пользователя прямо до сообщения об успешном завершении. Затем я добавил еще одну кнопку «Сбросить» игру, чтобы пользователи могли играть в нее снова, если захотят. Все дело в том, чтобы дать пользователю оптимальное представление о птице…

Поэтому я использовал JavaScript, чтобы отслеживать, когда пользователь успешно нажимал на все три изображения, что удовлетворяет цели игры и показывает сообщение подтверждения успеха.

Учебное задание № 7 — Стилизация фоновых фотографий поверх div

Еще одна проблема, с которой я столкнулся, заключалась в стилизации изображения по всему фону раздела «.finale», как показано выше. Я создал div и хотел придать ему фон изображения вместо простого цвета.

До и после:

Чтобы исправить эти проблемы со стилем, я упростил свой код и переместил изображение из HTML в таблицу стилей CSS. Раньше изображение находилось в файле HTML и стилизовалось в таблице стилей. Но у меня были проблемы с позиционированием изображения и центрированием текста и кнопки сброса.

Чтобы исправить это, я переместил изображение в таблицу стилей, показанную ниже, как «background-image» для класса «.finale».

Спасибо за проверку моей работы. Не забывайте, что птичку можно поставить на что угодно!

И на случай, если вам сегодня не хватило птиц…

Большое спасибо моей группе поддержки за последние два месяца, в том числе моему учителю Ною; Кристин и Себастьян из моего технического отдела Генеральной Ассамблеи; мой эксперт по JavaScript Тед; и мои шерпы на «Горе Поддерживающего Друга», Бекка, Ребекка, Дэвид, Сесилия, Эндрю, Эрик, Мо и Джефф. Программирование — это весело, спасибо вам всем. Здоровья!