Edit: I wrote a lot. I hope it’s not overwhelming.
You can deploy your page as a webpage on github itself so we can see and inspect the page without having to download the project, and it’s both free and easy to do once you know how. Just go to your project’s repo, then click Settings, scroll down to the GitHub Pages section, choose a branch and specify the folder with your index.html (the default /(root) is correct for your page). This is optional, but also really cool since it allows your github to function as both a code repo and a portfolio site.
How does your site look when you open it in the browser locally? This is what it looks like when I download and open it in the browser:
Here’s why:
You need to point to the current relative path of your images and css (.\
represents the same directory the html file is in). (Remember the background image in the CSS too).
After fixing the paths, one of the images still doesn’t show. Line 34 says <img src=".\finnish.we" alt="paint brushes and picture frames">
. This is a typo, change finnish.we
to finnish.webp
.
None of your <br>
tags are necessary. Block level elements (header, divs, h1-h6, p, main, etc.) will automatically occupy a new line unless modified with css. Removing all of the <br>
s will fix your white space issues so you match the spec, though you’ll need to adjust your header’s margin. Still, better to use margin
and padding
to control white space than <br>
.
Use paragraph tags <p>
for the item descriptions. You could instead simply change the font-weight
for the <h4>
tags, but really <p>
is the more appropriate tag.
Header, h2, h3, and the blue text spans all look good, and good job with the alt text for people who are visually impaired.