My-Portfolio page feedback

Hey all!
I have finally finished my portfolio page, so I decided I will post it here and get some feedback. Here it is:

https://codepen.io/Wanela/full/rNWeovQ

The photo in the about section will probably not dispaly for you, I am working on that, just need to get a nice picture :slight_smile:

The code is comlete spaghetti, I was trying a lot of different thing while working on it and I probably got a little lost in the weeds, I am actually thinking of just redoing it from scratch now that I know what I want to do with the design, but I would appreciate some tips on keeping your CSS and HTML nice and tidy.

I also wanted to ask, what is a best-practice way to target mobile screens in media queries? Like, don’t mobile screens all kinds of resolution ranging from 4k down to something like 720p or below? What is the bext way to get them all?

2 Likes

Hi @Wanela !

I think your page looks good.

You have a small typo here

Make sure your images have alt attributes because that is important.

You have a small error in your css.
Run your code through the css analyzer.

Keep up the good work!

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

  • Run your HTML code through the W3C validator.
    • 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.
  • Start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.
    Doing it this way you’re not so concerned about what has which breakpoint you’re concerned with where to I need to create a breakpoint so that my design holds up for different screen widths. You’ll have all your projects stacked for the narrowest. As you widen the screen what what point would you want two across? Is there a point where you’d want three across?
    It also helps with responsiveness if you use relative units rather than hard coding pixel values.

Thanks for the feedback that was really helpful.
Yeah, I’ll definetly need to look into doing values in em, that’ll be one of my goals in future projects.
I kind of did start from the narrowest screen width with this project and worked my way up from there, but is there a generally agreed width that you should first target? For example, my phone is 1080p across in portrait mode, buth that is obviously too wide to target first, because there are phones with lower resolutions, but how small should I go 720p? 480p? Or should i just go as low as posiible since that will not really matter?

If you start with the narrowest you can make your browser everything should be stacked. Narrower than that the page will(should) look the same.

Another thing you can think about is your target audience. Will the majority have a very narrow screen or will that just be an edge case?

Ok, thanks a lot, I think I get it now.

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