Round 4 - technical documentation page

Hi everyone! The technical documentation page I finished is about css animations: https://codepen.io/2_rt_2/full/WNQKRNO. I actually didn’t mind working on this project after struggling with the product landing page. I’d appreciate any feedback you might offer. Thanks again!

1 Like

This page has a great design and the functionality is great.
Just one simple mistake I found. When in mobile view, the buttons don’t work. I’m supposing mobile view was made using a media query. Most probably there is a problem in the button when in a media query.
Note that I don’t know how to fix this, you should wait for a more professional person to solve this.
However, in general, this page is great and seems responsive from my device.
Great and good luck coding.

@rrrach_2 , This is really good documentation page and design is also looking so good.
Additionally I suggest to add some padding to the bottom of your side nav in general view,
and remove the border-bottom from the media query with navbar. You also may add light background color to your nav link or navbar in media query so that instantly a user can identify the menu and document part without a confusion in small devices.

Hope you also will enjoy the result.

Thank you.

Also you can use text-align justify for small devices, that will be looking better.

Nice job on your tech doc page @rrrach_2

thanks @JPGC04! i’m not sure what you mean by “buttons.” are you referring to the link elements?

thanks @thetradecoder for the suggestions! i’ve implemented a few–the padding-bottom for the side nav and the light background color for the navbar. i wasn’t sure how much padding-bottom was appropriate, so i made it 200px.

thanks @Roma! i’m slowly learning more after completing each project.

1 Like

@rrrach_2

bottom-padding to side nav 3rem or 50px is enough to look better. You may try this and see the result.

Thank you.

initially, i did set the bottom padding to 50px, then i changed it to 200px. i tried to check other technical doc pages to compare side nav bars, but yea, mine just kinda looked weird lol. thanks @thetradecoder for clarifying!

Everything is perfect, probably you have to add @media screen for all text on your page or exactly for the body to make it bit smaller so all text will be visible on I-Phone X. Try Google dev screen simulator to see if it is perfectly responsive.

I was guessing that the main titles like reference and @ media and these one at the top of the page for mobile view.
I guessed these were buttons which took you to the specific section of the pages.
Sometimes one of then worked other times it didn’t.
That’s not that important. Don’t worry. Good luck.

thanks @i-tech! i’ve added media queries and adjusted the font size, so they’re responsive on iphones.

thanks @JPGC04 for clarifying your earlier comment.

1 Like