Review and Feedback - Personal Portfolio Project

  • Perhaps what I learned in this first section of FCC should have given me more, I don’t know, it is in my plans to finish the projects, revisit and analyze the curriculum and return to work on the projects improving them.
    Any criticism, claim or suggestion is rather welcome, be it related to the design and / or the code, any improvement that you indicate and / or guidance will be taken and applied, whether it be improvements in the code or in the design.
    I would like to be able to learn as I improve and work on the projects, so I thank you for your advice or suggestions in advance.

https://codepen.io/FernandoGarcia_fg/pen/RwoPdjW

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

  • Run your HTML code through the W3C validator. I believe I’ve mentioned this in previous feedback. This is a tool you should use often.
    • There are HTML coding errors you should be aware of and address.
    • 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). For maintenance you don’t want selectors scattered throughout your stylesheet.
    • (The one for HTML misses things which is why I recommend W3C)

A couple of suggestions;

  1. Your projects open in a new tab. That’s good. Further enhance that by having them open in full screen view.
  2. Not sure if you know this but 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

Html checked and no warnings or errors, I forgot to use it.
CSS checked only an error or warning related to # project-title {grid-area: header; } used on line 75.
Solve the issue that my projects, by clicking on them, will open in a new tab and in full view.
I did not know the possibility of codepen screenshots, using them I applied a kind of preview on the cards of each project.
Also cite where I got the icons and the photo in the footer
and tweak some other little thing.

Regarding the design aspect, if you had to rate it 1 horrible, 10 excellent, what score would you give it?

That looks better. I noticed two things;

  1. the test scripts are commented out. They should show.
  2. Not all tests are passing.
    • the tribute page passes 9/10 user stories

If you’re going for the RWD certificate all user stories must be passing when you submit your projects.

They’re very small screenshots and only appear when users hover. What about smaller screens where users doesn’t have the hover ability?
And I was thinking more of a preview that can be seen. The small images that codepen provides are about 640x360 px. You could scale them to about 356x200 px and still have something for users to see.
This is a suggestion. You do your design how you want. You’ve seen others so how do you think yours compares?

I’m from a generation that doesn’t rate. Nor do I swipe left or right.
You can look through the forum to see how others have done their designs and see how you think yours compares but let me say this. For now it’s good. You’re just starting out and learning. With time as you learn more you’ll think of things you can do to tweak and improve your portfolio. And at that time you’ll just make another, different one. And while you may keep some of these user stories in mind, it will be one that you’ll be showing to potential employers so it won’t have to adhere to all of the FCC RWD project user stories.