Would appreciate some feedback on my first two FCC projects

Code Feedback
1

Tribute page:
https://codepen.io/shawnby222/pen/abOaqem

Form page:
https://codepen.io/shawnby222/pen/zYGmvxr

I just want to know if you like the layouts, what you would change, and if the code is efficient. Thanks in advance.

-Shawn

2

Tribute page

Looks good. In your code:-

  • line 6 and 7 have the same id value and every id value should be unique
  • line 30 there is an opening p tag you didn’t close

Form

It also looks good. In your code:-

  • line 38 you used the same id value twice and it should be unique
  • @ArielLeslie will comment on line 35 to 47
  • On the comment section, you should use placeholder attribute for text to be displayed. When placed between textarea open and closing tags its results to a default value when you want to enter the text you would have to delete the text which can be frustrating.
1 Like
3

Hey, thank you for the feedback. I am going to make those changes right now.

4

Tribute page: you have this on your css

html {
  font-size: 10px;
}

But don’t utilise it with flexible unit rem in your entire css file like you did in Form page.

Form: <label for="hobby">Hobbies</div>. Wrong closing tag.
Overall, everything looks great, maybe just don’t make it to wide.

Hint: in codepen you don’t need to write html and body tag

1 Like
5

Will fix those things as well. Thanks a lot. :+1:

6

Tribute page
It looks nice and simple, but I would change a little bit based on my preference, just for readability:

  • HTML line 38 and 42, <ul> should be placed at the same indent
  • HTML line 39 to 41, <p> should be placed in new line after <li>

Form page
It’s nice and easy to understand. I love the layout and the color, but I have a bit of suggestion:

  • HTML line 6 and 7, <h1> and <p> shouldn’t be ended with period. And it will be nice if you include some information about what is the form about? It is for some club or community application?
1 Like
7

For the Tribute Page
I would recommend adding some padding/margin to the text so they could be more centered and contrast better.

8

Will fix those things as well. Thanks a lot. :+1:

9

Hi @shawnby222,
tribute page

  • Your page passes 9/10 user stories. All tests should be passing when you submit your project. Click the red button to see the failing test.
  • Run your HTML code through the W3C validator.
    • You have a few coding errors you need to clean up.
  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • When you copy/paste into the validator from codepen with just the code that would be in between the body tags you can ignore the first warning and first two errors about the start tag and head element

survey form

  • Run your HTML code through the W3C validator.
    • There are a lot of coding errors you should clean up.
10

Hey @Roma,

Thanks for the review. I could have sworn the tribute page was passing all the tests when I submitted it. Oh well, It’s fixed now. Also, I validated the HTML on both pages. I was using the label element wrong on the radio and checkboxes title area. Thanks, I never stop learning here!