Tribute - feedback + help

Code Feedback
1

So after 2 weeks learning i got excited for my first project and got carried away alittle, trying to finish up and got stuck with responsiveness.

Ignore the JS, i copy pasted something just to fit a big quote, i dont get it anyway yet. here it is: Joaquin Phoenix Tribute

I didnt desgin anything upfront (big mistake) starting only with the tribute foundation rules and built upon that, ending up closing elements with div element to have easier time position them together.
I do understand now that i probably shouldve finish up html structure before going to CSS, instead of juggling between them.

So the main things i need help with are:

  1. Is there a good practice for html structure? should i just make individual div and div containers for all elements ?
  2. Got no idea how to fix responsiveness now, every time i try to add @media rules or css (max-width: 100%, height: auto;), all the pictures and structure breaks.
    I read somewhere that i should design for the lower viewport (phones) first and scale it up later, is this true?

Any other tips beside structure and responsiveness are welcome, i want to get a good grip on that before advancing to JavaScript.

2

Welcome to the forums @exsso. Your page looks good, some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • Don’t use in-line styling. Use external CSS to do all your styling.

Not necessarily. When you layout your page you’ll find that some pages lend themselves quite easily to using HTML semantics.

One place to start is to not use absolute pixel values for sizing things. Percentages will work better. Your page is quite large even for a desktop.
A min-width and a max-width for an image is much easier to work with.

Yes, very true.