Skip to content

iserviceweb/technical_web_page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Build a Technical Web Page

Instructions:

Objective: Build an app that is functionally similar to the demo GIF.

demo gif

User Stories:

  1. Add a nav element with a corresponding id="navbar".
  2. Within the nav element, add one header element which contains text that describes the topic of the technical web page.
  3. Add a main element with a corresponding id="main_doc" to contain the page's main content.
  4. Within the main_doc element, add a minimum of five section elements, each with a class of main_sec.
  5. The first element within each .main_sec should have a header element, describing the topic of that section.
  6. Each section element with the class of main_sec should also have an id that corresponds with the text of each header. For example "html and html5" should look like (id="html_and_html5")
  7. The .main_sec elements should contain at least ten p elements total (not each)
  8. The .main_sec elements should contain at least five code elements total (not each)
  9. The .main_sec elements should contain at least five li items total (not each)
  10. Additionally, the navbar should contain links, also known as, a elements with the class="nav_link". There should be one for every element within the class="main_sec".
  11. Each element with the class="nav_link" should contain text that corresponds to the header text within each section.
  12. When you click on a navbar element, the page should navigate to the corresponding section of the main_doc element.
  13. Use a media query to set elements id="navbar" fixed on the screen's left or right side only when viewed on larger devices like laptops.