Objective: Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks. Do not copy this demo project.
- You can see a main element with a corresponding
id="main-doc"
, which contains the page's main content (technical documentation) - Within the
#main-doc
element, you can see several section elements, each with a class ofmain-section
. There should be a minimum of five - The first element within each
.main-section
should be a header element, which contains text that describes the topic of that section. - Each
section
element with the class ofmain-section
should also have anid
that corresponds with the text of eachheader
contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a correspondingid="JavaScript_and_Java"
) - The
.main-section
elements should contain at least tenp
elements total (not each) - The
.main-section
elements should contain at least fivecode
elements total (not each) - The
.main-section
elements should contain at least fiveli
items total (not each) - You can see a
nav
element with a correspondingid="navbar"
- The
navbar
element should contain oneheader
element which contains text that describes the topic of the technical documentation - Additionally, the
navbar
should contain link(a)
elements with the class ofnav-link
. There should be one for every element with the classmain-section
- The header element in the
#navbar
must come before any link(a)
elements in thenavbar
- Each element with the class of
nav-link
should contain text that corresponds to theheader
text within eachsection
(e.g. if you have a "Hello world"section/header
, yournavbar
should have an element which contains the text "Hello world") - When you click on a
navbar
element, the page should navigate to the corresponding section of the#main-doc
element (e.g. If you click on a.nav-link
element that contains the text "Hello world", the page navigates to asection
element with that id, and contains the correspondingheader
) - On regular sized devices (laptops, desktops), the element with
id="navbar"
should be shown on the left side of the screen and should always be visible to the user - Your technical documentation should use at least one
media query
- Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!