Ansel Adams - Tribute Page

Code Feedback
1

Would love feedback on what I’ve created for the Tribute Page certification!

2 Likes
2

I really like the layout and colours but I wasn’t able to review the page in full screen mode as I wanted. When I tried codepen said that the owner of the page needs to verify their email address.

3

Hi @xTek

Great looking tribute page.

Just a few points to note:

  • I noticed the second to last image did not load
  • Include alt text for image elements
  • include a space after the css property colon, it makes the code easier to read
  • the .nav and .nav ul selectors do not have consistent indentation

Happy coding

4

fixed! didnt realize. ill read comments tomorrow. its 4am i am tiredddd!

5

Well done! I love the feel, and I can see that you put a lot of effort into the project.

I just noticed one thing: it could be a bit more optimized for mobile devices. The nav bar is cut off in narrow screens, as is some of the text. Fixing this may require the use of media queries though, which you’ll learn really soon in the Learn Responsive Web Design by Building a Piano lesson. When you get there please use them for your project - it’s a beautiful page and optimizing for mobile clients would make it complete.

All in all amazing work and I’m sure this is only the beginning of many more incredible webpages in the future.

Nicolas, 17

1 Like
6

The negative margin is causing that overflow on small screen sizes. You could calculate it based on the viewport width instead.

margin-bottom: calc(25vw * -1);

Your nav needs to stack or wrap, to avoid the overflow on it. I would suggest you at least just let it wrap, it is a good first “defensive” default to have. If you want more control over it, you can add it later.

I would give the typography a little more love. Find a nice font to start with. If you click the “Asserts” button on the Codepen footer, you can pick a font.

Overall, it looks nice and is a great first project. Keep it up.

1 Like
7

I love the design. Looks like you put a lot of time into this.

1 Like