Feedback on Technical Documentation

https://codepen.io/shawnby222/pen/KKprLKm?editors=1000

How does it look? Is it easy to read and navigate? How is the responsiveness? Is the code efficient?

Thanks in advance.

1 Like

Looks good for a beginner but next time maybe, a bit more color?

Hi @shawnby222 ! :wave:

It looks a bit stark indeed, but do we care for technical documentation ? :slight_smile:

Maybe could you grab a few tips there : http://forum.writethedocs.org/
The forum is not active that much anymore but you’ll find plenty of advice.

Here’s also a worth reading post :slight_smile: https://guides.github.com/features/wikis/

Yeah I figured since it’s just technical documentation, I don’t want to distract the reader.

Your page looks good @shawnby222. Some things to revisit;

  • Your page passes 13/16 user stories. You’ll need to have them all pass before you submit the project.
  • You kind of formatted your code in HTML but as you see, the whitespace and line breaks were not preserved in your document. There are two ways to resolve this. Either nest multi-line <code> snippets in<pre> </pre> tags in HTML or you could do
code { 
  white-space: pre; 
}

in CSS and skip the <pre> tag in HTML.

  • Maybe make the font a tad larger on smaller screens.

As an aside, I didn’t add color to mine either. It’s a tech doc so I didn’t add anything fancy. One thing that might make it easier to read it so add a non-serif font like ‘Open Sans’. You can get a link to it or import if from Google fonts.

1 Like

@Roma,

Hey, thanks again for the feedback. I wasn’t sure how to fix the code problem, thanks for the direction. For some reason white-space: pre; didn’t work in the CSS, so I just put it in the HTML by nesting the code within it.

I think your right about the look and readability of that ‘Open Sans’ font. I appreciate the input.

Good job @shawnby222…does look better with ‘Open Sans’ but there’s something else you need to do. (Should have mentioned it earlier)

  • Not sure if you noticed but even though you’re using the <strong> tag the text on your page doesn’t render as such. This is because when you imported your font you only selected regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700). Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.
2 Likes

Ahh you’re right, I didn’t realize I needed to embed the bold version of it for it to render that way. Thank you!

1 Like