Believe it or not, I'd like feedback on my 1st project..spoiler alert...its a tribute page!

Code Feedback
1

https://codepen.io/kriegles/pen/JjbEYoj

Hey all,

Just finished my first project like many others here. I did my best to keep it responsive with the bits that I have learned. I’m not the most visually creative person so i struggled with making it look all that “cool”…went with clean instead.

Looking forward to any feedback. Thanks!

2

You and me both brother :slight_smile:

Overall this is great. Responsiveness is good. Granted, this is a very simple layout and thus you don’t even need media query break points (which you don’t have). As the layouts get more complex you will be using them though. My advice, always style your page first for a very narrow view port (i.e. narrow your browser in as far as it will go and style for that width) and then add break points for wider widths.

Just a few little issues to deal with:

  • Don’t skip heading levels. You’ve jumped from h1 to h3.
  • You’ll want to wrap all of your content in a <main>.
  • I think the link text at the bottom could be a little more descriptive to help screen reader users. If they Tabbed to it they would just hear “this fan theory”, which isn’t terrible, but I think it could provide a little more information to make it clearer about what the link is pointing to. Maybe change it to something like “alternate fan theory about the Cabbage Merchant”. And leave out the word “this” in the link text.

Overall, very nice job.

1 Like
3

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

  • 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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • 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).
  • And as mentioned, accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “this fan theory” is not accessible
4

You did a great job making your page responsive. One small thing:
I clicked Analyze CSS in your Codepen, and found one error:

Unexpected unknown property “margin-bot”

#image {
max-width: 100%;
display: block;
height: auto;
margin: auto;
padding-top: 2vh;
*margin-bot: 5vh;
}
margin-top? :wink:

5

I didn’t go all that much into the code as the others, but when I saw your page I noticed one slight thing that always bugs me in my own projects!

Do you notice the thin white border/line on your left side of the page? That’s because the body has a margin set already, so I usually start all projects with the following code in my CSS:

* {
  margin: 0;
}

To be honest, I’m not sure if the margin is part of the html or body element (or any other element for that sake), but I just find it annoying so I always start by removing it!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.