Portfolio Project - Finished

Code Feedback
1

It’s done. All feedback and critism welcome.
Thanks,
Luke

2

Excellent job! Nice color choice and great use of CSS classes. I can definately see your progress from the beginning projects to this portfolio!

Keep up the great work!!!

1 Like
3

Very beautiful. The colors, that gradient in the navbar, the borders and box shadows… there is so much to watch. Tasteful, original, pretty.
That overlay is so effective and has that professional feel. Something to copy! I would have added a :hover to .project-title and the two other but the way you do it is much simpler and it works beautifully.
There are a few issues though. The link to ‘about Freecodecamp’ and ‘coming soon’ don’t work. I don’t know how to get back to the home page as well.
This portfolio could be really used to find a job in the future. But then I would add some information about yourself.

Great work.

Karin

1 Like
4

I fixed the FCC link but the coming soon link doesn’t do anything; as you’ve suggested I should probably make an about me section and replace the coming soon link with an about me link. I think I’ll do this before submitting this project. Thank you for the kinds words and feedback :smiley:

5

Thank you very much for the kind words,
Happy Coding,
Luke

6

Review

  1. First off, you’re using grids, that’s always good, and it’s an indication of responsive design. So that’s fine.
  2. The css naming is perfect for a short project. You might want to take a look at BEM, but this is only useful probably after you learn Sass.
  3. The overlays on the project section look nice, and the strategy you use is rather smart, by absolute-positioning every children relative to the parent.
  4. You’re using codepen.io the right way. Only pasting the inner-body content. There were small errors in the html, and none on the css, which is fine. You can still go further and check how the autoprefixer works for CSS under the CSS tab gear icon.

Some suggestions

  1. Use rem for font size and anywhere you can, it has many advantages that I don’t mind to explain.
  2. Use consistent color values. For example, you write
.class {
color:black;
opacity:0.5;
}
.anotherClass {
color:rgba(0,0,0,0.5);
}

This is a detail, but it’s more difficult to write it like that, than to use only one method :smile:
3. All the hover effects you’ve in the projects section use this technique:

.elementClass {
visibility:hidden;
}
.elementClass::hover {visibility:visible}

If you open up the dev tools, visibility:hidden does not ‘remove’ the elements from the document, they are still there, and are part of the content.

I’m almost sure a better technique is to use display:none; and then display:block. But we should check what’s best practice taking into account screen readers. To be honest, I’m not sure which approach is better here.

What I’d use is this:

.project-display > * {
display:none 
}
.parent-display :hover > * {
display:block
}
.parent-display .img {
display:block;
}

This reduces the code-lines quite a bit, and you can always change display by visibility, etc.

  1. Another thing, remember any hovering is only a feature for desktops/laptops etc. But not for touch devices like phones, tablets, because there is no hovering there.
  2. Well done by uploading your images to github, but…they are all different aspect ratio! If you upload all of them the same size, or at least same aspect ratio, and then you create the tiles with the same ratio, the grid would look perfect, and there would be no content lost. Right now, they look stretch.

I don’t mind to apply all those changes myself, but I’ve tried to give you hints instead of solving the problem. If you need help though, I’m happy to help.

1 Like
7

Great work, I like it!

1 Like
8

Thank you for taking the time to provide this detailed response, it’s awesome how so many people are willing to help!
The point about color hadn’t occured to me but I can obviously see the advantage of being consistent. I’ll check out rem size, I’m guessing this is related to em but I’ll soon find out :slight_smile:
I’ll update the images now, I was so focused on just getting it working that I ignored this, thank you for pointing it out.
The point about the hover effect not being responsive for keyboard users etc has been mentioned to me previously but I’m still struggling with what the solution would be…

All the best,
Luke :smiley:

9

Yes, most of the suggestions are for future projects, and are not so relevant now. So I hope it didn’t stress you much.

Good luck luke

1 Like
10

I’ve applied some of your points to my project and will definetly be using some of the other suggestions going forward; rems is how I wished ems would work so that’s awesome :slight_smile: My images look much better now too :smiley:
Cheers,
Luke :slight_smile:

1 Like
11

Wow, yes it does luck better!
You’re very welcome.

1 Like