HTML/CSS Portfolio Project

#1

Hey, everyone! I just finished the final portfolio project. I would love any feedback you all could offer. Thanks!

http://jessierohrer.info/index.html

#2

Short answer: Overall very good work! I like the design. Some missing meta tags, some (mostly minor) HTML validation issues, and image file sizes are too big.

Long answer:
The file size of the photos are big (around 4mb). It’s not too bad on wifi, but on a 3G mobile connection the photos could take up to half a minute each to download.
If you can download the photo and save it with smaller dimensions that would be great. You can also use an online image compressor to reduce it further (eg http://compressjpeg.com).

You should put this in the head of all your websites to help them work properly on mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You can read about it here if you’re interested: https://www.w3schools.com/css/css_rwd_viewport.asp

There’s an HTML validator (https://validator.w3.org) which is showing a few errors:
-URLs’s using \ instead of / - unless there’s a reason for this?
-Some missing alt attributes on image tags
-You can solve the first validation error by putting this in the head: <meta charset="UTF-8">
-&copy should be &copy;
-Just ignore the Google fonts error for now.

I think the typography is very nice with the combo of serif and sans-serif. Although I wonder if the heading and paragraph for the portfolio section need a bit more margin?

CSS seems tidy and I didn’t notice any repetition. But it would be good to look into media queries and using em instead of px. em works better on different screen resolutions, and I find it’s often easier.

Sorry for the overly long description. You’ve done well and should be proud of it! :slight_smile:

#3

Thanks for your feedback! I should have run it through a validator before I posted :stuck_out_tongue:
I’ve fixed all of the errors (except for the one in the google fonts line), compressed my image files, and added alt tags. I will look into media queries and using em.

Thanks especially for the hint about the meta tag. That made everything look much nicer on mobile than messing around with columns did!

1 Like