Создание страницы технической документации
Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/NdrKKL . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать простой CSS, потому что это то, что до сих пор изучали уроки, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS, если вы выберете. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, и использование их на свой страх и риск. Другие проекты дадут вам возможность работать с различными технологическими пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу main элемент с соответствующим id="main-doc" , который содержит основное содержание страницы (техническая документация). User Story # 2: В элементе #main-doc я вижу несколько элементов section , каждый из которых имеет класс main-section . Должно быть не менее 5. User Story # 3: Первый элемент внутри каждого .main-section должен быть элементом header который содержит текст, описывающий тему этого раздела. User Story # 4: Каждый элемент section с классом main-section должен также иметь идентификатор, соответствующий тексту каждого содержащегося в нем header . Любые пробелы должны быть заменены символами подчеркивания (например, section который содержит заголовок «Javascript и Java», должен иметь соответствующий id="Javascript_and_Java" ). User Story # 5: .main-section должны содержать не менее 10 p элементов (не каждый). User Story # 6: .main-section должны содержать не менее 5 элементов code (не каждый). User Story # 7: .main-section должны содержать не менее 5 элементов li (не каждый). User Story # 8: Я вижу элемент nav с соответствующим id="navbar" . User Story # 9: элемент navbar должен содержать один элемент header который содержит текст, описывающий тему технической документации. User Story # 10: Кроме того, навигационная панель должна содержать элементы ссылки ( a ) с классом nav-link . Для каждого элемента с main-section классом класса должен быть один. User Story # 11: Элемент header на панели навигации должен появиться перед любыми элементами ссылки ( a ) на панели навигации. User Story # 12: Каждый элемент с классом nav-link должен содержать текст, соответствующий тексту header в каждом section (например, если у вас есть раздел / заголовок «Hello world», ваш навигатор должен иметь элемент, который содержит текст "Привет мир"). User Story # 13: Когда я нажимаю элемент navbar, страница должна перейти к соответствующему разделу элемента main-doc (например, если я нажму на элемент nav-link который содержит текст «Hello world», страница перемещается к элементу section который имеет этот идентификатор и содержит соответствующий header . User Story # 14: на устройствах с обычным размером (ноутбуки, настольные компьютеры) элемент с id="navbar" должен быть показан в левой части экрана и должен всегда быть видимым пользователю. Пользовательская страница №15: страница «Моя техническая документация» должна использовать по крайней мере один мультимедийный запрос. Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js После того, как вы закончите, отправьте URL-адрес вашему рабочему проекту со всеми его прохождениями тестов. Не забудьте использовать Read-Search-Ask если вы застряли.