Technical Documentation Project-Any Feedback?

Code Feedback
1

Folks,

Finished the Tech Doc project, and feeling pretty excited about how it came together! Particularly stoked with media queries, and my beginnings of comprehension in that realm.

Any one out there interested in giving feedback would be most appreciated.

Hope all of your codings are going well! :smiley:

SevenRooT

1 Like
2

This looks really nice. You aren’t passing two tests though, so I would fix that first. I think the reason you aren’t passing the first layout test is because the browser has to be really wide before it shifts the nav menu to the left side. Adjust the break point so that shift occurs sooner and that will probably get you a pass there.

While this is responsive to changes in the view port width it is not quite so responsive to changes in text size. If you don’t know how to manually change the text size, using Firefox, go to the View->Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to change the text size. If you have your browser narrow enough where the menu is on the top then I think you’ll see some issues that need to be addressed.

My suggestion for fixing the text size issues would be to use em units for your break points instead of px. To do this, just divide the px value by 16 to get the equivalent em value and then you can adjust as needed. This may not solve every issue related to text size but it will help a ton in getting there. When you use em then the break point automatically takes both view port width and text size into consideration.

1 Like
3

Wow! @SevenRoot That looks amazing. Good work. It is responsive, for me passing all of the tests, and I really like the look of it. I really like the nav-bar and how it goes from the side to the top of the screen depending on the size of the page. Great work and happy coding! :smile:

1 Like
4

Your page looks good @SevenRoot. My only suggestions are;

  • Have the four links in the More on Links section open in a new tab
  • Rather than hiding this <!--Text copied and edited freely from https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML--> in your page, add another section to your nav called References and let user’s go to it for additional information.
1 Like
5

Hi @SevenRoot. Your project looks good. But, some suggestions:

  • Unlike what @bbsmooth said, your project passes all test for me. I think it s because my screen size is bigger and for me, the nav bar is on the left side. But, this may not be the same for everyone. So, give a smaller break point for the navbar shifting to the top.
  • Some your code elements have scrollbars appearing on them even if it is just one line of code. As I can see, this is because you set overflow: scroll; for the pre selector. Change it to overflow: auto; so that the scrollbar appears only when needed.
  • I can see that you are using > for closing tags in your code examples. You can use &gt; instead so that some validation errors will be gone.
  • There is an extra left margin for the content when the screen size is smaller:

image
image622×622 40.5 KB

Anyway, good job. Keep it up :+1:

1 Like
6

I think you are right, this test seems to depend on the width of your browser when you run the test. If I make my browser wide enough so that the menu is on the left side then the test passes but if I narrow it even just one pixel less than the break point so that the menu is on top then it fails the test. When the test fails it gives you the error message:

On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left half of the screen.

This page currently has the break point for this transition set to 1200px. I’m guessing that the test considers the width of “regular sized devices” to be a little less than 1200px?

2 Likes