Tribute Page - Tony Stark (RIP KING)

Hey guys! I finished my tribute page, the link is:

I’m very very very new to coding and this was my first attempt based on this this. I’d love any feedback on structure! and in particular responsiveness to changing dimensions because resizing images based on parent element is the last user test the page needs to pass (user story #Layout 1).

THANKS and rip to tony stark, too pure for this world.

1 Like

Hi @chantel! Welcome to the forum :grin:

I’m not sure about your project. It’s a very complex structure and looks like you are not understanding the HTML and CSS Logic.

Have you finished the Responsive Web Certification Challenges?

Something that works for me is a draw in paper a wireframe of my page to identify the areas and the selectors I have to use and how to organize my CSS code.

For example this i made for your layout. :sweat_smile:

Maybe in this case you can use a css grid instead of flex boxes. But is a lot of work. Remember you must to make the page responsive. I mean, it’s a good project but not to start the Tribute Page Project.

It’s better to start with simple things to understand how HTML and CSS work and then move to complex things.

But is only my point of view. I do not intend to discourage you, your work is a good attempt, but there are many things you can improve. Keep going!

4 Likes

i miss you Tony the best.

Hi @chantel, welcome to the forums. Your page looks good but there are a few things you should revisit.

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • run your tests for the user stories again. You’re meeting 9/10 stories. Click the red button to see which test is failing and why.
  • 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.
    • In the HTML section, you have obsolete elements, elements that are invalid, duplicated elements, etc.
    • In CSS, you have an unknown property and a duplicate that could potentially affect how your page displays.
  • try to not use <br> to add spaces in HTML. Instead, use margin and/or padding in CSS
  • Review the lesson about giving meaningful text to links. (The one word ‘here’ is too 1990’s)
  • Make your page responsive

Woah, thank you for this, I’m blown away by how neat this is :joy:! I’m going to restart this now that I have more time. I don’t come from a tech background so we’re in for a bit of a ride to understand the logic but I’ll give it a crack :smile:.

Also thank you @Roma! Really appreciate it :smiley: