Yet another Tech Doc for feedback

Hi campers,
Asking for feedback on my CSS Styling Tech Doc page.
A few notes;

  • I styled it using Bootstrap
  • I’m “late” in getting this out here. I was getting tired of creating pages so I started on the JavaScript lessons. Needed a break from that so went to work on my Tech Doc page. (Keeping me balanced)
  • I’m not sure why the one test fails. I have two navbars. I hide one while the other displays. The test is failing for the one navbar. I’ll investigate further but I’m not too terribly worried about it right now.
  • Not sure if I’m a fan of the smooth scrolling on a page this size. Whatcha think? Keep it or do away with it?

Thanks for looking and giving feedback.

1 Like

This is really well done. The code is extremely well written and is appropriately commented making it very easy to read. The design of the page is flawless with a decent font and is responsive. the hamburger menu was a nice addition. I still cant figure out why that one test failed but your a tags in your nav have the class of nav-links so it should be good enough

1 Like

It is nice and I have some suggestions:

I like the style you went for, but you need to separate your nav bar from the documentation area. I suggest adding a gap and a background color, with a box-shadow. For example, my technical documentation page:

Note - On smaller screens, the navbar will change. Make sure on dev screen (inspect), you hit Ctrl+Shift+M to Toggle Device Toolbar. Then change the pixels at the top to 1920 x 1080p.

Change fCC in your title to FCC. People often use small issues like these to judge your page and or you, as it is a representation of your attention to detail.

The “Important” red text boxes are hard to read and can strain the user’s eyes. Change them to something that is a little easier to read.


Please hit the reply button or I do not get notified.

Helpful tools–>

@michaelnicol, thanks for the feedback. Let me respond;

The navbar is separated from the doc area by a vertical bar. I want the page to look like a documentation page so I purposely avoided changing the background color and definitely avoided adding a box-shadow.
On smaller screens my navbar does change. From the vertical to a horizontal collapsed bar at the top.

My using fCC is not a typo. It’s meant to mirror freeCodeCamp’s camel-case logo. Attention to detail.

Since I ironically used bootstrap to do the styling I tried to mirror their utility class color. Though with theirs it’s white font on the red background. I thought that was a little harder to read. I’ll look into toning down the red a little more.

when you abbreviate ‘free’, despite it being lowercase, you should uppercase it to “F”

By separating the Navbar from the main content, it almost creates more of a structured page w/ sections.

Kind of responding to myself. I removed the scroll-behavior: smooth; action. It didn’t look right with all the scrolling if one was going far down. I think I like it better that it “jumps”.

Its more fluent, I feel as if it adds a sense of direction to where you are on the page.

However, its a opinion. You can say the same thing for both.

(note - hit the reply button or I do not get notified)