Technical Documentation Page - First attempts at simple CSS animations!

Hey all, just looking for some feedback on my Technical Documentation Page project below.

This is my first page where I’ve started to play around with some simple animations. I initially had some trouble with horizontal scrolling on mobile phones, which I think was to do with the menu moving to the top of the page having it’s own scroll bar along with the main page scroll bar. I think this is all fixed now by using the following code:

html {
overflow-x: hidden;

I think I read that this might not be the best way of solving that issue but I can’t remember.

All of your feedback is really appreciated anyway, and any advice on ways to improve the coding or design would be great!

Thanks all!

Good job! Nice hover effects and smooth scrolling going on. :tada:

Your navbar is cut off and I can’t see all the menu items. (I am on a laptop).
Using a fixed width for navbar on mobile view is fine but it’s too big. I would do something like a toggle to expand navbar off and on. here is an example of how I did it.

Good luck :+1:

Hey thanks for the feedback!

You should be able to scroll down through the navbar when its at the top of the page, though this probably isnt very clear and it’s also a bit clunky. I will see about switching it out for a toggle button like you showed!

Thanks again!

Great job. The color combination is really nice and I also agree with @shimphillip about the toggle idea…

Nice design.

You only pass three of the sixteen user stories though.
In your CSS you call ‘main’ two different times (lines 27 and 158)

Cheers for the feedback, I’ve gone back and got rid of one of the ‘main’ sections within the css.

For most of my projects, I’ve decided not to follow the user stories exactly. This is mainly because I prefer using classes rather than IDs, as well as it letting me be more flexibile in previous project designs.


I understand.

Not to get off topic but it makes me wonder how flexible FCC is when it comes to offering the certification. Since this is your last project in Responsive Web Design could you let me know.

I’ve just had a look for you and I was able to claim my certification once I had added links to all of my responsive design projects.

There is the ‘Academic Honesty Policy’ which states that “freeCodeCamp’s team will audit my projects to confirm this”, but I have a feeling this is mainly to make sure there is no plagarism.

Hope this helps!

Good deal. Thanks for checking and he prompt reply @Nomad89 It’s good to know that I can deviate a little while still meeting all the criteria.

No problem @Roma, glad to help!

On Desktop PC and the whole main is moved down and over by a little. Looks a little weird.

If resize my viewer port, the navbar is cut off with no way to scroll up and down it.

Very nice use of colors, Organized CSS, etc. Trying use CSS Flexbox, it is a very nice framework and will help you significantly.


You used a reasonable amount of CSS/ HTML considering how it came out. Overall, 9.8/10.

How did you do the smooth click transition for the navbar?


Please hit the reply button or I do not get notified.

Helpful tools–>

Cheers for the in-depth feedback @michaelnicol !

The offsetting of the main information was me trying to sort of get it to look like a floating document, though I understand it can look maybe a little odd.

I never even thought about the navbar being cut off when the viewer port is resized vertically, I will see about it collapsing for both vertical and horizontal scaling to sort this.

To answer your final question, do you mean the smooth scrolling? if so then its just the piece of code below. I thought it fit well with the other subtle animations.

html {
scroll-behavior: smooth;

Thanks again for the feedback!
Everyone’s feedback is really helpful as it helps me to spot things I wouldn’t normally think about.

1 Like

I can’t take a screenshot since on my school laptop they are disabled, but on a 14.2 x 8 inch display (16.3 inch diagonal) the navbar is cut off naturally and will not allow me to scroll up and down and use it.