Simple Technical Documentation Page Project

Hello Guys,
I hope you are staying safe and well.
Here is my simple Technical Documentation Page.


I would love to know your feedbacks.
I made it very simple but tried to focus on making it more responsive.
A moment of your time will be appreciated.
Thanks in advance
1 Like

Hey @Meryem_Jow . I am a Junior Dev myself and here are my thoughts.

You can easily enhance the scroll behavior when a user taps on a link using html{
** scroll-behavior: smooth;**
} .
One other important feedback I have is that you have positioned the main content part using margin-left(for normal view) and margin-top (for responsive view) which I think is not the right way to do it,though it achieves what you needed to see. Its always better to handle this using width as function of percentage.

Example: The Navbar could be of width:30% and the main content of width 70% of the screen size respectively in the normal view.(no need of margins).

In the responsive view the the main content can remain to be 100% of the screen size and the navbar could be toggled with a hamburger icon using translateX().

However if this is too much to digest for now,just remember that you need to start thinking about using width in percentages for your divs rather than margin.

Cheers,Keep Coding !

1 Like

Hi, nice project :+1:

You have some problems with multi-line code fragments

… unless it is one-line by design.

Some code fragments are actually wrong, e.g. var x = 42. should not really contain a dot. Looks like the reference solution is wrong here as well.

Your page looks good @Meryem_Jow. Some things to revisit;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 12/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address. You can ignore the warnings if you want. They’re there to help you make you page more semantic.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • Side note, you can nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks. Or you could do
code {
  white-space: pre;
}

in CSS and skip the <pre> tag in HTML.

1 Like

Hey @tsarvind996 ,
I appreciate your time for looking to my code and letting me know about percentage.
I’ll try to fix it and work more with them soon.
Thank you so much

1 Like

Hello @Roma ,
Thank you for your time. I’ll make to have 16/16 on user stories. and i’ll fix all the other errors. Thank you again