Technical Documentation (CSS Refresher) - Feedback Appreciated

Hello Fellow Campers,

Here is my Technical Documentation project (my final project for the Responsive Web Design certification!). I would greatly appreciate any feedback you might have, or any suggestions on how I could improve it.

Thanks!

https://codepen.io/monksy/full/zbVoOx

1 Like

it looks so awesome man , keep it up man
Happy coding

Thanks a lot @Gunjan. Appreciate your kind words. Happy coding to you too :grinning:

1 Like

Looks great!

Here are some minor suggestions:

  • center the box-model-img, and allow the image to shrink on smaller screens. Right now, the image spills out at 420 px width, which allows you to “scroll” to the side and see the background image.
  • in the span example, the css code spills out of the box around 470px. Consider setting overflow-x to scroll or wrap on doc-block.
  • what you think about making the scroll animation smooth with scroll-behavior: smooth?
  • on the nav bar, I think it would be nicer if the clickable area was consistent. Right now, longer menu items are easier to click. I also think it would be nice for the nav bar items to have some kind of a hover or onclick state.
  • finally, I noticed that the width of the main area jumps between 2 transitions. It would be nice if the jump was less noticeable.

Your design is so cool! I love the background you got there.
I noticed your media queries were just “@media (min-width:).”
I’m just a newbie, but I’ve been told to use “@media only screen and (min-width: )” because otherwise, it targets screen readers as well. But maybe you wanted to target screen readers.

Wow, great suggestions @kiwisquash. I will definitely work on these. Regarding the 2 transition points, I agree with your suggestion, but do you think this is something the average user would notice, or just people like us who are specifically resizing our browsers to test the responsiveness? :thinking:

Thanks a lot for taking the time to provide such detailed feedback.

Yeah, out of everything I listed, this is definitely the least important thing :slight_smile:

And thank you for sharing your work. It’s giving me inspirations for my Technical Documentation project.

Thanks @busyhero! I wasn’t aware of that. I appreciate the tip, and I’ve changed my media queries to “only screen”.

Okay, @kiwisquash… I’ve implemented them all. I’m much happier with the nav bar, smooth scrolling, and responsive image. Thanks again for the great suggestions!

1 Like

This looks excellent—for all I know, this could be the official documentation page for CSS. Great job!