freeCodeCamp

6.4 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d78af367417b2b2512b04	Build a Product Landing Page	true	3		Построить страницу назначения продукта

Description

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

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

6.4 KiB Raw Blame History Unescape Escape