https://github.com/nix7amcm/fcc-technical-documentation-page
This is my code for the Technical Document Documentation Page for FreeCodeCamp's Responsive Web Design Certification. I built this using HTML and Bootstrap with some customised CSS.
https://github.com/nix7amcm/fcc-technical-documentation-page
bootstrap custom-css freecodecamp freecodecamp-project html-css responsive
Last synced: 4 months ago
JSON representation
This is my code for the Technical Document Documentation Page for FreeCodeCamp's Responsive Web Design Certification. I built this using HTML and Bootstrap with some customised CSS.
- Host: GitHub
- URL: https://github.com/nix7amcm/fcc-technical-documentation-page
- Owner: Nix7amcm
- Created: 2024-01-30T19:15:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-30T22:14:21.000Z (about 2 years ago)
- Last Synced: 2025-01-20T07:45:57.966Z (over 1 year ago)
- Topics: bootstrap, custom-css, freecodecamp, freecodecamp-project, html-css, responsive
- Language: HTML
- Homepage: https://nix7amcm.github.io/FCC-Technical-Documentation-Page/
- Size: 254 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Technical Documentation Page
### My Solution:
[nix7amcm.github.io/FCC-Technical-Documentation-Page/](https://nix7amcm.github.io/FCC-Technical-Documentation-Page/)
* * *
## Images:
#### Desktop
#### Tablet
#### Mobile (with nav-link hover effect)
* * *
### Project Description:
**Objective:** Build an app that is functionally similar to this: [https://technical-documentation-page.freecodecamp.rocks/](https://technical-documentation-page.freecodecamp.rocks/).
**Do not copy this demo project.**
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
* * *
### User Stories:
* [x] **#1:** You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation).
* [x] **#2:** Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five.
* [x] **#3:** The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
* [x] **#4:** Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`).
* [x] **#5:** The `.main-section` elements should contain at least ten `p` elements total (not each).
* [x] **#6:** The `.main-section` elements should contain at least five `code` elements total (not each).
* [x] **#7:** The `.main-section` elements should contain at least five `li` items total (not each).
* [x] **#8:** You can see a `nav` element with a corresponding `id="navbar"`.
* [x] **#9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation.
* [x] **#10:** Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`.
* [x] **#11:** The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar.
- [x] **#12:** Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world").
- [x] **#13:** 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 a `section` element with that id, and contains the corresponding header).
- [x] **#14:** 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.
- [x] **#15:** Your technical documentation should use at least one media query.
* * *
### Additional Notes:
**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS
* * *