Feedback for my Technical-Documentation-Page

Hi there! I just finished my technical documentation page project and I would love to get some feedback from you guys! :slight_smile:
Here is the project:
https://codepen.io/bogdan-leica/full/zYrNVVa

Any advice is welcome! :grin:

2 Likes

hi @BTheory

nice work, neat and clean.
it just you forgot to closed your main tag.
canā€™t say much, since i messed up my own tech docs, not done fixing it yet.

regards

1 Like

Thanks for your feedback mate :grin:

This is quite a good effort. At the default text size it works very well. Now we need to talk about responsiveness to increases in the text size. If you donā€™t know how to manually increase 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 increase the text size. Iā€™m noticing a few things as I increase the text size:

  • The left menu gets cut-off at the bottom of the page and there is no way to scroll down to the missing items
  • Eventually the content on the right gets pushed over and a horizontal scroll bar appears. When I use the scroll bar to bring the content back so I can read it, the content goes under the left menu bar and is also still visible.
  • At larger text sizes some of the code snippets start to line wrap and the formatting does not look good.

Iā€™m noticing that you do have a CSS break point for moving the menu above the content for narrow view port widths, so you are set up to move the menu to the top to make more room for the content. The problem is that you are using ā€˜pxā€™ units and so that change doesnā€™t take into account the text size. At larger text sizes you want to move the menu to the top much sooner because you need more horizontal room. The solution here is to change from ā€˜pxā€™ to ā€˜emā€™ units in your break point:

@media only screen and (max-width: XXem) { ... }

Iā€™ll let you decide on just what that XX value should be. Using ā€˜emā€™ units makes your page responsive to both changes in the view port width and changes in the text. Note, this still wonā€™t solve the problem of the bottom menu items being cut-off when the height of the view port is not tall enough to show them all.

Youā€™ll still have the issue with the formatting of the code snippets. I would suggest that you format them as mulit-line examples so that each line is shorter to begin with and thus they will never line break.
so instead of

function greetMe(yourName) { alert("Hello " + yourName); } greetMe("World");

you have

function greetMe(yourName) {
  alert("Hello " + yourName);
}

greetMe("World");
1 Like

Hi,

You have understood that less is more. Nice choice of fonts, the eye rests and the page looks ordered and clean. I have always been wrapping li tags around divs and it never occurred to me to do the opposite. Itā€™s so simple and clean. So does your code but for a few orphaned classes.
Your div with id ā€˜responsiveā€™ has a ā€˜disbledā€™ class and thereā€™s a class called ā€˜spaceā€™ but I donā€™t see what it does. Thereā€™s also a display property with a ā€˜columnā€™ value.
Itā€™s also beautifully responsive, except for the code examples. When the page shrinks, they donā€™t wrap nicely but I think it can be easily fixed by wrapping them into a div. Itā€™s a minor detail.
Greets,
Karin

1 Like

Hi there! Thanks for taking your time to write all the advice, I will use it to fix my project and in some future projects. The code snippets really gave me a headache on mobile devices.

Hi! Thanks for taking your time to give me some feedback. I will fix the code examples (which gave me a headache because they were much worse than how they are now) and also, the ā€œspaceā€ class was created to have a little space between the paragraphs and the code examples, but I think that wrapping them into a div would be a much better idea.
Thanks again for the feedback, and sorry for my bad english.

Looks really nice! I think you did a great job!

1 Like

Thanks mate! I appreciate the feedback :smiley:

1 Like

UPDATE: I fixed the problem with the code examples, all i had to do was to add line-height: 2rem; to code.

Hey buddy, yeah you completed the ā€œTechnical Documentation Pageā€ by practically copying the sample that was provided to help you know what a project like this should look like.

Honestly, I think true learning begins once you stop trying to outsmart yourself. You need to be able to think independently, transform the knowledge youā€™ve gained and make your own stuffs.

FYI, Iā€™m not even near a junior dev, Iā€™m still a beginner, down on my Portfolio Web Page, I donā€™t have all figured out but copying someone elseā€™s work isnā€™t what I want. I get stuck too but when I do I seek for ways to fix the problems and build a working solution.

Hello there! All I took from there was the information about javascript, since I didnā€™t have any idea about what information should I write. But still, I appreciate your feedback, thanks :slight_smile:

@BTheory, some things to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
    • You can ignore the warnings about lacking headers if you want. Those are warning and are there to make your page more semantic.
  • 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.
    • The one for HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it, thereā€™s something to clean up.
1 Like

Thanks for your advice!