Technical Doc Feedback

I would love any feedback and comments on my technical document project. You can find it on codepen here: https://codepen.io/katiebug72/full/jpgJqX/. Thanks so much!

Hey the project is amazing =D. The layout is clean and the wordings are concise =). I have no complaints about the page , its perfect to me. So i have nothing to comment there.

If one thing i can advice is the css part of the code. I think its better to work with rem than em. Using em is fine but personally i think rem values are safer. This is because ur guranteed to have ur values relative to the root level px.(which is the browser html 16px font by default).

Using em can cause wrong sizing if ur not careful. For example if let say if u have multiple divs nested with each other. And u set one of ur divs element font size to 10px . If u use em for one of ur child elements like padding/margins it will use the 10px for calculation instead of the default 16px.

In summary

Em - relative to parrent container size.
Rem - relative to root container size

Hope this helps =0

1 Like

It looks very good and neat, i like the color tone, the border looks good for the links and if you make the anchor elements outline: 0 it will look even better,

And i see some alignment problems, @680px the navbar looks little bad, maybe you can increase the width of it.

Maybe you can follow a better media query breakpoints, bootstrap has a good one,

// Extra small devices (portrait phones, less than 576px)
// No media query for xs since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

Next is in mobile view i found a very small problem, in text overlapping in the grid section

Other than this, everything looks nice, good luck.! :wink:

That’s extremely helpful! I knew that relative sizes were better than px, but I didn’t have a good understanding of em vs rem. Thanks so much for providing a clear explanation. I’ll definitely switch to using rem :slight_smile:

Thanks so much for your feedback! I went through and fixed the things you mentioned. Following more standard breakpoints is definitely a good idea. I actually changed my breakpoints to match the ones that Bootstrap uses. Thanks for pointing me toward the bootstrap overview resource too :slight_smile: