Tech Documentation Feedback

Hey all,

I have just finished my technical documentation project:

I found this one quite time-consuming in terms of getting content in and formatted and also bit tricky… initially, I had missed the requirement about having a fixed sidebar on desktop, so my first layout was using grid for columns. I had to rework everything at the end. I also got caught out on the headers requirement for each section and had put in h2 and h3 headings which I had to remove to pass the tests.

I found using code/pre elements interesting since there were some unexpected behaviours there with sizing etc… There’s one outstanding thing I couldn’t figure out - I can’t seem to get good spacing on the right-hand side of the pre elements:
The text in those sometimes sits right at the edge when it scrolls horizontally and I couldn’t find a way to use padding or margins to add a little gap.

Any feedback on that, or anything else would be most welcome, cheers!

Wow… it looks awesome! I love what you did with the code/pre elements. Love the pop of colour on the left. This is probably one of the best ones I’ve seen. EVER! :heart_eyes:

I’m not seeing this problem. Did you get it fixed?

1 Like

This is a very nice job. Not a lot to critique here. One minor issue is that you are not allowed to have another list as a direct child of a list. In the nav list you must wrap the <ul> in a <li>.

1 Like

Thank you so much for the kind words!

No, I didn’t manage to fix the spacing thing, but I tried a few different browsers and found it was more of an issue in Firefox compared with Chrome etc. So probably some default browser stuff I would need to override. I don’t think I’ll spend much time on that now though, as I’m eager to move on to the next project!

Thank you!

Good catch on the lists, I was going for a sort of sub-list thing and hadn’t realised I was breaking the rules there. Appreciate it!

I sorted the list and used an HTML validator (need to get in the habit of doing that) which found I also had some other stray closing tags etc. from when I rejigged everything. I also managed to re-add h2/h3 within the headers and the tests passed now, so a good lesson to check things and make sure everything is valid and tidy!

I want to make a suggestion:

Put overflow: hidden; for this:

It will hide the scroll bars though I :heart: the cyan colour line! It makes it look like blockquote

1 Like

Thanks @sowg :grinning:! I was only seeing the scrollbars when the width of the screen was too narrow for the content. I just did a bit of research and learned that it may depend on your OS as to whether they show or not.

I have tried using overflow: auto; instead which hopefully would mean they only show for you when they need to.

Actually overflow: auto | visible are the same thing I think, Correct me if I am wrong

My understanding is that visible will allow content to overspill the parent container, whereas auto will display scrollbars only if necessary.

Check out the examples here: CSS Overflow

I was using scroll before which apparently means you see a scrollbar even if it’s not required, except it sounds like that can be OS dependent (going to try on a different machine tomorrow).

Right thanks for sharing

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.