Technical Documentation Page html

Hi guys. This is my fourth project and I would like to hear from someone. It was hard to choose topic so I went with html and css. I didn’t want to do something fancy with layout so I went simple design. Any thoughts?
Thanks!

https://codepen.io/thelelux/pen/XWbRXWo

Hey there! :slight_smile: I like your page quite a bit for the most part. It’s a simple design, easy to read, accessible and it looks very elegant and modern.

The biggest issue, though, is the responsiveness of the navbar element. It looks good on desktop screens, but when you shrink the screen, the menu ends up covering a huge chunk of text. You kind of solved it at the 600px break, but it still gets super squished when you go smaller than than that, so it’s definitely not an optimal solution. If you’re worried about failing one of the tests if you mess with the position of the navbar, I think (please someone correct me if I’m wrong) that it’s not going to be a problem because the test says: “On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen.” So you just have to test your project with a desktop screen view and you should pass regardless of where the menu is on smaller screens. For example, I shifted the navbar to be at the top and not scroll with the page on smaller screens. You can try something like that or something else if you have another idea, of course :slight_smile:

Some other, very minor, things that you can consider if you want (these are more design/user experience tweaks that can potentially make your page a bit better from the user’s perspective, but they’re not huge issues):

  • In the navbar menu, consider making the entire li areas clickable and not just the words in your a elements.
  • I wouldn’t go with the expanding effect on hover for links, it disrupts the flow a little bit and pushes other content.

Other than this, pretty good job :smiley: I hope this helped a bit and good luck going forward! :blush:

By the way, I just realized that we’re from the same country :smiley: Cheers from Belgrade! :smile:

2 Likes

Thank You for response. It really means a lot! I wanted to pass the test and then I would go back to make it better. I’ll try to do something with responsiveness, thank You for idea.
Cheers! …also from BG
:smiley: :smiley: :smiley:

1 Like

Hi @thelelux, your page looks good. Something to revisit;

  • You’re passing 15/16 of the user stories. Click on the red button to see which is failing and why.
    • your navbar is incorrect. This is incorrect coding;
      <ul> <a href="#introduction_to_html" class="nav-link"><li>Introduction to HTML</li></a>

Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab and clean up errors and warning.

  • Since you’re pasting code from codepen you can ignore the first couple of errors that the validator throws.
2 Likes

I fixed it. Thanks! :smiley: