Feedback request-First 2 projects

Code Feedback
1

Hey guys, could you give me some feedback on my 2 webpages?
Thanks in advance for the feedback!

Regards
A front-end rookie

Links to the pages:


2

Tribute Page: Add more space. Add more padding around each section. It will give more air to you page. Other than that itā€™s very neat. I like it.

Survey Template: Changing the color of fonts and box shadow in the nav part is a cool feature. But in the survey part the fonts are not visible enough, try to make them bolder a bit. You could make bigger spaces between each form. And each form should be the same width and height.
For me it would be better if all questions were align to left. It would look more neat.

1 Like
3

Thx for the feedback! Iā€™m glad you liked the tribute page, the survey template was lower in quality cause I didnā€™t know how to make the text and stuff stand out from the background . But thx for the suggestions to improve it too!

1 Like
4

Welcome to the forums @Ma3_str0. Pages looks good. Some things to revisit;
tribute page

  • Couple of typoā€™s you need to fix.
    • You didnā€™t close your first h1 element correctly.
    • The u element was deprecated a while ago. Your page is supposed to be HTML 5 so get rid of that opening and closing tag. Use CSS to style it.
  • Would look better if the list was left justified or maybe remove the bullets if you want to leave the list centered

survey form

  • Run your HTML code through the W3C validator.
    • There are coding errors you need to address.
  • It doesnā€™t look good to have your name, email and age elements varying sizes.
  • Do not use the <br> tag to force spacing. Use CSS. And as an aside, there is no such tag as </br>
  • Userā€™s should be able to click on the label to select as well as the radio button/checkbox. Revisit the lessons on adding checkboxes and radio buttons.
  • Change the cursor to a pointer when hovering over the submit button.
  • I like that you used the fieldset element around your radio buttons and checkboxes. Dig a little further into that and see what the legend element can do for you.

As an aside, when using codepen it only expects the code youā€™d put within the <body> </body> element 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.

  • Instead of assigning an id to the body tag, make it a div
1 Like
5

Thx for all the tips,dude! But could ya maybe tell me how to use spacing with CSS? Do I have to use the margins or padding? But anyway, thx for the help!

6

@Ma3_str0, I revamped your pen slightly to show you what could be done. I didnā€™t redo everything because I wanted to show you how you could style. Iā€™ll leave it up to you to finish.
Notice that users can click on the label or the radio button to make their choice. Maybe review the lessons on adding radio buttons and checkboxes.
Notice that I lined things up the same way you did but without the use of the <br> tag.
There are a lot of accessibility concerns with using that tag.

2 Likes
7

In reading your script for the tribute page, I noticed (unless I have completely misread the project requirements) that you have not included some of the required div sections, such as the one with an id=ā€œmainā€ . That being said you do have the project down. :slight_smile: Nice work.

1 Like
8

Thx for replying. I forgot to readd the finer stuff according to the project. Cause I was following Romaā€™s tips. But anyway, thx for the feedback.

1 Like
9

Hey Roma, thx for making the effort of making a demo. I understand some of the stuff better now especially the whole div thing. Iā€™m using <br> as a force of habit cause we always have to use it at school (Iā€™m in senior year in high school in South Africa, we do really basic HTML but not HTML 5 and not even CSS) so itā€™s kind of all I knew. But thx for everything Roma, I appreciate it.