Technical documentation - open to feedback!

Code Feedback
1

Hi all!

I just finished the technical documentation challenge. I stuck pretty close to the FCC example and didn’t go overboard with the styling as I figured a site like this should be simple.

I am happy that I managed to reverse-engineer the code box with counted lines, which I saw on the MDN docs.

Let me know what you think and if anything can be improved–thanks!

Here is the link:
https://codepen.io/qvistsson/full/zYvaKpZ

Edit: updated link after some fixes!

Oscar

2

Congratulations. I think it looks great. Though the hover effect can be improved. Try applying

.nav-link{
      transition: margin-left 500ms linear;
}

so that when you hover over the nav link, the margin changes gradually . Happy coding!

2 Likes
3

Thank you! I put in the transition and it does indeed look nicer :slight_smile:

4

I was looking for inspiration for my own tech documentation and… you have set a very high bar. I love the code lines!
love foobar!! :rofl:
i personally think that paragraphs need a serif font for easier reading, but this is nitpicking on my part.
good work!

1 Like
5

Thanks @tommytucker !

If you want to do something similar to the code lines, the trick is using the :before selector and CSS counters :slight_smile:

I agree that serif might be easier to read, but sans serif just feels a bit more tech-y :joy:

1 Like
6

@qvistsson Your page made me jealous of how good it was, :grimacing: so i pushed myself and started the tech doc page last night and finished styling this morning;

7

Looks good @qvistdev09. Something 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 coding errors you need to address.
1 Like
8

Thank you so much @Roma!

I forgot to validate, and it turns out code is not an allowed child of ul, so I had to refactor a lot of my styling. It is fixed now! :slight_smile:

9