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!
Good job! Nice hover effects and smooth scrolling going on.
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. https://html5-documentation.netlify.com/
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!
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.
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.
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.
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.
