I did two projects of responsive web design What should I do and learn for better design?

Code Feedback
1

Survey form

tribute page

2

Asking for feedback is one way @aasmajaved378. Your two pages look good. Some things to revisit;

tribute

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Keep all your styling external. Do not use in-line styling.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia entry” is not accessible
  • Do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
  • Not sure if you notice but you’ve used the <b> </b> element yet text in your page does not display as bold. This is because you’ve chosen a font that only has one weight. Browsers will try but cannot do anything with it. Try using a font from Google fonts.
  • On smaller screens the text butts against the sides of the browser. A little padding on each side would look better.

survey

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • As a suggestion switch the Syntax Highlighting in Codepen to help catch errors.
      Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • Change the cursor to a pointer when hovering over the submit button
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
  • The form says the age field is option yet it is required before the form can be submitted. This is a bad UX.

Visually your pages look good. Just remember to always make them responsive. It should not matter what device your audience is using, they should see a clean, well laid out page. To help with this start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.

As far as designing pages that visually knock your socks off. That’s an entirely different career field.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.