Hi there! I just finished my technical documentation page project and I would love to get some feedback from you guys!
Here is the project:
https://codepen.io/bogdan-leica/full/zYrNVVa
Any advice is welcome!
Hi there! I just finished my technical documentation page project and I would love to get some feedback from you guys!
Here is the project:
https://codepen.io/bogdan-leica/full/zYrNVVa
Any advice is welcome!
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
Thanks for your feedback mate
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:
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");
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
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!
Thanks mate! I appreciate the feedback
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
@BTheory, some things to revisit;
Thanks for your advice!