Responsive web design project feedback + question about testing

[scorpio_147]

Hey, here are my first two projects Tribute Page and Survey From. Any feedback is welcome.

I was also wondering how to run tests to check if my code has everything that’s required? I think it checks all the boxes, but I can’t be sure if I’ve missed anything

https://codepen.io/tjashag/pen/mdRLOrR

https://codepen.io/tjashag/pen/rNjKPxK

[aharmon413]

Hey there! When you do one of the projects, at the bottom of the page listing the requirements there’s a link to a Codepen template that includes the following code in the HTML. You can copy and paste it into your existing project, and in the top left corner of your page you can click on a green hamburger menu and run requirement tests on your project:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Tribute Page – I like it, though one issue is when you run the test code above, it does not pass the image responsively resizing. Another thing you could try is using the <q> tag around each quote in the list. Along with being semantic, I believe it automatically adds quotation marks around the text as well.

Survey Form – The main thing I noticed is that the orange input fields and especially the orange text on the light blue background is kind of hard to look at. It also fails a few of the test requirements, mostly regarding certain elements having ids and validation errors for input fields. But other than that, it’s pretty solid.

[Roma]

Your pages look good @scorpio_147. Some things to revisit;

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.
  • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
• 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.
  • “link” is not accessible
• Make your page responsive. Remember, the R in RWD stands for Responsive
  • There’s a horizontal scrollbar on smaller screens

survey form

• 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.
  • Your page passes 12/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
• Run your HTML code through the W3C validator.
  • There are HTML syntax/coding errors you should be aware of and address. (Remember, an id must be unique within the document)
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
  • The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.
• Change the cursor to a pointer when hovering over the submit button

Side note: placeholder text should not mirror the label. It should show the user the expected format that they are to enter.

[scorpio_147]

Thanks to both of you, @aharmon413 and @Roma for your great feedback!

I’ve now added the test script so that I can look at what I did wrong/missed and to fix it accordingly.

And you were correct to point out @Roma that I was relying too much on the sample project code with my survey form. I will make another one, from scratch!