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:
- Is there a good practice for html structure? should i just make individual div and div containers for all elements ?
- 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?