https://github.com/spike1292/html-css-opdracht

Created with CodeSandbox
https://github.com/spike1292/html-css-opdracht

Last synced: about 1 month ago
JSON representation

Created with CodeSandbox

• Host: GitHub
• URL: https://github.com/spike1292/html-css-opdracht
• Owner: spike1292
• Created: 2021-06-03T09:41:43.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-03T09:49:42.000Z (over 3 years ago)
• Last Synced: 2023-08-02T12:29:58.683Z (over 1 year ago)
• Language: HTML
• Homepage: https://codesandbox.io/s/github/spike1292/html-css-opdracht
• Size: 38.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# html-css-opdracht

**User Story #1:** I can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (space ipsums).

**User Story #2:** Within the `#main-doc` element, I can see several `section` elements, each with a class of `main-section`. There should be a minimum of 5.

**User Story #3:** The first element within each `.main-section` should be a `header` element which contains text that describes the topic of that section.

**User Story #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 "Gene Cernan - Symbol of Apollo" should have a corresponding `id="gene-cernan-symbol-of-apollo"`).

**User Story #5:** The `.main-section` elements should contain at least 10 `p` elements total (not each).

**User Story #6:** The `.main-section` elements should contain at least 5 `code` elements total (not each).

**User Story #7:** The `.main-section` elements should contain at least 5 `li` items total (not each).

**User Story #8:** I can see a `nav` element with a corresponding `id="navbar"`.

**User Story #9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation.

**User Story #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`.

**User Story #11:** The `header` element in the navbar must come before any link (`a`) elements in the navbar.

**User Story #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").

**User Story #13:** 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 a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element that has that id and contains the corresponding `header`.

**User Story #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.

**User Story #15:** The page should use at least one media query.

**User Story #16:** The menu should use flexbox.