Documentation Page First Draft

Documentation Page First Draft
0

#21

hi @zebedeeLewis.

This looks much better! It’s much easier to keep track of your cursor and what you’re pointing at. Good job!

One thing that still bugs me is that the content on the right jumps when the div expands. This (again) makes the text change lines, which causes a really messy effect. I would change the content div’s width. Either make the nav div expand into empty space, or make sure that the content div has some space on the right to move to. Either way, the text shouldn’t jump lines (it says the same when the viewport size is much smaller, which makes it easier to read than the desktop version).

Finally, the drop shadow on your navbar is nice, but imo a bit overdone. @Gigusek already linked to the material guidelines - and I agree with his point of view. A smaller shadow would make the nav blend in more seemlessly with the rest of your page.

I think you really nailed it with the timing on the nav bar’s transitions - so keep it up!


#22

@Gigusek @Vivovix I fixed the shadows. I think it looks a lot cleaner now. I also fixed the problem with the main content jumping to the right when the nav menu is toggled. I’m still going over material design but I think I’m learning how to use shadows more effectively. What do you think? Anyone else’s input would be much appreciated. Thanks


#23

@zebedeeLewis This looks much, much better. I definitely agree that it is cleaner! The amount of shadow is still a bit too much, imo, but it is now becoming a matter of personal taste.

Small issues: sub-nav items don’t jump to the right section (e.g. http-message, clicking on request brings you to general structure). Moreover, expanded items stay expanded when the nav div collapses (this could be a design choice, for technical documentation this could actually be intended but I’m not sure if you did! :wink: )

You could also add

html { scroll-behavior: smooth; }

just for the extra oomph.


#24

The shadows definitely keep looking better with every update! :stuck_out_tongue:

Vivovix mentioned scroll- behavior, it’s nice but unfortunately not really supported outside of Firefox and latest Chrome versions (https://caniuse.com/#feat=css-scroll-behavior) so javascript is still needed here for full smooth scrolling experience. Not that you shouldn’t add that 1 line and cater to 67% of internet users that will indeed see the change.

I also noticed a small problem with your burger menu icon, it doesn’t do anything on big screens since you’ve made the navigation extend automatically on hover. You might leave it like this if you want, remove it on wide screens or apply few small changes - remove the hover effects and change the cursor to “default” on hover to remove any indications that the button is supposed to do anything, while leaving it on smaller devices exactly as it is.


#25

Yeah this was a design choice. I wanted the user to be able to go back to the navigation without having to repeat the same steps to get to a state they had already entered. As for the mismatch b/w the anchor tag text and their targets, I’m not focusing on that right now since the content isn’t final. I’ll put in the scroll-behavior shortly. I will keep working on the shadow. I’m sure I will get it just right. Thank you for your help @Vivovix.


#26

On larger screens the burger menu is meant to lock the navigation menu in the open state when activated. I created an two new svg icons to represent this intent. Let me know if it makes sense.


#27

Hello Zebedee,

Great job! Looks cool and I like all the gizmos, movement, shading, etc. I’m with you:
the more gadgets you throw in and (try to) bend to your will, the more you learn. : ) Probably not what you’d do IRL, but a great stretch exercise for a portfolio project.

Your colors seem fine to me although I am NOT strong in that area, but I do know what I like. : ) Typically I go to https://www.materialpalette.com/, click two colors I like, pick a couple more from the helpful color palette that pops up, and call it good…

Also, the lock/unlock icon seems backward to me. My thinking is the slide out menu would “lock” in the open position? Could be just me…

AND (my 2 cents) not sure you are going to get your dream job right out of the gate: Instead of waiting to hone that last bit of tech you want to get under your belt, you might want to consider starting to apply now. You certainly have skills (your documentation project is awesome!), but it might/could/potentially/maybe take longer than you think to land that first gig. Once that happens I’m sure you will be off to the races, but until then it might not hurt to toss a couple around. If you’re not ready or it doesn’t feel right, you can always decline…

I like your attitude and how you interact/listen to other people’s suggestions/comments. Critical skills when you begin building real solutions for real clients… : ) I think you’re going to be very successful!

Do good. Work hard.
-djb