Finished the tribute page, finally

Hi guys,

https://codepen.io/YKKZIP/pen/yLJZyWQ?editors=1100 (in case it’s not loading properly, should have a green header and 3 pics on the page.

I finally finished the first challenge. Much harder than expected, I’d love feedback as I really struggled on a few things mainly responsive design.

My tribute-info stays inside the page but I could not for the Life of me apply this to the header/images or the blockquote. I need to go back and study this. [EDIT] I’m assuming this is something to do with flex-box. It seems to happen below 260px.

At this stage is it worth going over everything again or to push on? I find I spent a lot of time on one thing i.e spent a week playing flex-box zombies but unsure if my time is better spent moving forward.

Thanks in advance.

Nice work chris?
keeping it simple and clean.
But your first image link is broken and you can rename your project by clicking the pen icon at the top left corner above the editor and one last thing try and make it more responsive using @media screens or something equivalent. Tips preview with your smartphoneTips.

1 Like

Thank you!

I’m going to go back and learn the media stuff again, thought I had the hang of it on the FCC challenge.

It’s quite simple and fun to code, you will love the magic it will bring to your project.
Happy Coding

1 Like

Your page looks good @oocopperpot. 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there are things to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
1 Like

Thank you, I’ve adjusted the above. At first I felt overwhelmed i.e “Heading cannot be a child of another heading” I had no idea what this meant but then saw I was just missing a closing element.

Good stuff, will use that link in future.

For my header/title/logo what is the best way to do this? I used flexbox but now struggling with responsive design, is this where absolute positioning comes in?

I’m not sure what you’re asking. Your page is responsive.

Below ~585px I’d like everything to stay on the same line instead of increasing the header height. I think I solved it.

As of now, everything wraps under itself.

https://codepen.io/YKKZIP/pen/zYBeoBO

@oocopperpot The project is looking nice! It is responsive on my end, passing all the tests, and looks great. One thing for me might be making the font a little bigger in the tribute-info div. That is just one thing I would like personally. It looks great nonetheless and I think you are ready to move to the next project! Happy Coding! :smile:

1 Like

Looks good @oocopperpot.

  • Run your HTML code through the W3C validator one more time.
  • Run the ‘Analyze CSS’ in codepen one more time. You have a duplicate selector.
1 Like

Thank you, I’ve now created two pages, one for testing. As a result some of the old page got a bit messy.

Thank you! It’s incredibly frustrating doing this page, I thought it would be easier but when you solve a problem it’s such a nice feeling, until 5 seconds later when you hit the next problem!

Looking forward to the next one.

1 Like

Okay, hopefully I was looking at the right one and hopefully you’ve corrected the last two issues.
Good on you.

1 Like