Technical Documentation Page on Grids Feedback

Hello - I had a stab at the technical documentation page. The topic is CSS Grids, as I wanted to keep it somewhat simple and I had my notes on hand from the FCC CSS course. https://codepen.io/zara-knox/pen/BazKERJ

I’ve kept it fairly basic, with not too many bells and whistles. It’s not too in-depth either, as I am quite keen to get to the dreaded Javascript section soon. Still, would appreciate any input!

Thank you.

Your page looks good @ZaraK. Something to revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks.
      Or skip the <pre> tag and do the following in CSS;
code {
  white-space: pre-line;
}

It’s fine for now. Your page passes all user stories and is responsive. You may want to revisit this in the future when you’ve more experience and see what you can do to prevent the section and nav links running together when a user clicks on a link when on a smaller screen.

1 Like

Thanks Roma, that worked a treat. No breaks for me!

1 Like

I think this looks great and in particular I’m a big fan of the shade of green you’ve used for the text of your code blocks :slight_smile:

The issue that I can see is that on mobile view, your nav links hover over the main part of the page as @Roma mentioned:

I am definitely not an expert at this, and there’s almost certainly a better way of doing it, but a quick fix would be to give your #navbar a background color and change the color of your .nav-link text in your media query:


I’m still very much just learning this stuff so someone else can probably give you a better suggestion.

1 Like

You’re right! I used something similar to what you have done in my last project. So much better for fixed navbars. I think I rushed this one a fair bit because technical documentation = yawn to me. But it’s true, I should put the effort in!

Also, can’t beat a bit of Matrix green :smiley:

Thanks, I appreciate your thoughts!

1 Like

Your page looks really good. The only issue I see is on a mobile screen the navbar covers up some of the text that you’re jumping to. I had the same issue on my landing page and I fixed it with the following code. I can’t remember you told me of this fix, but it works, you may have to play around with the numbers a bit to dial it in.

section {
    padding-top: 90px;
    margin-top: -90px;
  }
1 Like

Hey, that’s a really neat fix! Thanks so much for this. Added that in.

How do people figure this out? So much to learn!

Oh yeah, I’ve gone back and changed those 90px to 5em, as all my other units are in em and I’m a stickler for keeping everything even. :slight_smile: Thanks again!

You could also add

html {
  scroll-behavior: smooth;
}

to your css if you want it to scroll down to a section rather than jump. You may well be aware of this ability already, in which case, please ignore me. I just think it looks a little cooler :slight_smile:

1 Like

Oh yeah, I’m a massive fan of the smooth scroll! I just figured that if this were a real tech doc, users would want to jump straight to the section they needed, if that makes sense.

Thanks for the feedback, Gordon. It’s so great to hear what others have to say, as I don’t know any coders myself.

1 Like

Me neither, hence why I’ve started hanging out on here :slight_smile: Feel free to shoot me a message if you wanna talk through any other bits and pieces - from what I can tell we’re at a pretty similar level at the moment.

That sounds great! I felt like everyone and his dog knew how to code, but it turns out no one in my little bubble does. I may not be able to offer much in the way of expertise, but it’s always good to have someone in your corner.

Cheers!