# Rate my project - Technical Documentation Page

**URL:** <https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998>\
**Category:** I Built This\
**Created:** [October 17, 2020, 4:00pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998 "2020-10-17T16:00:59Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Miyagii](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miyagii/32/183401_2.png) [@Miyagii](https://forum.freecodecamp.org/u/Miyagii)\
**Post date:** [October 17, 2020, 4:00pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/1 "2020-10-17T16:00:59Z")

</div>

Hey everyone! Would really appreciate any feedback and critique of my project. Also if anyone has any solution to the overflow of the code section when resizing the window?

[Technical Documentation Page](https://codepen.io/MiYagii/pen/dyXoLQj)

---

<div class="post-metadata">

**Author:** ![Miyagii](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miyagii/32/183401_2.png) [@Miyagii](https://forum.freecodecamp.org/u/Miyagii)\
**Post date:** [October 17, 2020, 4:02pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/2 "2020-10-17T16:02:29Z")

</div>

Also forgot to mention! Took some inspiration from css-tricks 🙂

---

<div class="post-metadata">

**Author:** ![kubus0212](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kubus0212/32/175262_2.png) [@kubus0212](https://forum.freecodecamp.org/u/kubus0212)\
**Post date:** [October 18, 2020, 2:53pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/3 "2020-10-18T14:53:13Z")

</div>

Hey Miyagii!

It looks nice, well done!

As for wrapping code - you can look into `white-space` property. I am not sure whether that’s the best way but it worked for me 😛

_3 small_ things that came to my mind:

1. Blocks that contain more text are a bit hard to read. The lines are a bit too long. You can try to shorten it or increase the line height a bit maybe? For example “JavaScript and Java”
2. On navbar, the “\>” sign makes me thing that after a click the topic will expand with more sub-topics.
3. I know its your choice but the black background seems a little too dark. I would make it slightly lighter.

Like I said - those are tiny things, that not everyone even has to agree with.  
Cheers!

---

<div class="post-metadata">

**Author:** ![kubus0212](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kubus0212/32/175262_2.png) [@kubus0212](https://forum.freecodecamp.org/u/kubus0212)\
**Post date:** [October 18, 2020, 2:57pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/4 "2020-10-18T14:57:03Z")

</div>

Also another idea for smaller windows - set overflow to auto

---

<div class="post-metadata">

**Author:** ![Miyagii](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miyagii/32/183401_2.png) [@Miyagii](https://forum.freecodecamp.org/u/Miyagii)\
**Post date:** [October 19, 2020, 2:19pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/5 "2020-10-19T14:19:39Z")

</div>

Hey Kubus!

Thank you very much for the kind words and the time taken to leave your suggestions! It is very much appreciated. I’ll make some adjustments soon and see how your points make a difference 😃

Peace!

---

<div class="post-metadata">

**Author:** ![paulsonstech](https://avatars.discourse-cdn.com/v4/letter/p/ecb155/32.png) [@paulsonstech](https://forum.freecodecamp.org/u/paulsonstech)\
**Post date:** [October 19, 2020, 2:45pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/6 "2020-10-19T14:45:29Z")

</div>

Hello @Miyagii. Your project is so cool and the design is fantastic. But, these tips are recommended:

- Add `html {scroll-behavior: smooth; }` to your CSS code. Now click on the links in the sidebar and you will get a very cool smooth scrolling effect.

- You don’t need to add the `head` element and the `body` tags in CodePen. It’s already set for you. Only include the code that goes inside the `body` tags. If you want to add any tags in the `head`, do the following:

- There are some errors in your HTML code. Validate it with the built-in CodePen validator by clicking on the down arrow at the top of the respective code box and click on Analyze.

Anyway, great design and font choice. I like it very much…

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [October 19, 2020, 3:22pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/7 "2020-10-19T15:22:24Z")

</div>

Your page looks good @Miyagii. Something to revisit;

- The test script should be included, with all tests passing, when you submit your projects.
  - Your page passes **15/16** user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  - **User Story #14:** On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user. (Your media query negates laptops)

- Make your page responsive. Remember, the _R_ in _RWD_ stands for _Responsive_.
  - The code snippets fall out of the container on smaller screens.

---

<div class="post-metadata">

**Author:** ![Miyagii](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miyagii/32/183401_2.png) [@Miyagii](https://forum.freecodecamp.org/u/Miyagii)\
**Post date:** [October 21, 2020, 12:37pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/8 "2020-10-21T12:37:11Z")

</div>

Hey Paulsontech! Thank you very much for the kind words, really appreciate it 😃

- I’ve tried to add the property scroll-behavior though it’s not working on this project specifically, although it does on my other projects 🤷‍♂️ I’ll have to look further into this.

- Helpful tip! Thank you 🙂

- Errors fixed. Thanks for another tip on how to error check!

---

<div class="post-metadata">

**Author:** ![Miyagii](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miyagii/32/183401_2.png) [@Miyagii](https://forum.freecodecamp.org/u/Miyagii)\
**Post date:** [October 21, 2020, 12:47pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/9 "2020-10-21T12:47:24Z")

</div>

Hi Roma! Thank you 😃

- Mine is saying 16/16 without changing it 🤷‍♂️
- Dang… I’m still trying to wrap my head around web responsiveness, how did you understand that it negates laptops, was it from the width I’d used on my media query?

Really appreciate the feedback, thanks Roma!

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [October 21, 2020, 2:24pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/10 "2020-10-21T14:24:50Z")

</div>

> [@Miyagii](#):
>
> how did you understand that it negates laptops, was it from the width I’d used on my media query

I’m on a laptop and the test fails for me but saying it negates laptops was a poor choice of words on my part.  
Setting a breakpoint at 1380px is setting it for a large screen. Neither my laptop screen or my desktop screen is that large.

You can search for media query breakpoints. This is pretty typical;  
(scroll down to ‘typical device breakpoints’

> **[Responsive Web Design Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![paulsonstech](https://avatars.discourse-cdn.com/v4/letter/p/ecb155/32.png) [@paulsonstech](https://forum.freecodecamp.org/u/paulsonstech)\
**Post date:** [October 22, 2020, 6:48am UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/11 "2020-10-22T06:48:05Z")

</div>

> [@Miyagii](#):
>
> I’ve tried to add the property scroll-behavior though it’s not working on this project specifically, although it does on my other projects 🤷‍♂️ I’ll have to look further into this.

Hmmm… That seems so strange. You typed `scroll-behaviour` instead of `scroll-behavior` (notice the u at the end). But, that didn’t seem to fix the problem. Another problem I found is that you already had an `html` selector. So, I put this property there and tried again. Still doesn’t seem to fix. 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![kubus0212](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kubus0212/32/175262_2.png) [@kubus0212](https://forum.freecodecamp.org/u/kubus0212)\
**Post date:** [October 22, 2020, 8:29am UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/12 "2020-10-22T08:29:07Z")

</div>

@Miyagii  
Yes, you have a typo there but it still doesn’t work.  
I am not exactly sure why, but if you move this property to `* {}` - it will.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [October 22, 2020, 2:43pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/13 "2020-10-22T14:43:16Z")

</div>

> [@Miyagii](#):
>
> I’ve tried to add the property scroll-behavior though it’s not working on this project specifically, although it does on my other projects 🤷‍♂️ I’ll have to look further into this.

Quick answer is;

1. Spell the property correctly. The standard states that spelling is US English
2. Place it correctly. If the `property: value;` (`scroll-behavior: smooth;`) is placed in the `#main-doc` declaration it works as expected.  
Read more here;

> **[scroll-behavior - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)**
>
> The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:09pm UTC](https://forum.freecodecamp.org/t/rate-my-project-technical-documentation-page/425998/14 "2021-06-01T13:09:48Z")

</div>

Closed on June 1, 2021, 1:09pm UTC


