Technical Documentation Page - CSS Grid

Code Feedback
1

Hello, all.

I have recently finished my Technical Documentation Page project and I would greatly appreciate any feedback that you have to offer! With the nature of the project in mind, I would love to receive input on content as well as the page structure and styling.

I hope you’re all having a great day and I look forward to your input!

https://codepen.io/james922/pen/dLWyev

2

Good job! Here are few suggestions I have for you.

  • Give line-height:1.5; to your paragraphs. It will improve readability by giving spaces between lines.
  • Format your code. Using <pre> tags will help
  • Instead of removing the menu on mobile view, consider have it fixed on top of your page and make it toggleable.

Cheers :slight_smile:

2 Likes
3

Many thanks for your feedback!

I will explore the topics you have brought to my attention.

4

Your first couple of points helped me to clean up several other things I have done or am currently working on. Thank you again!

5

Exploring this option has led to some unexpected results and I wonder if I am missing something obvious. Without using css styling on the pre tag, the content that follows the first line is shifted far to the right. None of the recommended styling seems to fix this and I’m hoping you won’t mind pointing out the obvious .

Here is a sample from the page that I am working with:

Here is the CSS for the nested grid:






#nestedContainer {

grid-area: d;

display: grid;

width: 100%;

height: auto;

grid-template-areas:

“sidebar header header”

“sidebar main main”

“sidebar main main”;

grid-template-rows: 1fr 1fr 2fr;

grid-template-columns: 25% 25% 50%;

}

Does anything jump out at you here?

6

The first and last couple of lines were cut from that snippet.

<pre>

<code>

…

</code>

</pre>

7

I took one of your code snipeets under “Grid Items” and converted to this, which formats your code.

<pre><code>#firstChild {<br> grid-row: 2;<br> grid-column: 2 / 4;<br>}</code></pre>

Is this what you have questions about?

1 Like
8

I think that I just have a misconception about how the pre tag works. I was under the impression that it could allow me to format without the extra br tags, etc. When I attempted to use it in that example, the contents were pushed far to the right, mostly outside of the box provided by the code tag. I’m continuing to explore the tag and its impact.

Thank you for your reply!