I think I may have done the html and css classes a bit too fast as I realized during this project that I forgot almost everything I learned so I spent the all time going back to the html and css lessons and googling.
This tribute page is visually ridiculous but that’s not what’s bothering me. I’m more concerned about the code I wrote. It looks so messy and I’m afraid I’ll stick to bad code habits.
Any help and feedback would be much appreciated
I also apologize for any grammar error (english is not my first language)
Welcome to the forums @joanaaaaa. Tbh, can’t see your page too well. Please verify your address with codepen so that we can see it full view.
Some 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.
Run your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
There are various errors in how you set up the basic template/structure and I’ll touch on them at the end of this post but just remembers, in codepen all you need to enter in the HTML section is the code that you’d put between the <body> </body> tags.
Do all your styling with external CSS.
you have some in-line styling and it deprecated
It’s hard to read things in your timeline when everything is centered. Looks worse and is harder to read on a small screen. The human eye reads from ltr and trying to read something disjointed because it’s been centered is not a good UX. Think about maybe a left justify.
Also may be a good idea to investigate line-height when using that font
Don’t use the <br> element to force spacing. Use margin and/or padding in CSS.
@alkapwn3d, I used to tell people to use codepen’s validator but it’s changed recently and gives some false positives and misses errors that should be picked up. That’s why I now tell people to use the W3C validator.
The CSS validator in codepen still seems to be good.