First Tribute Page (Flexbox)

Code Feedback
1

Hello,

this is my first ever project with HTML and CSS; i’ve used some basic flexboxes.
This is the pen:

https://codepen.io/buccs96/pen/wvaNKve

My only gripe with this project is that when zooming in and out, the layout destroys itself basically. I’ll be more careful future projects, but for now, i’m happy.
I’d like some advice though to implement in this project in the future; that re-sizing problem really bugs me.

Have a nice day!

2

I would fix the layout problems now before moving on so you make sure you understand how to make a responsive design. Start narrowing your browser window and you will see things break. My first suggestion would be to not set the height on things using px. You can often get away with this for widths (although I would recommend you try not to us px for that as well), but you want the height to be able to grow as needed.

3

I attempted to view it in full screen and Codepen said you need to verify your email for that to work.

-Christopher

4

Welcome to the forums @buccs96. Your page looks okay, couple of things to revisit;

  • On using codepen. 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, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have a couple of boilerplate tags just thrown in there randomly…there’s three opening <body> tags (only should be one) and no closing one
  • An <img> element must have an alt= attribute. It will throw errors in a code validator.
5

I think that with the body tags i messed up because i was rushing the text and submitting my work, i know it’s unique!

I guess i need to one up my alt=attribute game because i haven’t given too much weight to it, thanks!

@emicion I have contacted the staff but i’m not receiveing any reply. It throws me an error 404 for validating the email.

@bbsmooth I resolved the resizing issues by wrapping everything in a div element and settings the max and min height / widths. Maybe it’s not the most elegant solution, but it did the job.
Gotta work on the responsive game alot!

Thanks for the replies and tips! Have a nice day.