Can this help anyone just starting out

Code Feedback
1

I have just completed the Technical Doc project, I did not really know how to approach this. I decided to write down the structure of how I have completed the projects so far, not sure if it can help anybody who is really struggling with the projects, but feel free to have a look, constructive feedback is always welcome.

2

Hi @mattyfg !

You want to be careful about your text contrast.
Right now it is a little hard to read.

You can play around with a tool like this one to find a better text contrast for the background.
https://webaim.org/resources/contrastchecker/

Hope that helps!

1 Like
3

Your page looks good @mattyfg. 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 HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Hint: There will be a few less errors if you delete the > right before <!DOCTYPE html>
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (you may have to run it more than once after correcting an issue)
      (The one for HTML misses things which is why I recommend W3C)
  • Keep all your styling external. Do not use in-line styling.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • 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.
    (although the .codeBlock selector in CSS is unused as there’s no associated class in HTML)
  • Side note, the call to the FCC test script should appear right before the closing body tag, not after the closing html tag.

In programming circles, you’ll hear a lot of conversations regarding (technical) documentation in reference to explaining an API, a library, project contribution, etc.
I like your idea.

1 Like
4

Thanks for the feedback! I have altered the background color on your advice, it is much easier to read and looks better too! Thank you for taking the time

5

Hi
Thank you so much for taking the time to look through my project, I have implemented all of the suggestions you have made, as well as changing the background color also suggested to improve the contrast .
It now passes all tests in the W3C validator (this did take me some time)
The only error I get in the CSS validator in CodePen is a duplicated background color on 2 different elements.
Just a couple of questions, having removed all of the styling from the HTML, is it not acceptable to use inline styles at all, the reason I ask is on some headings I just wanted to style slightly differently but just once, so I would not re-use this style, maybe its just me being lazy, but it seems a long way around to create a class and then style the class in a separate sheet.
I have tried on this project to create a media print query which hides the Nav Bar and shifts the main content up when printed, I set this up and it worked, afterwards I added more CSS and the query no longer worked (I used print preview in my chrome browser to check) but I cannot get this query to work.
NB, the codeBlock class was something I was playing with I wanted to see what the overflow function did.
Again thank you, you have helped me out twice now and that was very thorough feedback and it really is appreciated.

check out V2 if you get chance

6

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