Project made for freeCodeCamp
"Responsive Web Design" certification
- I can see a
main
element with a correspondingid="main-doc"
, which contains the page's main content (technical documentation) - Within the
#main-doc
element, I can see severalsection elements
, each with a class ofmain-section
. There should be a minimum of 5 - The first element within each
.main-section
should be aheader
element which contains text that describes the topic of that section - Each
section
element with the class ofmain-section
should also have an id that corresponds with the text of eachheader
contained within it. Any spaces should be replaced with underscores (e.g. Thesection
that contains the header "Javascript and Java" should have a correspondingid="Javascript_and_Java"
) - The
.main-section
elements should contain at least 10p
elements total (not each) - The
.main-section
elements should contain at least 5code
elements total (not each) - The
.main-section
elements should contain at least 5li
items total (not each) - I can see a
nav
element with a correspondingid="navbar"
- The navbar element should contain one
header
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 the navba - 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, your navbar should have an element which contains the text "Hello world") - When I click on a navbar element, the page should navigate to the corresponding section of the
main-doc
element (e.g. If I click on anav-link
element that contains the text "Hello world", the page navigates to asection
element that has 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 - My Technical Documentation page should use at least one media query
- Full responsive
- Dark mode
- HTML
- CSS
- Flexbox
- Bootstrap
- jQuery
- JavaScript
- Google fonts for Ubuntu Mono
- Font Awesome icons