Feedback requested on FCC tribute page & survey form

Code Feedback
1

Hey everyone,
I just earned my first FCC certification yesterday, and I wanted to know what you thought of my first projects :blush: please. Very open to criticism, I want to improve fast.
Feel free to check out the links on the pages aswell, they’re supposed to work properly!

Thank you so much for taking the time to look at this :kissing_heart:
Hope to read from you soon.

2 Likes
2

You definitely have an eye for design, the color look great, and the layout is good, font styling,

your design is 10/10

however, your css code for mobile is 8/10

if you look on the mobile view it is hard to read and mobile users would have to zoom in, so if your content didn’t shrink soo much on the smallest phone it would be 10/10.

Your first few websites were 100% better than mine in terms of design
https://codepen.io/cogentmedia99

1 Like
3

on the survey form,

for mobile the buttons don’t align with the edge, maybe add a container element that holds your labels and then do

.label-container {
position:absolute;
left:0px;
}

this would align your buttons and checkboxes with the left edge.

1 Like
4

Thank you so much for your feedback and your help.
I’m going to try that ASAP !

1 Like
5

Welcome to the forums @vanoushka18. Your pages look good. Some things to revisit;

tribute page

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • 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.
    • “watch here” is not accessible
  • On small screens the font on your page is impossible to read.
  • Do not use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

survey form

  • Same as above regarding the boilerplate code being provided and elements out of order.
  • Same as above, run your HTML code through the W3C validator and correct the syntax/coding errors.
  • Same as above, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button
  • Same as above regarding using view port units for font sizing.
1 Like
6

Thank you very much for your help, I’ll get right on it tomorrow.

7

I really like them. I am working on my survey. Pretty basic. However you have inspired me to try to make my design more fun :crazy_face: thanks! Congratulations on your certificate!

1 Like
8

Thank you very much, I’m glad you find my design fun ^^ Good luck with your certificate, don’t hesitate to ask if you have any trouble with the next parts :wink:

9

You’re welcome. Will do. Thank you for the quick response Emoji

1 Like
10

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