Rate my project - Technical Documentation Page

Hey everyone! Would really appreciate any feedback and critique of my project. Also if anyone has any solution to the overflow of the code section when resizing the window?

Technical Documentation Page

1 Like

Also forgot to mention! Took some inspiration from css-tricks :slight_smile:

Hey Miyagii!

It looks nice, well done!

As for wrapping code - you can look into white-space property. I am not sure whether that’s the best way but it worked for me :stuck_out_tongue:

3 small things that came to my mind:

  1. Blocks that contain more text are a bit hard to read. The lines are a bit too long. You can try to shorten it or increase the line height a bit maybe? For example “JavaScript and Java”
  2. On navbar, the “>” sign makes me thing that after a click the topic will expand with more sub-topics.
  3. I know its your choice but the black background seems a little too dark. I would make it slightly lighter.

Like I said - those are tiny things, that not everyone even has to agree with.
Cheers!

1 Like

Also another idea for smaller windows - set overflow to auto

1 Like

Hey Kubus!

Thank you very much for the kind words and the time taken to leave your suggestions! It is very much appreciated. I’ll make some adjustments soon and see how your points make a difference :smiley:

Peace!

1 Like

Hello @Miyagii. Your project is so cool and the design is fantastic. But, these tips are recommended:

  • Add html {scroll-behavior: smooth; } to your CSS code. Now click on the links in the sidebar and you will get a very cool smooth scrolling effect.

  • You don’t need to add the head element and the body tags in CodePen. It’s already set for you. Only include the code that goes inside the body tags. If you want to add any tags in the head, do the following:

    • Click on the settings icon at the top of the HTML box.
    • Enter your code inside the "Stuff for <head>" box.
  • There are some errors in your HTML code. Validate it with the built-in CodePen validator by clicking on the down arrow at the top of the respective code box and click on Analyze.

Anyway, great design and font choice. I like it very much…

1 Like

Your page looks good @Miyagii. Something to revisit;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user. (Your media query negates laptops)
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • The code snippets fall out of the container on smaller screens.
1 Like