Tribute Page and Survey Form Projects - Feedback Please

Code Feedback
1

Hi Everyone! I just wanted to say that I’ve made these projects last year but never thought to ask for feedback. I would appreciate your feedback.

Links:

Thanks!

2

A media query was included so I checked it. The section with the titles breaks at the smaller screen size. It needs to be re-styled for that query.
You have two identical ids. They should be classes if you want the same styles applied to both elements.

3

Thanks for the tip! I have resolved that issue and I also made the title responsive.

4

Your page looks okay @Code_Camper. Some things to revisit;

  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • you can ignore the first three errors but the other errors should be cleaned up.
  • Review the lesson about giving meaningful text to links
    • wikipedia entry is not accessible
  • and you already know to make your page responsive

As an aside, the <hgroup> element has been removed from the HTML5 spec. You’ve used it incorrectly as the validator will show. Read more about it here;
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

5

Thanks for the link.

7

Hello,

I will give you my feedback based on design and user experience.

  • You may want to work on the main heading for a couple of reasons

  1. When I shrink the screen size, the heading either moved or disappeared (as the screen get smaller)

  2. On the desktop screen, the main heading is already taking almost half the height up, cutting up the image. I may suggest to work on this to minimise scrolling

  • On desktop screen, the body text is too small and thin, which lacks of contrast to the white background, thus it is hard to read. However, when getting to mobile device screen size, the body text size seems to be appropriate.

  • Line height of body text is too closed and need to be spread out a bit in order to read with comfort.

  • Colour of the link could be slightly darker as I has to squint in order to see what it says.

Now, on the coding side.

  • I would suggest using responsive units (such as rem) instead of absolute units (unless it is acceptable). By doing this, it may be one step to solve your main heading problem.

Other than that, it is not a bad start.

Good luck and happy coding :slight_smile:

8

Revise the #title properties in your CSS code.

1 Like
9

Thanks a lot. By the way, I put up another project for feedback :point_up_2:t4:if you don’t mind.

1 Like
10

Apologise for a delay response. I have checked out your survey form project and I will give you my feedback.

  • The design is on par. The colour palette and typography choice are great.

  • The text are easy to read and and the layout itself is clear.

  • The only thing you need to work on is responsive design. When you shrink the screen to mobile device, the input fields go beyond the horizontal screen, causing a horizontal scrolling. Fix this, and your page is all good to go.

Good work and keep it up! :+1:

1 Like
11

@Code_Camper, survey form looks okay but there are too many things that are direct copy of what is in the sample form. You will learn more by starting with a blank page and creating your own form and styling and sizing it on your own.
Also, if you want to have other projects looked at, please start another topic with an appropriate title.

1 Like