Need a feedback on my Portfolio page

Code Feedback
1

hey I just completed this projects and I decided to go with some funky colors and spacey theme I’m satisfied with the design but pls give your feedback :sweat_smile:
https://codepen.io/ridabatool/details/abJmGay

2

Your portfolio looks good @ridzzali110. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. (Among some other errors you cannot make up your own HTML elements. figurecaption is not valid HTML5.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • The links to your projects are not working properly
    • In addition, you want them to open in a new tab and they should open full view rather than details
  • You don’t have to host images of your projects. Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
    https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
    or
    https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
  • 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.
    • “click here” is not accessible
1 Like
3

thanks I’ve done some changes and I let my codes go through these validators and got one or two errors and I fixed it and now I think everything is fine :slightly_smiling_face:

4

@ridzzali110, there are still some things you need to revisit;

  • Run your HTML code through the W3C validator again. figurecaption is not valid HTML
  • Read the second accessibility link. “check it out” is not accessible either.
1 Like
5

sorry I misunderstood “figcaption” with “figurecaption” :sweat_smile:
and I changed the link name one time more.

1 Like
6

Good job! That’s what I was trying to point out. It’s too easy when I tell you the answer when you can find it by using the validator and paying attention to the error messages.
Some mods will tell you the answer. I think you learn more when you discover it yourself.

That’s a better link but why not make the whole thing a link? Think about it. If you were relying on a screen reader would hearing “fcc account ridzz” mean anything? Would hearing “contact me on my fcc account ridzz” give you a reason to click on the link? These are the things you need to think about with accessibility.

1 Like
7

thanks for this lil act :hugs:
and I’m gonna change the link in a bit
thank again :slight_smile:

1 Like
8

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