FCC project 4: Build a Technical Documentation Page

Really liked that this project foreshadowed some of the arguments that are gonna be taught in the next part of the curriculum, so that you’re not completely blown out of what has become, more or less, your “comfort zone”.
That said, I’m not satisfied with how the navbar link in the query turned out to be, and I’ll remake it once I know what to do with it. for now that’s all, cya :japanese_goblin:

Codepen:
https://codepen.io/Katroya/full/NWGomqq

Do you know how to increase the text size manually? If not, with Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. It won’t take long before you see the problems.

The first thing you can do to fix this is to use ‘em’ units instead of ‘px’ for your CSS break points. Using ‘em’ allows your page to take both changes in the view port size and changes in text size into account when using break points. Right now your break point is at 768px. To ballpark the equivalent width in em just divide that by 16, which gives you 48em. That’s a good starting point in which you can adjust as needed.

The second issue is that for your wide view styling you have the main set to left: 350px, which doesn’t allow it to take into account width changes in the nav as users increase the text size, so the nav text starts to overlap the main text. You should try to use ems for width wherever possible to allow for horizontal expansion. Or you could put a max-width of 350px on the nav so it doesn’t grow as the text size increases. Completely up to you.

Last thing I’ll mention. I think the nav should come before the main element. For people who use a mouse this isn’t an issue. But for keyboard users this is very noticeable, especially when the nav flips to the top of the page in narrow view. Most people will expect to tab through the nav first instead of last.

1 Like

Page looks good @Katroya. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to a font would go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are coding errors you should address.
    • You can ignore the warnings if you want. They’re telling you how to make your page better using semantics.
  • Codepen provides validators for HTML, CSS and JS.
    • The one for HTML misses a lot which is why I recommend W3C
    • The CSS one is good. Run it. You didn’t close something.
  • Make your page responsive. On smaller screens there is content that falls out of the container.
1 Like

Thank you, I’ve rebuilding the css following your suggestions and I can really see the benefit in using rem/em units, it really simplifies a lot of things.

Thank you both for the help, I’ve updated the pen with the css built thanks to bbsmooth’s suggestions and now it works a lot better than it did before. I don’t understand why scroll-behavior works in firefox but does not in neither opera nor chrome, still happier than before tho.

Smooth scrolling seems to be working for me in both Chrome and Opera. I’m on Linux though, so maybe it doesn’t work on the OS you are using?

The responsiveness looks real good now.

Good job cleaning things up @Katroya. One more thing. I either missed it last time or you’ve added it when you did your updates.
Don’t use <br> to force spacing or line breaks. Use CSS.

I thought that it was ok to use it to format text.