Please check these out and give me your honest feedbck

Code Feedback
1

https://codepen.io/shittusaheed01
I would love to hear what you really think about my projects

2

NIce work out there, try to complete the projects and make them responsive as well.

1 Like
3

Thank you. I have complete all of them except my portfolio page.

4

Welcome to the forums @shittusaheed01.
Would have been easier if all pages didn’t have to be tested at once. Would have helped you to not make the same mistakes.

Also, do not try and replicate the sample pages. The objective say to make something functionally similar and to give it your own personal style

Here are some things to revisit;

tribute

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • This (</br>) is not a valid HTML5 tag
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • there’s a horizontal scrollbar on smaller screens

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 should be included, with all tests passing, when you submit your projects.
    • Your page passes 11/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow 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).
    • (The one for HTML misses things which is why I recommend W3C)
  • You reference three different font-families in #title but you neither link to any (head element in HTML) or import any (CSS).
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
    • not working for one of your buttons
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens

prod land

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 11/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

tech doc

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks.
      Or skip the <pre> tag and do the following in CSS;
code {
  white-space: pre-line;
}
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens
1 Like
5

Wow! Thank you very much. I just redesigned the tribute page, is it better now?

6

Your tribute page looks good @shittusaheed01. Some things to revisit;

  • Run your code through the W3C validator. You can rectify that issue by using external styling rather than in-line.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow 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).
      • They’s mild, repeating declarations. Remember what the C in _CSS means. Not sure if you were just trying different fonts and colors.
  • Accessibility is about being accessible to all users. Review the links from my original post.
    • “wikipedia entry” is not accessible
7

This is very helpful, I have rectified the mistakes using the codepen validators, and the WebAIM link. Thank you very much.

8

Looks like you’ve rectified the issues, nice job.

Glad to help.

1 Like
9

Hello! Thanks for the help you offered last time, I have redesigned the survey form, check it when you have the time,. Thanks again.
https://codepen.io/shittusaheed01/pen/yLJjaYa

10

This: https://codepen.io/shittusaheed01/full/yLJjaYa

11

Your survey form is looking better @shittusaheed01. Some things you can revisit;

  • Run your HTML code through the W3C validator again.

  • There are still some errors that you should address.

  • The form still needs to be responsive.

    • There’s a horizontal scrollbar on smaller screens.
    • Get familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click.
      • try adding border: solid 1px red; to your universal selector to help you visualize how you have things laid out. Resize the browser to see how the elements move.

  • You’re styling a div element. Along with doing some styling to the form it’s also creating a grey rectangle at the top of your page…above the header.

    • Why not just style #survey-form?
12

I might have fixed some of those errors, but I don’t know if they are perfect.
I redesigned the technical page, https://codepen.io/shittusaheed01/full/XWKyGEq
is it good?