Html-CSS(doc page)

yo,yo :wave:
Long time!
Please guys I need you to check my new wibesitedoc page and suggest any improvement.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18358.

Challenge: Build a Technical Documentation Page

Link to the challenge:

“How it’s made” nav has a “how it works” href. The attributes must be separated by a space. If you wan the last three nav links to advance the page, you must add empty space to the bottom of the page. Document is misspelled at the bottom of the page.

1 Like

Hey @sadiqalkass, nice work, looks clean. A few suggestions:

  • I can’t see the keyboard focus indicator when I am tabbing through the side menu. You’ll definitely want to customize that to make it stand out more.
  • You’ve got a bunch of “click here” links in the content. You’ll definitely want to change the wording on those so they are more accessible.
  • Semantically, you have no <h1> heading and all other headings are <h3>. Best practices dictate that you have an <h1>. Then, the headings that you currently have in the <header> for each <section> should probably marked up as <h2>, and then any subheadings under that would be <h3>. In fact, I would just replace each <header> with <h2>.
  • Not sure you need the <article>s either. You might be over-engineering this just a bit. Besides, usually you would have a heading at the beginning of each <article>, which you don’t have here.
  • You’ve got some issues with some lists. Lists can only have <li> as direct children. You’ve got some that have <p>.
  • You’ve got some misspelled elements (and other issues). Use the codepen HTML analyzer to fix your HTML.
1 Like

Thanks for your help :grinning:
I will check on all the problems you point out.

Thanks for your help :innocent:

Hi :wave:,
I think I have done all your suggestions Update .

This is looking better but there are still a few issues:

  • No <h1>
  • I’m still seeing some “click here” links. Also “For More Information” is basically a “click here” link.
  • The “How Its Made” link in the TOC doesn’t work (you have a typo in the href).
  • There are still non-<li> children in a list (see the list in Characteristics).

Your page looks good @sadiqalkass. Some additional things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 11/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

Okay now I’m sure I have taking care of all the problems update :grinning:

Now your page passes * 8/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message . The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • The test script, with all tests passing , should be included when you submit your projects.

Ooo thanks I see now

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.