Feedback on JS Technical Documentation Page

Code Feedback
1

Hi,

For the project I used grid for the site layout. I am actually satisfied with what I made, although there are some things that I couldn’t manage and I am asking for help:

  1. If I narrow the window width, the main section starts to go “underneath” the sidebar, how can I make it stay in it’s place? I think it has to do with min-width property I set for the sidebar…
  2. I got the code elements pretty much centered vertically, but I don’t know if there is an easier way to do this? I used padding…
  3. Is the correct way putting the header tag inside the article tag or should they be separate?

And lastly, I would appreciate thoughts on the responsiveness of the website. I only have 1 media query and any tips on how to improve that aspect are welcomed!

https://codepen.io/dostrelith/pen/ZEGRBLG

2
  1. You can try using the fr unit instead of vw.
grid-template-columns: 1fr 6fr

Or remove the min-width: fit-content on nav and use min or max content on the first column size in the grid.

grid-template-columns: max-content 1fr

  1. Can’t you just use left/right auto margin on the code elements? Also, if you do not let the text wrap the boxes will just overflow the page.

  2. Not sure I know what you are asking here. I will say I’d prefer if the header element had a heading element inside it (like an h2), not that it’s a requirement.

1 Like
3

Thanks!

  1. I really like the max-content for the column width solution!

  2. I think I got the hang of margin-left/right: auto now, but I am asking for a method on vertical centering inside the box.

  3. I am asking because I saw the example codepen structured as:

<section>
    <header>
        <article>

It made more sense to me for the article tag to have a header tag inside it. h2 in the header is probably a good idea to help formatting. I wonder if these different structures have screen reader/SEO impact.

4

Also, similar to:

Do you know a good method to handle grid-template-rows? I tried using max-content for the title row:

grid-template-rows: max-content 6fr 1fr;

but it messes up the structure completely.

5

  1. My bad I totally missed the vertical part. If you remove the line-height and min-height and just use the same top/bottom padding does that not work for centering the text inside the code boxes?

  2. You can have a heading for the section and a header inside the article (example, from this MDN page).

  3. I try not to set grid rows unless I have to. When your page is not stacked I don’t think your grid-template-rows is doing anything, nor should you need it. When it is stacked I would still remove the grid-template-rows and just give the sidebar/navbar a fixed height inside the (max-width: 640px) media query.

1 Like