Feedback - Technical Documentation

Code Feedback
1

Hi everyone. I’ve built a technical documentation page. I’m new to CSS and responsive web designing.
Please provide feedback to my project. Check my project is responsive or not. If not please provide some tips. I really appreciate any feedback for further improvement.
Thank you.

My Technical Documentation page: https://codepen.io/thanos18/full/zYOEopb

2

Looking good :slight_smile:

Few remarks:

  • Are you aware that your links shift slightly when you hover over them? Is that intended behaviour?
  • Your navigation is quite big on mobile and isn’t fixed to the top. Creating a hamburger menu would make this better and is a good challenge.
  • You might like this addition to your CSS:
html { 
scroll-behavior: smooth;
}
1 Like
3

When hovering over the navigation links, I added some padding to it. I thought it would be good.
I will create a hamburger menu for mobile.
Can you give me any other advises to improve my code?
Thank you for your time.

4

I think it all looks good as well, looks really classy.

Definitely get rid of the padding for the hover tho, it looks like a mistake… If you want more of a pop when users hover, then keep the background change like you have it but also have font color change to a brighter color as well.

1 Like
5

@saclark12000 Thank you, I’ll remove those padding for the hover.

6

Hi! I really like your page, it looks super elegant and I love the font choice!

I would maybe consider making the font-size a little bit bigger, especially for mobile. As the viewport gets smaller, the text becomes harder to read, plus this font is definitely on the more condensed side, so that doesn’t help :sweat_smile:

And I’m having trouble looking at the header of your navbar, I think the red color is too bright, I would have gone for something a bit darker or less saturated.

Other than that, really awesome job, I love the design and the responsiveness is there too :slight_smile:

1 Like
7

Hi @ThanoshanMV, your page looks good. A few minor things you should revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • in HTML, you have an invalid use of an element
  • although it doesn’t get pointed out with codepen’s validator for some reason, you have a closing </a> tag that’s missing the closing bracket > on line 19
  • the <script> should be right before the closing body tag, not after it.
1 Like
8

@kristina_v Thank you for your feedback.

I changed the color of navbar header and incresed the font size.

9

@Roma Thank you for your feedback.

Though I included the <script> tag before the closing body tag, the HTML ‘Analize’ link shows me error and I included some JS script for hamburger menu, the ‘Analizer’ shows me error. (I don’t know why)

10

The two messages you see now when running the validator for HTML can be ignored.
Good job!

1 Like
11

It’s much easier to read now, awesome job! :smiley:

1 Like