FCC Technical Documentation Page - Looking for some feedback please

Code Feedback
1

Hello Fellow coders,

I am now working on my FCC Technical Documentation Page project. NOTE: Project In Progress
I didn’t want to make the JavaScript project, wanted to make something different but didn’t have any good ideas :frowning_face: so I decided to create one on HTML using W3Schools.com as reference and for content.

Maybe should have just created it for JavaScript instead… As I am just learning, I found styling to be an issue, had to do apply some in line to get the desired look/result.

Project in progress, still need to complete the following:

  1. Need to complete all menu and main document sections
  2. Need to clean up code - check for “strays”
  3. Need to organize code - from top-to-bottom
  4. Need to comment/label each section of the code

Looking for feedback/tips/opinion/direction please on how to improve the project.

Thank you very much and have a great day!!

MarcusNapoleon

2 Likes
2

Wow, you have really put in a lot of effort into this. I did not style this one as much, I had trouble with keeping the navbar fixed to the left, so after starting over twice… I kept my extras to a minimum.

I like the custom styling, scroll bars and spacing look great.

The only thing its missing to pass tests, is you have your HTML Colors Nav item commented out with other sections, I assume are just not completed.

1 Like
3

Hello Thomas, thank you for taking the time to check out my project.
And yes, the HTML Colors and Nav items have been commented out for now, it helps me track which section I’m working on, so every completed section I remove comment.

Still have a lot to learn, and I did the project on HTML instead of JavaScript documentation just to be different from the other projects - which were mostly JavaScript…

I have a minor problem is with my Landing Page, no issues on desktop, problem is when using mobile (tablets/phone) logo and main image wont display on Firefox and Opera but works great on Chrome and Safari, another issue on mobile is when changing from portrait to landscape, i get a scroll showing up on bottom, only on chrome but not in safari… so that’s another thing to come back to.

Here is the link to my landing page - marcusnapoleon.com/fcc/landing

Again thank you for your time and feedback, appreciate it…:smiley:

4

It looks very nice, here is some things i would recommend.

  1. The <html> heading in the upper left is too bright. Same with the blue code color text.

Look into css transitions. I suggest animating the hover over your navigation bar links. Change background color, transform. scale(1.06) and possible changing the text color makes you page more fluid. --> https://www.w3schools.com/css/css3_transitions.asp

  1. It is very responsive, except for the coding block bits.

image
image1280×984 173 KB

Also the lists you use create a weird margin on smaller screens. I suggest removing the margins using a media query on smaller screens.

@media screen and (max-width: 634px) {
  /* Code goes here */
}

Maybe add some padding on your .main-doc to prevent text from being right up against the edge of the screen on smaller screens. Make it a little bit harder to read.

image

This margin could be smaller:

image
image1280×984 102 KB

Notes

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

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

3 Likes
5

Hello Michael, thank you for taking time to review and for providing valuable tips and information on how i can improve my project, I appreciate it a lot.

I will be implementing your suggestions when i complete and go over my code to clean it up organize and comment to identify the sections properly. I will complete the colors section then just probably two more topics (links and images) and will call it a day on this project so I can move on and start work on the portfolio project and try get my certificate before the new year…

Thanks again, and may you and your family have a great holiday…

1 Like
6

Have a great holiday!

7

Hello again Michael, forgot to ask earlier…
How is should I treat the <code> element and its contents?

color, styling, spacing, word-wrap, etc…

or would you be able to suggest a good source for reference? thanks again.

1 Like
8

Do it like w3 school where they have no spacing and just line wrap everything.

f12 or right click --> inspect to bring up dev tools

–> https://www.w3schools.com/html/

image
image3840×1080 422 KB

image
image3840×1080 458 KB

9

Another tip for your page

html {
  scroll-behavior: smooth;
}

This will make your navigation bar have a smooth transition between sections.

1 Like