56 lines
6.8 KiB
Markdown
56 lines
6.8 KiB
Markdown
|
---
|
|||
|
|
id: 587d78b0367417b2b2512b05
|
|||
|
|
title: Створіть сторінку технічної документації
|
|||
|
|
challengeType: 3
|
|||
|
|
forumTopicId: 301146
|
|||
|
|
dashedName: build-a-technical-documentation-page
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
**Objective:** Створіть застосунок [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
|
|||
|
|
|
|||
|
|
Заповніть [user stories](https://en.wikipedia.org/wiki/User_story), розміщені нижче, та отримайте доступ до тестів, які потрібно пройти. Проявіть при цьому свій власний стиль.
|
|||
|
|
|
|||
|
|
Ви можете використати 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:** Моя сторінка технічної документації повинна використовувати щонайменше один медіа-запит.
|
|||
|
|
|
|||
|
|
Ви можете створити свій проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>, використовуючи цей CodePen </a> зразок і натиснувши `Save`, щоб створити власний фрагмент. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
|||
|
|
|
|||
|
|
Після завершення прикріпіть URL адресу із пройденими тестами до проєкту, над яким працюєте.
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
// solution required
|
|||
|
|
```
|