5.2 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd18 | Створіть пам'ятну сторінку | 3 | 301147 | build-a-tribute-page |
--description--
Завдання: Створіть CodePen.io застосунок, який схожий за функціями на:https://codepen.io/freeCodeCamp/full/zNqgVx.
Нижче заповніть історії користувачів і отримайте доступ до тестів, котрі потрібно пройти. Виконайте завдання у власному стилі.
Ви можете використати HTML, JavaScript, and CSS для завершення цього проєкту. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше попрактикуватися. Якщо ви оберете Bootstrap або SASS, то можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
** Історія користувача #1:** Моя пам'ятна сторінка повинна містити елемент з відповідним id="main", котрий містить усі інші елементи.
** Історія користувача #2: ** Мені потрібно бачити елемент з відповідним id="title", котрий містить рядок (наприклад текст) і описує тему пам'ятної сторінки. (наприклад "Лікар Норман Борлау").
** Історія користувача #3:** Мені потрібно бачити або figure, або div елемент з відповідними id="img-div".
Історія користувача #4: У межах img-div елементу, мені потрібно бачити img елемент з відповідним id="image".
Історія користувача #5: У межах img-div елементу, мені потрібно бачити елемент з відповідним id="img-caption", котрий містить текстовий контент, який описує зображення яке показується в img-div.
Історія користувача #6: Мені потрібно бачити елемент з відповідним id="tribute-info", котрий містить текстовий контент, який описує пам'ятну сторінку.
Історія користувача#7: Мені потрібно бачити a елемент з відповідним id="tribute-link", котрий дає посилання на зовнішній сайт, який містить додаткову інформацію про тему пам'ятної сторінки. ПІДКАЗКА: Ви повинні надати вашому елементу атрибут у формі target і налаштувати його до _blank для того щоб ваше посилання відкрилося у новій вкладці(т.к. target="_blank").
**Історія користувача #8:**Елементimgповинен у відповідь змінити свій розмір, у зв'язку з шириною його початкового елементу, без перевищення його оригінального розміру.
Історія користувача#9: Елемент img повинен знаходитись у центрі в межах його початкового елементу.
Ви можете створити проєкт за допомогою using this CodePen template й натиснути Save для створення власного фрагмента. Або ж ви можете скористатися цим CDN посиланням для проходження тестів у будь-якому комфортному для вас середовищі:https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.
Після того як ви завершили, прикріпіть URL до вашому проєкту, над яким ви працюєте, з усіма пройденими тестами.
--solutions--
// solution required