Tribute page project Wim Hof (Opinions)

Code Feedback
1

Hello, I made my first project about Wim Hof. Could you give me out my mistakes and tips which things I can improve?
https://codepen.io/des3000/pen/pojeMPJ

2

Welcome to the forums @des3000. Your page looks good. Some things to revisit;

  • It’s a very short page so you don’t really need a navbar. I’d suggest getting rid of it for two reasons;
    • it’s a very short page
    • it doesn’t resize on smaller screens and is therefore not responsive (not sure if you want to tackle that issue yet)
  • Don’t use <br> to force spacing or line breaks. Use margin and/or padding in CSS
  • Review the lesson about giving meaningful text to links.
3

I made a new one. I wasn’t happy with this one. I thought “my employer will look at it in future it must be better!” So I make new one :D. Can you look on it also?
https://codepen.io/des3000/pen/NWGgPjo

(I used navbar to check how it work :smile:)

4

I like it @des3000. Some things to revisit;

  • Your page passes 9/10 user stories.
  • When using codepen it only expects the code you’d put within the <body> </body> element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • You have Montserrat as the value for the font-family property you need to either link to it or import it. And don’t forget to provide the backup font.
  • Review the links I mentioned above. “Click here” is not accessible
5

Okay, I will fix it but I don’t know how to fix this 9/10 user stories about responsive image. On mobile it looks good. I tried adding width: 100%; height: auto; but it was lower than div next to img what looks bad. Could you help me with it also?

(and I use width: 100%-10px; is it acceptable?)

6

When a test fails, click on the red button to see which test is failing and why. There will be text that tells you what it’s looking for. In this case, you need to make some changes to your image element. When you make the first change the test will fail again but with a different message. When you add that change it will fail again with yet another message. When you make that change, the tests will all pass.

I did what the failing messages were telling me and got all tests padding. I’m blurring it out. Check only if you absolutely have to.

#image{
grid-area: header-img;
max-width: 100%;
display: block;
height: auto;
}

1 Like