Tribute project (html, css) - Feedback etc

Hello!

I’ve had a quick run through the projects for the first section of the curriculum. I have rough templates of them all up and running with every box ‘checked’ - However, I didn’t really add any details to the pages - just left as ‘Lorem Ipsum’ here, there, and everywhere. (with a few “image here”'s)

Rather than powering on to the next subject in the curriculum I’ve decided to go back through them and actually add text and images properly.

Here’s the first one: Clickety clickety click.

I must admit that I had rushed through making them so please do highlight any issues you may see :slight_smile:

Cheers all,
Chris

Your page looks good @Chris6316. Some things to revisit;

  • When requesting feedback on a project please open the topic in the #project-feedback subforum. (I’ve moved this for you)
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • div is not a proper element for the head element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (be wary of duplicating selectors, it can make maintenance a nightmare)
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the ampersand to the HTML entity to be compliant with the reserved characters standard.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • clicking here” is not accessible

Hi Roma,

Thanks for your feedback and thread manipulation :slight_smile:

Hopefully, I have now rectifed areas based on your recommendations.

However, the final point of the ‘Clicking here’ hyperlink not being accessible I’m struggling with. Everything is correct but for some reason Instagram will not accept incoming traffic via codepen. Is this a known issue?

I suppose I should get to work on the next project!?

Many thanks,
Chris

*Edit: - I’ve just read that external links on codepen can be blocked due to their own security features.

It looks like you read on of the links I mentioned regarding accessibility. Accessibility means it’s available to as many people as possible. It had nothing to do with what happens when the link is clicked.
I wasn’t aware that Instagram blocked codepen traffic. If so, it’s not a big deal and you shouldn’t worry about it.

Yes, by all means. Look forward to seeing your next project.