FCC Technical Documentation Page bah me

Hey guys,

Looking for feedback and any improvements I can make on this project that was just finished: https://codepen.io/qwirkyrabbit/full/KBzmqX/

Thanks yo!

Pretty nice.
I would not be able to do this.
But if I could I would make the Navigation to fixed on top (maybe hamburger menu) when it get smaller, so I could get jump to section to section as it is on full width;

1 Like

Of course you can man. All it takes it time :smiley:

Good idea on the navigation, I’ll try that out. Thanks!

This looks great. At first I was a little turned off by the borders and gradients, but after scrolling around and looking at everything its all good. May want to credit CSS Tricks somewhere. It took me a minute to figure out why a lot of that stuff was so familiar, but yea a lot of your documentation coincides word for word with their Grid post.

yeah, i actually put credit inside the html code but i’m going to make it visually visible to the ui side of things. Good catch!

Tested out all the suggestions . Implemented hamburger menu and fixed to top when on mobile, standardized most headers with border-radius set to .5rem, and referenced article source on menu nav. I like this new one even better!

This is better, but your menu covers the content at the lower screen size.

I like this page. I really like the animated scroll when you click a link that moves the page a long ways, i.e. from the top to Animation. (Although for repeated use, I might not like it as much.)

If @KoniKodes is talking about when your responsive menu is opened up and you click a link, the beginning of your “moved to” text is under the menu until you reduce the menu back to a hamburger, I’ve seen that before.

I took the easy way out and just moved my menu from the left to the top (and start the text about 150 px from the top) when the screen was reduced and on a smaller screen, the place on the page where the links go* always is under the menu until you scroll up the page. Several other pages I looked at have the same action.

So it’s not just yours. I noticed that on the model page for this assignment, when you are in a smaller screen size and click a link in the menu that the menu just scrolls up with the text and you have to bring it back by scrolling .

tl;dr: I like your page. And I like your implementation of the menu for smaller screens.

@KoniKodes That is exactly what it does as @KahlotusCoder explained it. the hamburger menu expands when clicked on for mobile and you can minimize it back to its reduced width when it doesnt show the navigation items. It gives just enough space on the top portion just before the section it navigates to. Thanks for the feedback guys.

Yes, I see that now.

I agree, the model page isn’t quite the feel I’m looking for on the smaller screen. It cuts off with larger menu choices.

I like your solution. I hope you don’t mind if I try to make that work on mine.

@KoniKodes by all means. Glad you liked it and I’m always on the lookout for elegant solutions so i’ll probably try out different revisions too. If you don’t mind sharing as well, we’d be happy to check it out.

@midnitedev101 Yes, I’m happy to share and get your feedback - once I’ve figured out exactly what I’m doing. So far I just seem to be complicating it…