Personal Portfolio: give feedback please

Code Feedback
1

Hello!

I would like you to see my project developed with HTML and CSS, and make suggestions about how to improve it. Thank you all.

https://codepen.io/marina_consa/full/oNZvdZZ

2

Hey @marinaconsa, the first thing that pops out at me is that I can’t read most of the content. The color contrast ratio between the text and the background is not near high enough to be accessible/readable. You can use the WebAIM Contrast Checker to make sure that your contrast ratios are high enough.

1 Like
3

Your page looks good @marinaconsa. Some things to revisit;

  • 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>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. Remember, an id must be unique within the doc.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

On a side note, I looked at the two projects you linked in your portfolio.

  • You’ll want to revisit both of them on a smaller screen. Elements fall out of the container.
  • With the survey form, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like
4

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