FCC Technical Documentation Page Feedback Please!

I have completed the FCC Technical Documentation Page and would appreciate feedback people have to improve my design or code quality.

The CodePen is: https://codepen.io/daniel-johnson/pen/abWZgLL


Hey! i just checked out your website and here are a few suggestions.

  • The navbar is overlapping with the main content of the page, you can change that by increasing the grid-gap. 60px seemed to work for me. On a side-note, the grid-gap property has been deprecated so you should use gap instead.

  • At the moment your site looks a bit too “plain”, you can try adding some colors to it. I get it that technical documentation pages aren’t supposed to look pretty but you can do a lot even if you use different shades of the same color to the page.

  • On smaller screens, There is a bit too much spacing on the top of the main section.

  • You can also add the scroll-behavior property to the * selector which would give you a nice transition when you scroll to a different section.

Hope this helped! :grinning_face_with_smiling_eyes:

@danieljohnsonxyz, when requesting feedback please open your topic in the #project-feedback forum. (You were asked to do this with another project)
I’m moving this

There wasn’t much effort so there’s not much to give feedback on.
It passes the user stories and it’s responsive.

In programming circles, you’ll hear a lot of conversations regarding (technical) documentation in reference to explaining an API, a library, project contribution, etc. Reading and writing good documentation is an important skill and doing this project about a code related subject gives you a good reason to go do some research about the tools you are learning to use.

Instead of

<code>alert( 'Hello, world!' );</code><code>console.log(x)</code><code>3.14159 = π</code><code>random()</code><code>document.getElementById("demo").innerHTML = "Hello JavaScript!";</code>

You would not wrap the code tags around each line.
This is a sample code snippet

let fahrenheit;
let celsius;
function convertToF(celsius) {
  "use strict";
  fahrenheit = (celsius * (9 / 5) + 32);
  console.log(celsius + " degrees celsius is", fahrenheit + " degrees fahrenheit");
  return fahrenheit;

Then you can nest those code snippets in an HTML element to preserve whitespace and line breaks. I’ll leave it to you to research that.
Or there’s a property: value; pair you can use in CSS to preserve whitespace and line breaks. Again, I’ll leave it to you to research.

Sorry about that, I’ll be more careful in future. Thanks for the feedback.

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