Hello coders!
I just finished the technical documentation page project. It was a fun project, I learned a lot regarding positioning.
I’ll greatly appreciate any feedback to help me improve.
https://codepen.io/Kassatay/pen/jOWMvKJ
Thank you in advance for your feedback
I noticed that when the window sizes is brought down to very small corner window you lose access to your nav-bar. I had the same problem in the beginning. Here is my code with my solution.
My tech doc
-Justin 
Hi Kassatay,
You are using a sophisticated and beautiful color scheme. I like the fonts but the font sizes are somewhat problematic. The font size for your code is bigger than the font size you use for explanations as if they’re just footnotes. And your main title is smaller than the one beneath it.
I also like the little visual cues like that red border and the ovarall layout of your page.
Your code is not indented! You can fix this easily this using pre-tags.
I would also refine the @media rules. On a phone, the page is not centered and the nav partly overlaps the text beneath. You could use a fixed height and overflow scroll if necessary. I’ve done this project in the past and it took quite a while to get all that working correctly. It’s a lot of fiddling with the code.
Hey there, things look really good here.
Like @mientje stated, the smaller screen size has the Nav overlap the main section.
I would remove the list decorations for your Nav links on the small screen size, since they don’t line up straight it doesn’t look as clean.
That’s really all I can see. Keep at it!
instead of using the dev tools to resize the window, just set it to full page view and take your full browser and make it smaller.
As you can see when the screen is snapped to the corner, you lose the ability to access the last 3 links in your content list. In mine, I used a media call to adjust it.
Before hover
After hover
Hope that helps clear up what I am trying to say.
Hello mientje,
Thank you for your feedback, I appreciate it!
Yes, the font size is not consistent on the page, I’ll change that.
Indeed, the code is not indented.
At the beginning I tried something like the following (as I wanted the code to display as a list), but I wasn’t sure it’s the correct way 
:
<ul>
<li><code>@include typography(button)</code></li>
</ul>
Then I saw on the sample page the “white-space” property was used and all codes were nested inside a single “code” tag. I tried it, but I noticed that I couldn’t indent the code properly as a result.
I’ll try with the pre-tags, thank you I didn’t know about these.
Regarding the layout, it’s really strange because I get two different results whether I use Chrome or Firefox. (see below).
On chrome it’s centred.
What tools are usually used to verify if a site is responsive?
Thank you again and sorry for my bad English.
Great I got it!
I usually use the dev tool to verify and I didn’t notice it.
Thank you so much for your help, I’ll fix it now.
Yeah, it’s good for quick glances but nothing beats a real test.
Hi,
It’s a problem. Firefox and chrome don’t implement the dom identically. You can spend hours and hours tweaking the settings. It just never ends, so I advise to leave it for a while and then get back to it later on with fresh eyes.
I only use the ‘toggle device toolbar’ in chrome. If you open the dev tools you see this icon of two phones to the left of ‘elements console sources’. Click on it and then you can choose different kinds of devices that frame your webpage. (at the top above your webpage there’s a toolbar and there’s another hidden on (three dots) that shows the boundaries of the @media rules. Firefox has something similar but chrome’s is still the best. Still, these are always an approximation so the only way to really know everything works the way you want it, is to look a at webpage on different devices. I use all my friends’ phones and laptops for this. There are also paying websites that use virtual machines (I believe) and I suspect they offer good quality but I haven’t used them yet.
Greets,
Karin
Yes definitely, Now I’ll try on several devices to see the results.
Thank you again.
Hi ,
Thanks for all the information, It really helps a beginner like me to get good habits from the start.
Hi codecory,
Thanks for the feedback, I appreciate the support!
Page looks good @Kassatay. Something to revisit;
Main thing to point out is that you’re not nesting code within pre. This is the error message(s) you see in the W3C validator. The way you want to do it is to nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks. Or you could do
code {
white-space: pre;
}
in CSS and skip the <pre> tag in HTML.
Thank you so much for your feedback,
I always forget to run my code on the validator. I’ll correct this now.