FCC Technical Documentation - CSS

Hi everyone,

Today I’ve finished my Technical Documentation page. I didn’t put a lot of information in, because copy and pasting was kinda boring, haha. Just wanted to focus on the layout.

Any feedback is welcome! :slight_smile:

https://codepen.io/Alwin/full/QWgwJoy

1 Like

I don’t see a link to view your project?

Haha oops, thanks for telling me :sweat_smile:

Just started this one also - I wish I’d also tried to cut down on the info too :rofl:.

Looks great!

One suggestion (just because I discovered this one the other day and it’s a cool trick)… Your section headings are close to the top of the page when you use the nav links. Try using scroll-margin-top: 2rem; on your “main-section” classes and it just drops them a little lower. Hard to explain but you’ll see it if you give it a whirl!

2 Likes

Looks good, well done.
@Isp01’s little tip will help polish it and is one I am gonna steal myself

2 Likes

Thank you @lsp01 !

Didn’t know about that trick :smiley:

Thanks a lot @Jaydog !

You can also set scroll-padding on the scroll container.

html { 
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

But in this case either one will work (scroll-margin vs scroll-padding).


  1. I would probably make the navbar a bit narrower so it doesn’t have all that empty space on the right side (make it more symmetrical).

  2. I might try giving the main content (or just the text at least) a max-width so the line length doesn’t get so long. It can help with legibility.

1 Like

Thanks @lasjorg !

I’ll take a look as soon as possible :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.