Rate my project - Technical Documentation Page

Code Feedback
1

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
2

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

3

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
4

Also another idea for smaller windows - set overflow to auto

1 Like
5

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
6

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
7

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
8

Hey Paulsontech! Thank you very much for the kind words, really appreciate it :smiley:

  • Iā€™ve tried to add the property scroll-behavior though itā€™s not working on this project specifically, although it does on my other projects :man_shrugging: Iā€™ll have to look further into this.

  • Helpful tip! Thank you :slight_smile:

  • Errors fixed. Thanks for another tip on how to error check!

1 Like
9

Hi Roma! Thank you :smiley:

  • Mine is saying 16/16 without changing it :man_shrugging:
  • Dangā€¦ Iā€™m still trying to wrap my head around web responsiveness, how did you understand that it negates laptops, was it from the width Iā€™d used on my media query?

Really appreciate the feedback, thanks Roma!

10

Iā€™m on a laptop and the test fails for me but saying it negates laptops was a poor choice of words on my part.
Setting a breakpoint at 1380px is setting it for a large screen. Neither my laptop screen or my desktop screen is that large.

You can search for media query breakpoints. This is pretty typical;
(scroll down to ā€˜typical device breakpointsā€™

1 Like
11

Hmmmā€¦ That seems so strange. You typed scroll-behaviour instead of scroll-behavior (notice the u at the end). But, that didnā€™t seem to fix the problem. Another problem I found is that you already had an html selector. So, I put this property there and tried again. Still doesnā€™t seem to fix. :man_shrugging:

1 Like
12

@Miyagii
Yes, you have a typo there but it still doesnā€™t work.
I am not exactly sure why, but if you move this property to * {} - it will.

1 Like
13

Quick answer is;

  1. Spell the property correctly. The standard states that spelling is US English
  2. Place it correctly. If the property: value; (scroll-behavior: smooth;) is placed in the #main-doc declaration it works as expected.
    Read more here;
1 Like