I'm not very confident about my first project

Hi,

https://codepen.io/joanaaaaa/pen/KKpMGKm

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 :slight_smile:

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.
  • Review the lesson about giving meaningful text to links
    • a link called ‘here’ is not accessible

Just a side note of what a very basic starter html would look like;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  /* everything between these two tags is what goes into codepen */
</body>
</html>
1 Like

In codepen theres a down arrow in the title of the html editor

Screenshot from 2020-02-19 23:02:27

Click ‘Analyze HTML’. It checks your code for mistakes that you might have made.

Also if you click Format HTML, it will make your code look neat so that you can debug it a little easier.

@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.

gotcha. i dont really use codepen, i just tried analyze to see what it did. i didnt even check to see if the errors were legit tbh lol

Thank you all so much for your help. This is such an amazing community :slight_smile:

I think I got too excited about all of this and I did it all way too fast, specially the lessons.

That only made me do a ridiculous first project and not learning properly all the concepts.

I’m gonna work on what you guys pointed out and review some lessons.

@Roma thank you for such a detailed review of my first project :slight_smile: I appreciate that