Technical Documentation Feedback - CSS Grid

Code Feedback
1

Hi all, after a very long hiatus I finally made my way back to fcc and finished the tech-doc page. I would appreciate any feedback! :sunglasses:

Here is the link to my Tech Doc and the Codepen.

Thanks!

2

Looks good.

  1. Please include the test script when posting for feedback. You are not passing all the tests. That needs to be fixed. The nav-link-first and nav-link-last classes can be added but you still need the nav-link class as well (e.g. <a class="nav-link nav-link-first" href="#grid_layout">Grid Layout</a>).

  2. I would give main some left/right padding when the page is stacked.

  3. Maybe give the nav an overflow scroll box when the page is stacked, just to keep it from taking up so much of the pages vertical space. You can give the nav a height and set the overflow property.

nav {
  position: inherit;
  border-right: none;
  border-radius: 1rem;
  height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
}
  1. You can look into using syntax highlighting for the code to give it some extra “look”.

Nice job, keep it up.

1 Like
3

After struggling with first-child and last-child selectors to style the top and bottom links on the nav I ended up just adding the first-nav-link and last-nav-link classes and didn’t think about it messing with the tests :sweat_smile:

I definitely needed some padding added to the main section for mobile and I knew there was something bothering me about the nav menu, thanks!!!

I also changed the link on my original post to my github page with the test suite active :wink:

I did think about using a syntax highlighter like highlight.js but it seemed a little overkill for this project. If the content was real then I would definitely use one, and my JS is also lacking lol. Maybe i’ll just add some style myself and copy monokai or something since there aren’t too many code examples here to worry about.

Thanks for the input, I added your changes and am happy with the results.

4

Just to let you know, the basic usage of Prism is super easy and you do not need to code anything.

Add the two files as needed:
https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js
https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css

Add the language classes to the elements as needed:

<code class="language-css"></code>
<code class="language-html"></code>

The code formating may however change and will require some extra fiddling with.

Anyway, I just wanted to let you know. You do not need to use highlighting and the page looks nice as is.

1 Like
5

about 5mins after I posted my reply I already had highlight.js going haha I couldn’t help myself and it is def a nice touch! The new version will be updated shortly.

6

20mins later and it looks great thanks for the tips :+1: