(Tribute Page) My first webpage!

Code Feedback
1

Here is the first webpage I have ever created! Feed back is appreciated. https://codepen.io/Wade1928/full/OOWOjY/

2 Likes
2

Nice solid first page!

3

Ah, Theodore Roosevelt, a classic. And a really great first page, congrats!

How long did it take you? My first was the better part of a week.

4

looks great! Nailed it!

5

Thanks to all of you! Yes it took me about a week also. There was a lot of trial and error involved as there already has been with the portfolio project.

6

I like your page , congrats! :slight_smile:

7

@wade1928 I agree with the other comments that this is a great start for a first project! I like that you’re using HTML5 semantic elements like header, figure, figcaption, and footer. I like the color scheme you chose as well. I’d like to give you some helpful feedback, so hopefully this isn’t too much. You’re definitely on the right track and learning quickly. :slightly_smiling_face:

  • It’s great to see that you’re using an alt attribute with your img element. However, the content of that alt attribute doesn’t describe the content of the image. I think, in your case, since you have a caption that describes the image, your alt attribute can (should?) be alt="" so you don’t have redundant information for screen readers. WebAIM is the best resource for accessibility issues (and for learning about the alt attribute) that I’ve found, in case you want to learn more.

  • I see class="container-fluid" in your HTML but no link to bootstrap and no mention of this class in your CSS. Did you mean to take that out, but forgot or are you expecting something to happen that isn’t happening?

  • Your anchor element <a> color doesn’t pass the color contrast test. This is a good tool to use when selecting colors. Another good tool for colors is Paletton.

  • You skip heading levels by going from h1 to h3. That’s not a problem visually, but it can lead to problems for parsers, screen readers, and search engines.

    • Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

    • Do not use lower levels to decrease heading font size: use the CSS font-size property instead.

    • Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

    • You should consider avoiding using <h1> more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.
      (Source)

  • In your CSS, you have padding 40%;. This should be padding: 40%;, but I’m not sure if the result of that is what you want. It’s probably better to take it out of your CSS altogether. I found this error by pasting your CSS into this CSS validator. That’s a nice tool to use for checking your code in the future. This HTML Validator is another helpful checker to use for your future projects.

  • I notice you’re using pt for your font sizes. Why did you decide to do this? I ask that purely out of curiosity and not judgement because I didn’t realize it was possible until I saw your code. This article seems to suggest that it’s generally not a good idea to use ‘absolute’ units like pt for screens. Instead, it’s better to use relative units like em and rem.

There’s a lot of info here to get you going in the right direction. Keep working hard and I look forward to seeing your future projects. :sunny: