Feedback tribute page & survey form

I finally could finish the firsts lessons
here are the first attempt for the projects

tribute page
https://codepen.io/franciscomelov/full/GaKzxw

survey form
https://codepen.io/franciscomelov/full/dEybaK

thank you for your time

Good work on these!

A couple of quick comments on some of your code. You do not need to wrap your labels and input in their own divs. Make sure to use semantic HTML5 tags whenever possible as this helps with accessibility. For instance:
Your code: <div class="labels"><label id="name-label" for="name">Name:</label></div>
Could change to: <label id='name-label' class='labels' for='name'>Name:</label>

You can then style the labels and inputs in CSS to be block elements if you wish, you don’t need a div wrapper for that :slight_smile:

1 Like

Along the same lines, try to refrain from using <br> tags for spacing. Instead, you should use margin or padding styling in CSS.

1 Like

Hey @franciscomelov

First for all great job you completed the projects.

Tribute page

  • The content has some spelling error. Please fix those issue.
  • The content feel like its has no space. Add margin around you elements. It will look better.
  • Good job making the image responsive. It scales down properly.
  • You have added a CSS reset. You can also add padding 0px to it. You should also add the Pseudo selector *::before and *::after so that the CSS reset can work of them also if you will be applying pseudo selectors ::before and ::after in your project.
  • Even thing is black and white.Play around with different colors and applying them to your Stylesheet. The website will look good.

Survey form

  • Add padding for all the input elements and the button. The content seems like its cramped.
  • Bit of spacing around the form would be nice.
  • Add a border radius for the form. It will look good.

Apart from this, everything is good. Keep going on. You will improve eventually.

If possible, please edit your previous message because tribute page leads to the survey project and vice versa.

That’s all from me. Happy Coding:)

3 Likes