Разработать целевую страницу продукта
Цель: Создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/RKRbwL . Выполните приведенные ниже пользовательские истории и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история # 1: Моя целевая страница продукта должна иметь элемент header с соответствующим id="header" . Пользовательская история # 2: Я вижу изображение внутри элемента header с соответствующим id="header-img" . У компании должен быть хороший логотип. Пользовательская история # 3: В элементе #header я вижу элемент nav с соответствующим id="nav-bar" . Пользовательская история # 4: Я вижу как минимум три элемента, которые можно щелкнуть внутри элемента nav , каждый с классом nav-link . Пользовательская история # 5: Когда я нажимаю кнопку .nav-link в элементе nav , я перемещаюсь в соответствующий раздел целевой страницы. Пользовательская история # 6: Я могу посмотреть встроенное видео с продуктом, с id="video" . Пользовательская история # 7: Моя целевая страница имеет элемент form с соответствующим id="form" . Пользовательская история # 8: В форме есть поле input с id="email" , где я могу ввести адрес электронной почты. Пользовательская история # 9: Поле ввода #email должно содержать плейсхолдер (текст заполнителя), чтобы пользователь знал, для чего это поле. Пользовательская история # 10: Поле ввода #email использует проверку HTML5, чтобы подтвердить, что введенный текст является адресом электронной почты. Пользовательская история # 11: В форме есть input с соответствующим id="submit" . Пользовательская история # 12: Когда я нажимаю на элемент #submit , электронная почта отправляется на статическую страницу (используйте этот фиктивный URL: https://www.freecodecamp.com/email-submit ), который подтверждает что адрес электронной почты был введен и отправлен успешно. Пользовательская история # 13: Навигационная панель всегда должна находиться в верхней части окна просмотра. Пользовательская история # 14: На целевой странице моего продукта должен быть хотя бы один мультимедийный запрос. Пользовательская история # 15: Моя целевая страница продукта должна использовать CSS flexbox хотя бы один раз. Вы можете создать свой проект от данного шаблона CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать Read-Search-Ask , если вы зашли в тупик.