Technical Doc - Feedback

Code Feedback
1

Hello Everyone!

Here is the link to my Technical Doc:DOM Tech Doc

FYI, I did the W3C Validation and the main issue that popped up was warnings of no headings (h1-h6 and so forth). I ignored these warnings due to the user story not specifying header use. Other than these warnings, no other errors found :).

As always, open to feedback and suggestions.

1 Like
2

Why are there comments by fcc in the code?

3

That is automatically there from the template that FCC provides when creating projects in CodePen.

4

Looks good to me. Nice work!

1 Like
5

The project looks nice. Here are a few suggestions.

Add this code to your CSS:

:root{scroll-behavior: smooth;}

This is a neat trick that makes it so the navigation bar doesn’t instantly jump, but rather transitions. If this isn’t working, use #navbar instead of :root .

For your anchor tags, try changing the text to black instead of the default blue. Then give it a smooth transition that scales the text with a shadow when you hover over it.

a {
transition: 0.3s ease-in-out;
color: black;
text-decoration: none;
}
a:hover {
transform: scale(1.2);
text-shadow: 2px 2px 5px black;
}

This should make your navigation items pop a little bit more.

You can also hide the scroll bar on your navigation items on all browser types with the following code:

#navbar{overflow-y: scroll;ms-overflow-style: none;scrollbar-width: none;} 
#navbar::-webkit-scrollbar{display: none;}
1 Like
6

Thank you so much for the feedback! Your suggestions for the navbar definitely added a more aesthetically pleasing affect - I will keep this in mind for future projects.

Great tips overall :).

1 Like
7

I would also apply that same scroll bar hiding code to the #navbar ul on line 60 of your CSS when the screen changes. Then edit the media on 139 to prevent it from popping it up again.

The code I mentioned above still allows for scrolling but hides the scrollbar. Double scroll bars on smaller screens may be too much. On smaller screens, the user uses touch screen to navigate and not the scroll bars. You can keep the overall scroll bar for the entire page if you’d like, but avoid double scroll bars. I would hide the overall navigation bar on smaller screens (far right of screen) on smaller screens, (use :root to target this). You can keep it on bigger screens because bigger screens are desktops, where users can use a scroll bar.

You could also add:

box-shadow: 2px 2px 5px black to your #navbar (CSS - 11) in order to make it pop from the rest of the page. This can attract user attention to show it is important. You may need to remove your border-right in order to make this look better with the box shadow.

I personally use box-shadow on all my navigation bars, especially the desktop versions that are attached (fixed) to the top of the page. This adds a nice divide between the content on the main flow of the page and the fixed content in the navbar.

1 Like
8

Your page looks good @bbs2527. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.
  • overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

Regarding the comments that FCC provides when creating the projects. You are allowed to delete them.

It’s okay to ignore the warnings but know that they are there because of semantics, which are new in HTML5.

There was one error. But as noted, codepen provides the boilerplate for you.

9

Thanks so much for the suggestions! I made sure to clean up the css a bit and the shadow effect looks much better on the edge of the navbar.

1 Like
10

Thanks for the feedback and suggestions! I made sure to clean up my code, adjusted the errors for css (forgot about that part). and I made some design adjustments and hopefully it should be okay :). I also removed the break and it seems to flow okay in the document. I also hid the nav bar for smaller screens and it does seem to flow better.

Thanks so much again :).

1 Like
11

It looks great! As a suggestion I would add some space (padding) between the “code” section text and its container.
Happy Coding!

1 Like
12

Hello @bbs2527
Your project is great and looking good.
The code container should has padding so it looks good.

without padding (yours):point_down:
image

With padding (I edited on your codepen):
image

And Also don’t forget to set padding for #inline to padding: 0;

So the Final code element in my opinion is :

p > code {
  padding: 1rem 2rem;
  display: block;
  background-color: rgb(230, 221, 221);
  width: 35rem;
  white-space: pre-line;
  word-wrap: normal;
  margin: 1% auto;
}

#inline {
  display: inline;
  padding: 0;
  border: 1px solid red;
}

Also I suggest you should make font-size for headings and pragraphs more bigger (not too much) in bigger screens (laptops).

That is my feedback. I give you some suggestions on my opinion so you can improve your project.

Happy coding :slight_smile:

13

Thank you for the suggestion! I increased the padding and it does look much better :).

1 Like
14

Thank you for the assistance! I made sure to adjust the padding and it came out much better :).

15

Well done! It looks perfect to me :slight_smile:

1 Like
16

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