How can I improve myself?

[godofgames0070]

Hey guys, I have been working on the Responsive Web Design Projects and wanted feedback on how to improve myself. Here are the links:

• Tribute Page
• Survey Form
• Product Landing Page
• Tech Doc
• Portfolio Page

The projects all passed the test suites from freecodecamp and I also didn’t get errors when i ran the html and css files through the validators from w3.org. I did test the sites using dev tools and I guess it does look okay … Is there a way I can improve myself ?

[Roma]

@godofgames0070, overall it would have been better to post your projects as you did them. First, so you don’t repeat issues and second, it’s hard and time-consuming to go through so many at one time.

tribute page

• Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
  • The test script, with all tests passing, should be included when you submit your projects.
• Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
  • “wikipedia entry” is not accessible
• 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.
• don’t replicate the sample project. It shows one way the project can be completed. The instructions say yours should be “functionally similar” and 'give it your own personal style"

survey

• Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
  • The test script, with all tests passing, should be included when you submit your projects.
• Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Reference MDN Docs
• Change the cursor to a pointer when hovering over the submit button
• It’s a nit but the placeholder text should not mirror the label. It should show the format the user it to enter
• 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.

prod landing

• Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
  • The test script, with all tests passing, should be included when you submit your projects.
• Run your HTML code through the W3C validator.
  • There is an HTML5 syntax error you should be aware of and address.
• Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Reference MDN Docs
• 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.
  • very noticeable when your navbar and video are cut-off (see screenshot)

tech doc

• Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
  • The test script, with all tests passing, should be included when you submit your projects.
• 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.
  • Reference MDN Docs
  • Incorrect in the p elements
  • Incorrect in the code elements
    • 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.
• The background bleeds through on small screens (see screenshot)
• try to not replicate the sample projects. They show one way the project can be completed. The instructions say yours should be “functionally similar” and to “give it your own personal style”
  • 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.
• 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.

portfolio

• Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
  • The test script, with all tests passing, should be included when you submit your projects.
• 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.
• The projects should open in a new tab

[godofgames0070]

Thanks I will correct them ASAP.