First project :A tribute page

Code Feedback
1

Hello all!
Can you do me a favor and have a look at my first project? https://codepen.io/saydha/full/KKVRqPK

Thanks.

2

Welcome to the forums @vladimircarrion. Your page looks good. Some things to revisit;

  • The test script should be included, with all tests passing, when you submit your projects.

    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

  • Run your HTML code through the W3C validator.

    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.

  • Review the lesson about giving meaningful text to links.

  • It’s bad practice to skip headers like you did. Don’t go from h1 to h4. Better to use h2 next.

3

@Roma

Thank you for the advice. I’ll correct those mistakes and post it back to see my progress.

1 Like
4

Hey Vladimir,

nice to meet you!

Great job so far!

My ideas:

  • on my wide screen, I’m having a hard time to read the texts, because the lines are very long
  • this is how your site looks like for me on Firefox:

Screenshot_2020-08-06_09-19-45
Screenshot_2020-08-06_09-19-45986×250 70 KB

When I remove the font fantasy, it will work again.

Keep us posted!

5

Hello @miku86. I didn’t get back to you because I decided to chage my tribute page and be a little bit more original. This is it. In my opinion, it’s much better than the first one. https://codepen.io/saydha/full/JjXodqe

1 Like
6

Hello @Roma. I decided to be more original in my tribute page and came up with this https://codepen.io/saydha/full/JjXodqe. I am still having problem with the W3C validator. It pops up 3 errors. I fix it and continue appearing.

7

I just looked and see about 11 errors from the validator. They look easy enough;

  1. Element head is missing a required instance of child element title .
  • with the head element you need to add a title element. something like; <title>Tribute to Jeff</title>

  1. This </img> is not a valid tag. The img element is self closing. Review this lesson

  2. This line is not closed properly;
    <img id="image" src="https://www.the-sun.com/wp-content/uploads/sites/6/2020/06/msemail_GettyImages-587967668jpg-JS559849238-e1591188498280.jpg" alt="Jeffrey Epstein"
    there’s a missing > at the end

  3. This <figcaption /> is not a proper closing tag.

  4. The last error says you have a closing p tag but no opening one. And there is no opening one.

Cleaning up some of the code alleviates some of the underlying errors that’s why only six changes are needed to fix eleven errors.

As an aside, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box. When you run it through the validator you’d see one warning and two errors but you can ignore them. You’re more concerned with the errors in your HTML code. Not the boilerplate.