My first ever 2 webpages - feedback request

Code Feedback
1

Hi Folks,
If anyone wants to give some feedback it would be greatly appreciated. Sometimes i feel like im operating a marionette in the dark when trying to define my CSS.

Ive not slaved about color, im more interested in ensuring i have responsiveness down accurately.
I have no JS at present as i dont know JS yet.
Thanks to anyone who takes time to look thru.

The link to both projects on codepen are;
https://codepen.io/tt7182/project/editor/DeRden

this is also my first time on Codepen, so if ive done something dumb for sharing the projects please let me know

2 Likes
2

Excellent and easy to understand design.

1 Like
3

Thanks heaps! Really appreciate it

4

tribute page

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • Your page passes 3/10 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • Some coding errors you should address
  • Your page should be responsive

survey form

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • Your page passes 7/17 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • There are coding errors you need to address
  • Change the cursor to a pointer when hovering over the submit button
  • Your form should be responsive. It’s too narrow on smaller screens and portions do not size correctly.

Edit: The free version of codepen allows only one project, but an unlimited number of pens. For this reason freeCodeCamp suggests the use of pens to do the projects for the first certification (note that the examples are in pens, and the test suite is also in a pen you can fork)

1 Like
5

Thanks heaps for the feedback.
ill be honest, im lost. I just coded the full thing from scratch and manually coded the entire thing in VScode, then uploaded. I didnt know i HAD to fork. I also dont know where the “test scripts” are, how i get them or what i do with them.

Apologies, total beginner.
Ill review what i can on the errors and resubmit. I came to the test pages on the learning section and cracked on. I manually checked the users stories were fulfilled so… not sure what happened there.
the W3C markup validation service was a great link, never seen it before. thanks for sharing,
tom

6

@tommytucker, it’s okay, I code in Brackets. You don’t have to fork but when you do it’s a blank pen that includes the test script. It will be the only thing in the HTML section of codepen. The test scripts is in my feedback. Everything that’s in the <script> </script> tags. Copy that. Since it’s JavaScript, in VSC you’ll put it right before the closing body tag. You’ll see a green hamburger menu in the upper left of your page. Select the appropriate project and run the tests. If the button is red it shows how many tests failed. You can click on the red button to see the failing test(s) and read why it failed and how to correct it.
Another thing you may want to get used to is external styling versus using internal styling.

When you look at the sample projects in codepen there’s a button in the lower right for you to fork the project. That give you a blank pen with the test scripts for you to to your coding. As mentioned though, you can code in VSC or whatever editor you want and then copy/paste it into codepen’s pen.

1 Like
7

I forgot to say thank you last week, i really appreciate it. Im stuck indoors trying to learn on my own - every day is a schoolday!!
Ill look at the issues and sort them out some day this week, then re-upload.

8

No worries. Will wait to see your updates.

9

Hi Roma,
Thanks for the help thus far;
a lot of my tribute page fails were taking artists license with my ID naming conventions, i had no idea how to even load the script!! :flushed: - done now.
It took me forever to figure out why the image wouldnt centre within its container - display:block on the child element was the culprit. More reading required.

Im stuck on both projects. I thought the help required was more than what this thread was for so i started another “programming help thread” direct from the script tester link.

10

@tommytucker, are you aware that when the tests fail you can click on the red button. That will show which test(s) is failing and give a description of what the test is looking for.
For instance on your survey form the first test I see that fails has an error message that says;

Inside the form element, I am required to enter my name in a field with id="name". If I do not enter a name I will see an HTML5 validation error.

There should be an input text field with id="name" : expected null to not equal null 
AssertionError: There should be an input text field with id="name" : expected null to not equal null

So it’s expecting your text field (for the name) to have an id attribute set to name.
Keep working through until all tests pass.
Hope that helps.

1 Like
11

Hi Roma,
I was, however i was assigning the same ID labels for styling to both the label AND the input - this was incompatible with the test parameters, and i didnt spot it until there now.
I was chasing my tail trying to get the other test parameter (for the label) to pass.
I must be doing these lessons to teach me how to deal with frustration.
Sigh. :man_facepalming:
Every day is a school day.

12

But you’re learning from your mistakes. That’s the important part.
A lot of time when coding there are typo’s or small mistakes like you just mentioned that are hard to spot. Sometimes just walking away for a bit and coming back with a fresh pair of eyes helps.
Keep it up.

1 Like