My Tribute Page - Would Love Some Feedback!

[Hacktinium]

Hi all,

This is my first project - the Tribute Page - and as you can see, it’s very basic!

I actually finished the tribute page weeks ago, and kept forgetting to put it on the forums, so I have learned a lot since creating this, but I would still really appreciate any feedback you have for me - don’t hold back!

p.s. I’m just about to post my 2nd project on here too, so please take a look at that if you get a chance, and hopefully see how I’ve progressed?

Thanks everyone!

[bbsmooth]

Overall this is nice. Good job on the alt text for the image and nice use of the <blockquote> tag. Just a few issues/suggestions:

• When I narrow the browser I get a horizontal scroll bar. You definitely want to get rid of that. My understanding is that these projects are supposed to be fully responsive, so horizontal scroll bars should almost never be there except for extreme circumstances.

• The <figcaption> element must be a child of the <figure> element, so change the #img-div div to a <figure>.

• The main content should be wrapped in a <main>. I’m going to say that you really don’t have a header on this page, so basically all the content above the <footer>.

• If you want to be really semantically correct then you can use the <time> element for the dates in the list instead of <strong>.

• The wikipedia link at the bottom isn’t the greatest link text. The link text should be a little more descriptive about where the link will take you. You should be able to rework that sentence so the link text could be something like “Carl Sagan’s Wikipedia page”.

• There is an empty <p> tag just before the footer.

[Hacktinium]

@bbsmooth thanks for taking the time to look over my project

@bbsmooth

When I narrow the browser I get a horizontal scroll bar. You definitely want to get rid of that. My understanding is that these projects are supposed to be fully responsive, so horizontal scroll bars should almost never be there except for extreme circumstances.

You’re absolutely right about the scroll bars - I will definately fix that.
TBH I need to work on my understanding of responsiveness as a priority - I’m finding CSS much more complicated than HTML, but I’m taking steps to get better!

@bbsmooth

The <figcaption> element must be a child of the <figure> element, so change the #img-div div to a <figure> .

Thanks for this - I didn’t fully comprehend the docs when I looked at captioning, however, just for the purposes of this excercise, I’m going to leave this one as a <div>, as the brief does explicitly say to use one. I will remove the <figcaption> element and just use a <p> instead.

@bbsmooth

The main content should be wrapped in a <main> . I’m going to say that you really don’t have a header on this page, so basically all the content above the <footer> .

I think I did that because the brief doesn’t explicitly tell us to use one; only that we should use “an element with a corresponding id="main"”, but now I realise I probably should have read between the lines on that one!

@bbsmooth

If you want to be really semantically correct then you can use the <time> element for the dates in the list instead of <strong> .

After a bit of browsing, I can see there are definately some advantages of using the <time> tag for this, however, it would also be a valid timedate atrribute value within the <time> tag, would it not? So should I just use <time>, or <time datetime=">?

From what I can see, the datetime attribute is used for calendar integration, and so wouldn’t be much use here

…as for the <strong> tags, I just used those for styling, but I’m getting the impression I should try to keep my styling within my CSS as much as possible, rather than in my HTML, right?

@bbsmooth

The wikipedia link at the bottom isn’t the greatest link text. The link text should be a little more descriptive about where the link will take you. You should be able to rework that sentence so the link text could be something like “Carl Sagan’s Wikipedia page”.

Yes, a change of mindset is needed I think! I need to be thinking more semantically when I write - thank you.

@bbsmooth

There is an empty <p> tag just before the footer.

You can just pretend you never saw that

OK, I’m re-writing the whole thing, taking into account all your feedback!
I’ve started using a proper text editor rather than Codepen, too (because writing in VSCode vs writing in Codepen = no contest!). I will post the ‘refactored’ version as soon as I’m happy with it!

Thanks again