6.8 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78b0367417b2b2512b05 | Створіть сторінку технічної документації | 3 | 301146 | build-a-technical-documentation-page |
--description--
Objective: Створіть застосунок CodePen.io, функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/NdrKKL.
Заповніть user stories, розміщені нижче, та отримайте доступ до тестів, які потрібно пройти. Проявіть при цьому свій власний стиль.
Ви можете використати HTML, JavaScript, and CSS для виконання цього проєкту. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше відповідної практики. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
Історія користувача #1: Я бачу main елемент з відповідним id="main-doc", який містить основний вміст сторінки (технічна документація).
Історія користувача #2: У межах #main-doc елементу, я бачу декілька section елементів, кожен з яких класу main-section. Їх повинно бути щонайменше 5.
Історія користувача #3: Перший елемент у межах кожного .main-section повинен бути header елементом, який містить текст, що описує тему конкретного розділу.
Історія користувача #4: Кожен section елемент класу main-section також повинен мати id, який за текстом відповідає кожному header, що міститься в ньому. Будь-який пробіл потрібно замінити знаком підкреслення (наприклад section, який містить заголовок "JavaScript і Java", повинен мати відповідний id="JavaScript_and_Java").
Історія користувача #5: .main-section елементи повинні містити щонайменше 10 p елементів загалом (не кожен).
Історія користувача #6: .main-section елементи повинні містити щонайменше 5 code елементів загалом (не кожен).
Історія користувача #7: .main-section елементи повинні містити щонайменше 5 li елементів загалом (не кожен).
** Історія користувача #8:** Я бачу nav елемент з відповідними id="navbar".
Історія користувача #9: Елемент панелі навігації повинен містити один header елемент, який включає текст, що описує тему технічної документації.
Історія користувача #10: Крім того, навігаційна панель повинна містити (a) елементи посилань класу nav-link. На кожен елемент класу main-section має бути одне посилання.
Історія користувача #11:header елемент в межах навігаційної панелі повинен розміщуватися перед елементами (a) посилань.
Історія користувача #12: Кожен елемент класу nav-link повинен містити текст, який відповідає header тексту у кожній section (наприклад, якщо у вас є розділ/заголовок "Вітаю, світе", ваша навігаційна панель повинна мати елемент, що містить текст "Вітаю, світе").
Історія користувача #13: При натисканні на елемент навігаційної панелі, сторінка повинна скеровувати до відповідного розділу main-doc елементу (наприклад, у разі натискання на nav-link елемент, що містить текст "Вітаю, світе", сторінка скеровує до section елементу із таким же id та відповідним header.
Історія користувача #14: На пристроях типової величини (ноутбуки, комп'ютери) елемент з id="navbar" повинен відображатися ліворуч на екрані і завжди бути видимим для користувача.
Історія користувача #15: Моя сторінка технічної документації повинна використовувати щонайменше один медіа-запит.
Ви можете створити свій проєкт за допомогою , використовуючи цей CodePen зразок і натиснувши Save, щоб створити власний фрагмент. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Після завершення прикріпіть URL адресу із пройденими тестами до проєкту, над яким працюєте.
--solutions--
// solution required