48 lines
4.7 KiB
Markdown
48 lines
4.7 KiB
Markdown
---
|
||
id: bd7158d8c242eddfaeb5bd13
|
||
title: Створіть веб-сторінку персонального портфоліо
|
||
challengeType: 3
|
||
forumTopicId: 301143
|
||
dashedName: build-a-personal-portfolio-webpage
|
||
---
|
||
|
||
# --description--
|
||
|
||
**Мета:** Створити [CodePen.io](https://codepen.io) застосунок, який за своїми функціями нагадує цей: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
|
||
|
||
Заповніть [ історії користувачів ](https://en.wikipedia.org/wiki/User_story), розміщені нижче, і отримайте доступ до всіх тестів, які потрібно пройти. Виконайте завдання у власному стилі.
|
||
|
||
Ви можете використати HTML, JavaScript, and CSS для виконання цього проєкту. Рекомендовано використовувати звичайний CSS, тому що саме про це розповідається на уроках і вам варто попрактикуватися зі звичайним CSS. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
|
||
|
||
**Історія користувача #1:** На моєму портфоліо повинен бути розділ-вітання з наступним id `welcome-section`.
|
||
|
||
**Історія користувача #2:** Розділ для вітання повинен містити елемент `h1` з текстом.
|
||
|
||
**Історія користувача #3:** На моєму портфоліо повинен бути розділ з проєктами з id `projects`.
|
||
|
||
**Історія користувача #4:** Розділ з проєктами повинен містити щонайменше один елемент класу `project-tile` для зберігання проєктів.
|
||
|
||
**Історія користувача #5:** Розділ з проєктами повинен містити щонайменше одне посилання на проєкт.
|
||
|
||
**Історія користувача #6:** На моєму портфоліо повинна бути навігаційна панель з id `navbar`.
|
||
|
||
**Історія користувача #7:** Навігаційна панель повинна містити щонайменше одне посилання, завдяки якому ми могли б перейти на інші розділи сторінки.
|
||
|
||
**Історія користувача #8:** На моєму портфоліо повинно бути посилання з id `profile-link`, завдяки якому можна перейти на мої профілі GitHub і FCC у новій вкладці.
|
||
|
||
**Історія користувача #9:** На моєму портфоліо повинен бути щонайменше один медіа-запит.
|
||
|
||
**Історія користувача #10:** Висота розділу з вітанням повинна збігатися з висотою вікна перегляду.
|
||
|
||
**Історія користувача #11:** Навігаційна панель повинна розміщуватися у верхній частині вікна перегляду.
|
||
|
||
Ви можете створити проєкт за допомогою <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> й натиснути `Save` для створення власного фрагмента. Або ж ви можете скористатися цим CDN посиланням для проходження тестів у будь-якому комфортному для вас середовищі:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||
|
||
Після завершення прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
|
||
|
||
# --solutions--
|
||
|
||
```html
|
||
// solution required
|
||
```
|