5.6 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78af367417b2b2512b04 | Створіть цільову сторінку продукту | 3 | 301144 | build-a-product-landing-page |
--description--
Objective: Створіть застосунок CodePen.io, функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/RKRbwL.
Заповніть історії користувачів , розміщені нижче, і отримайте доступ до всіх тестів, які потрібно пройти. Проявіть при цьому свій власний стиль.
Ви можете використати HTML, JavaScript, and 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 щонайменше один раз.
Ви можете створити свій проєкт using this CodePen template і натиснувши Save, аби створити власний фрагмент. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Після завершення прикріпіть URL адресу із пройденими тестами до проєкту, над яким працюєте.
--solutions--
// solution required