CSS Grid Technical Documentation Page

Code Feedback
1

Here is my CSS Grid Technical Documentation project:

CSS Grid Technical Documentation

I am pretty happy with how the page out. I learned a lot about CSS Grid building this page, which was why I picked this topic.

It could probably use more content, but I am going to move onto the next project.

1 Like
2

I like your clean and modern design!

I would make your navbar sticky though.

1 Like
3

Thanks a sticky navbar is a good suggestion.

4

Maybe a dividing line between sidebar and main content? Much better looking than mine when I did it tbh :wink:

1 Like
5

Making the Navbar sticky (using position: fixed) will take it out of my CSS Grid, which breaks my layout. I could re-do it, but I think I’ll leave it alone for now. Leaned something new about Grid!

6

Looks nice, I really like your code boxes.

  1. You are missing the fr unit on the grid-template-columns in the #nav-ul 
#nav-ul {
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: repeat(6, 1fr);
}
  1. You can make the menu sticky if you put position: fixed on the <ul> in the nav. For the <header> in the nav you would need to give it a class (so it doesn’t affect your other headers) and add position fixed and top 30px (or whatever top position you like) to it. But then you have to change things on the mobile layout as well. The easiest solution would be to just overwrite the fixed stuff on your mobile breakpoint (position static or initial). You can always come back to the project when you have time and motivation and make the fixed nav work on the mobile layout as well.
1 Like
7

Awesome, thanks a lot for your very specific feedback. I will look into your suggestions when I have time to work on this project again, maybe next week.

8

@lasjorg
Thanks your suggestions worked nicely to make a sticky side-nav.