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
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.
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>’
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