FREECODECAMP: HOW TO BUILD A TECHNICAL DOCUMENTATION PAGE (2022)
#FreeCodeCamp #FCC #TechnicalDocumentationPage #HTML #CSS #HowTo #Challenge #ResponsiveWebDesign #HTML CSS Tutorial #Tutorial #Codepen
FYI: For best view look at the video in full width screen
In this project we are going to cover "How to Build A Technical Documentation Page" using codepen.io. This is an edited GIT Documentation page used for this project only. For original documentation refer to GIT Hub Documentation. This is a Responsive Web Design Project from FreeCodeCamp.
Going to leave links below:
Codepen.io
https://codepen.io/Traverse-Create/fu...
Bootstrap Navigation
https://getbootstrap.com/docs/4.6/com...
Git Hub Documentation
https://docs.github.com/en/get-started
FreeCodeCamp User Stories by Timestamps:
00:00 How to build a Technical Documentation Page FreeCodeCamp challenge
03:26 How to add Bootstrap Navigation
05:47 User Story #1 How to add main element with corresponding id="main-doc"
06:30 User Story #2 How to add "section" element with a class of "main-section"
07:30 User Story #3 How to add "header" element which contains text that describes the topic of that section.
08:02 User Story #4 How to add id that corresponds with the text of each "header" container within it.
09:36 User Story #5 How to add p elements within ".main-section"
10:29 User Story #6 How to add code element within ".main-section"
12:08 User Story #7 How to add li items within ".main-section"
14:06 User Story #8 How to add "id='nav-bar' " within nav element
14:41 User Story #9 How to header element that contains text that describes the topic of technical documentation
16:04 User Story #10 How to add link(a) elements with the class of "nav-link"
16:33 User Story #11 Where to add header element in the navbar
17:01 User Story #12 How to add corresponding text to the header element within each section.
18:49 User Story #13 How to add corresponding navigation that link main section content to the navbar
29:45 User Story #14 How to navbar on the left side of the screen for laptops, desktops and make it always visible to the user.
31:55 How add hover animation
32:26 How to add footer inside main-doc
34:42 User Story #15 How to add at least one media query
Music by Bensound. Happy Coding !