<section id="description">
Цель: Создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Выполните приведенные ниже <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8" target="_blank">пользовательские истории</a> и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если вы хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история # 1: Я вижу заголовок с <code>id="title"</code> в формате H1. Пользовательская история # 2: Я вижу короткое описание с <code>id="description"</code> в формате P. Пользовательская история # 3: Я вижу элемент <code>form</code> с <code>id="survey-form"</code> . Пользовательская история # 4: Внутри элемента формы мне нужно ввести мое имя в поле с <code>id="name"</code> . Пользовательская история # 5: Внутри элемента формы мне нужно ввести электронную почту в поле с <code>id="email"</code> . Пользовательская история # 6: Если я введу электронную почту, которая не отформатирована правильно, я увижу HTML5 ошибку валидации. Пользовательская история # 7: Внутри формы я могу ввести число в поле с <code>id="number"</code> . Пользовательская история # 8: Если я введу нечисловое значение в поле ввода, я увижу HTML5 ошибку валидации. Пользовательская история # 9: Если я ввожу число за пределами диапазона ввода, которые определены атрибутами <code>min</code> и <code>max</code> , я увижу ошибку проверки HTML5. Пользовательская история # 10: Для полей ввода имени, электронной почты и числа внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идентификаторами: <code>id="name-label"</code> , <code>id="email-label"</code> и <code>id="number-label"</code> . Пользовательская история # 11: Для полей ввода имени, электронной почты и ввода числа я вижу плейсхолдер, который дает мне описание или инструкции для каждого поля. Пользовательская история # 12: Внутри элемента формы я могу выбрать опцию из раскрывающегося списка, имеющего соответствующий <code>id="dropdown"</code> . Пользовательская история # 13: Внутри элемента формы я могу выбрать поле из одной или нескольких групп переключателей. Каждая группа должна быть сгруппирована с использованием атрибута <code>name</code> . Пользовательская история # 14: Внутри элемента формы я могу выбрать несколько полей из ряда флажков, каждый из которых должен иметь атрибут <code>value</code> . Пользовательская история # 15: Внутри элемента формы, в конце, я вижу <code>textarea</code> для дополнительных комментариев. Пользовательская история # 16: Внутри элемента формы есть кнопка с <code>id="submit"</code> для отправки всех моих введённых данных. Вы можете создать свой проект от данного <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">CodePen шаблона</a> . Или вы можете использовать ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы зашли в тупик.</section>

Build a Survey Form

<section id="description">
Цель: Создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . Выполните приведенные ниже <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8" target="_blank">пользовательские истории</a> и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история # 1: Моя целевая страница продукта должна иметь элемент <code>header</code> с соответствующим <code>id="header"</code> . Пользовательская история # 2: Я вижу изображение внутри элемента <code>header</code> с соответствующим <code>id="header-img"</code> . У компании должен быть хороший логотип. Пользовательская история # 3: В элементе <code>#header</code> я вижу элемент <code>nav</code> с соответствующим <code>id="nav-bar"</code> . Пользовательская история # 4: Я вижу как минимум три элемента, которые можно щелкнуть внутри элемента <code>nav</code> , каждый с классом <code>nav-link</code> . Пользовательская история # 5: Когда я нажимаю кнопку <code>.nav-link</code> в элементе <code>nav</code> , я перемещаюсь в соответствующий раздел целевой страницы. Пользовательская история # 6: Я могу посмотреть встроенное видео с продуктом, с <code>id="video"</code> . Пользовательская история # 7: Моя целевая страница имеет элемент <code>form</code> с соответствующим <code>id="form"</code> . Пользовательская история # 8: В форме есть поле <code>input</code> с <code>id="email"</code> , где я могу ввести адрес электронной почты. Пользовательская история # 9: Поле ввода <code>#email</code> должно содержать плейсхолдер (текст заполнителя), чтобы пользователь знал, для чего это поле. Пользовательская история # 10: Поле ввода <code>#email</code> использует проверку HTML5, чтобы подтвердить, что введенный текст является адресом электронной почты. Пользовательская история # 11: В форме есть <code>input</code> с соответствующим <code>id="submit"</code> . Пользовательская история # 12: Когда я нажимаю на элемент <code>#submit</code> , электронная почта отправляется на статическую страницу (используйте этот фиктивный URL: <a href="https://www.freecodecamp.com/email-submit" target="_blank">https://www.freecodecamp.com/email-submit</a> ), который подтверждает что адрес электронной почты был введен и отправлен успешно. Пользовательская история # 13: Навигационная панель всегда должна находиться в верхней части окна просмотра. Пользовательская история # 14: На целевой странице моего продукта должен быть хотя бы один мультимедийный запрос. Пользовательская история # 15: Моя целевая страница продукта должна использовать CSS flexbox хотя бы один раз. Вы можете создать свой проект от данного шаблона <a href="http://codepen.io/freeCodeCamp/full/MJjpwO" target="_blank">CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask</a> , если вы зашли в тупик.</section>

Build a Product Landing Page

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/NdrKKL" target="_blank">https://codepen.io/freeCodeCamp/full/NdrKKL</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать простой CSS, потому что это то, что до сих пор изучали уроки, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS, если вы выберете. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, и использование их на свой страх и риск. Другие проекты дадут вам возможность работать с различными технологическими пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу <code>main</code> элемент с соответствующим <code>id="main-doc"</code> , который содержит основное содержание страницы (техническая документация). User Story # 2: В элементе <code>#main-doc</code> я вижу несколько элементов <code>section</code> , каждый из которых имеет класс <code>main-section</code> . Должно быть не менее 5. User Story # 3: Первый элемент внутри каждого <code>.main-section</code> должен быть элементом <code>header</code> который содержит текст, описывающий тему этого раздела. User Story # 4: Каждый элемент <code>section</code> с классом <code>main-section</code> должен также иметь идентификатор, соответствующий тексту каждого содержащегося в нем <code>header</code> . Любые пробелы должны быть заменены символами подчеркивания (например, <code>section</code> который содержит заголовок «Javascript и Java», должен иметь соответствующий <code>id="Javascript_and_Java"</code> ). User Story # 5: <code>.main-section</code> должны содержать не менее 10 <code>p</code> элементов (не каждый). User Story # 6: <code>.main-section</code> должны содержать не менее 5 элементов <code>code</code> (не каждый). User Story # 7: <code>.main-section</code> должны содержать не менее 5 элементов <code>li</code> (не каждый). User Story # 8: Я вижу элемент <code>nav</code> с соответствующим <code>id="navbar"</code> . User Story # 9: элемент navbar должен содержать один элемент <code>header</code> который содержит текст, описывающий тему технической документации. User Story # 10: Кроме того, навигационная панель должна содержать элементы ссылки ( <code>a</code> ) с классом <code>nav-link</code> . Для каждого элемента с <code>main-section</code> классом класса должен быть один. User Story # 11: Элемент <code>header</code> на панели навигации должен появиться перед любыми элементами ссылки ( <code>a</code> ) на панели навигации. User Story # 12: Каждый элемент с классом <code>nav-link</code> должен содержать текст, соответствующий тексту <code>header</code> в каждом <code>section</code> (например, если у вас есть раздел / заголовок «Hello world», ваш навигатор должен иметь элемент, который содержит текст "Привет мир"). User Story # 13: Когда я нажимаю элемент navbar, страница должна перейти к соответствующему разделу элемента <code>main-doc</code> (например, если я нажму на элемент <code>nav-link</code> который содержит текст «Hello world», страница перемещается к элементу <code>section</code> который имеет этот идентификатор и содержит соответствующий <code>header</code> . User Story # 14: на устройствах с обычным размером (ноутбуки, настольные компьютеры) элемент с <code>id="navbar"</code> должен быть показан в левой части экрана и должен всегда быть видимым пользователю. Пользовательская страница №15: страница «Моя техническая документация» должна использовать по крайней мере один мультимедийный запрос. Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нарисуя это перо CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, : <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> После того, как вы закончите, отправьте URL-адрес вашему рабочему проекту со всеми его прохождениями тестов. Не забудьте использовать <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask</a> если вы застряли.</section>

Build a Technical Documentation Page

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/zNBOYG" target="_blank">https://codepen.io/freeCodeCamp/full/zNBOYG</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и пройдите все тесты для завершения. Созадйте для приложения свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для выполнения этого проекта. Рекомендуется использовать простой CSS, так как это то, что вы изучили в предыдущих уроках, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуется использовать для этого задания, но вы можете применять их на свой страх и риск. Последующие проекты дадут вам возможность работать с другими различными технологиями, напирмер, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! Пользовательская история №1: у моего портфолио должен быть раздел приветствия с идентификатором <code>welcome-section</code> . User Story # 2: В разделе приветствия должен быть элемент <code>h1</code> , содержащий текст. Пользовательская история №3: у моего портфолио должен быть раздел проектов с идентификатором <code>projects</code> . User Story # 4: Раздел проектов должен содержать по крайней мере один элемент с классом <code>project-tile</code> для проведения проекта. User Story # 5: Раздел проектов должен содержать как минимум одну ссылку на проект. User Story # 6: Мое портфолио должно иметь навигационную панель с идентификатором <code>navbar</code> . User Story # 7: Навигация должна содержать хотя бы одну ссылку, на которую я могу щелкнуть, чтобы перейти к различным разделам страницы. User Story # 8: у моего портфолио должна быть ссылка с идентификатором <code>profile-link</code> , который открывает мою GitHub или FCC-профиль на новой вкладке. User Story # 9: у моего портфолио должен быть хотя бы один медиа-запрос. User Story # 10: Высота секции приветствия должна быть равна высоте окна просмотра. User Story # 11: навигационная панель всегда должна находиться в верхней части окна просмотра. Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нажимая эту ручку CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать метод <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы застряли.</section>

Build a Personal Portfolio Webpage

<section id="description">
Цель: создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</a> . Выполните приведенные ниже <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8" target="_blank">пользовательские истории</a> и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах по предлагаемому стеку технологий. Счастливого кодирования! Пользовательская история # 1: Моя страница посвящения должна иметь элемент с соответствующим <code>id="main"</code> , который содержит все остальные элементы. Пользовательская история # 2: Я должен увидеть элемент с соответствующим <code>id="title"</code> , который содержит строку (то есть текст), с описанием темы страницы (например, «Доктор Норман Борлауг»). Пользовательская история # 3: Мне нужно увидеть элемент <code>div</code> с соответствующим <code>id="img-div"</code> . Пользовательская история # 4: В элементе <code>img-div</code> я должен увидеть элемент <code>img</code> с соответствующим <code>id="image"</code> . Пользовательская история # 5: В элементе <code>img-div</code> я должен увидеть элемент с соответствующим <code>id="img-caption"</code> , который содержит текст, описывающий изображение в <code>img-div</code> . Пользовательская история # 6: Я должен увидеть элемент с соответствующим <code>id="tribute-info"</code> , который содержит текст, описывающий тему страницы посвящения. Пользовательская история # 7: Я должен увидеть элемент <code>a</code> с соответствующим <code>id="tribute-link"</code> , который ссылается на внешний сайт с дополнительной информацией о предмете страницы. ПОДСКАЗКА. Вы должны указать вашему элементу атрибут <code>target</code> и установить его в <code>_blank</code> , чтобы ваша ссылка открылась в новой вкладке (т.е. <code>target="_blank"</code> ). Пользовательская история # 8: Элемент <code>img</code> должен изменяться по размеру относительно ширины его родительского элемента, не превышая его первоначальный размер. Пользовательская история # 9: Элемент <code>img</code> должен быть центрирован в пределах его родительского элемента. Вы можете создать свой проект от этого <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">CodePen проекта</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . После того как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы зашли в тупик.</section>