Tribute assessment

Code Feedback
1

So, here’s my first-ever attempt! Please I need your constructive feedback. Thanks.
Tribute page

1 Like
2

Hello @Jedidiah, nice work on your tribute page. I am viewing on mobile and everything looks okay. All user stories have also been fulfilled. Text seems rather small though.
All the best

1 Like
3

Thanks for the feedback. I’ll work on the text as identified.

4

Hey there @Jedidiah !

Fantastic job on your page!

One thing I suggest is instead of labeling your <div> “main” why not make a <main></main> element to replace it?

It’s also best practice to put the <script></script> tag at the bottom of your html right before the last <html> tag closes out the markup but in codepen just put at the very bottom after all the other elements. For more on the HTML boilerplate here’s an article that should help:

https://betterprogramming.pub/understanding-the-tags-in-html-boilerplate-38d1ae2805f7

I also suggest adding a background color to these stats here’s to make them pop-out:

image
image938×252 5.3 KB

and possibly center your navbar as well:

image
image824×188 6.18 KB

Best,
Cy499_Studios

1 Like
5

Hello,

I am new to this forum but it looks great. The only thing I would suggest is to take away the 4 dots in the nav bar and center all the nav links. To me the 4 dots don’t really add anything. I guess the navlinks could either go within the header somewhere under the title or just underneath the header above where the main text starts.

Thanks,
Hannah

1 Like
6

You page looks good @Jedidiah. 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>’
  • 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.
    • “several publications” is not accessible
  • It’s a nit but with semantics you wouldn’t want footer to be nested within the main element.
1 Like
7

Thanks for the suggestions! The link on boilerplate was really helpful. Though, seems replacing the <div id="main"> with a <main></main> wouldn’t pass the first test.

8

only because you have removed the id, try keeping the id

1 Like
9

@Roma , I’ve revisited the issues raised. Can I proceed?

10

Done and it passed! Thanks
@hannahro15, nav links centered…though I’d love to keep the ‘dots’.

11

@Jedidiah

No, the <main> tag still needs an ID of Main

Sorry if there was any confusion on my part LOL

<main id = "main"></main>
1 Like
12

@Jedidiah, Just something to revisit.

When someone tells you to change your code think about what they are asking you to do. You don’t have to do it. Someone suggested changing a div element to be a main element.
There was something not so good about that suggestion.

  1. You already had a main element further down in your code and you can only have one main element in a document.
  2. That first element with the id="main" should remain a div element.
13

Lesson learned @Roma . Document now contains only one main element.

14

@Jedidiah Your page is good but few things to revisit:

1. Run your code through W3C validator

2. Make your nav-bar sticky see How To Create a Sticky Element

1 Like
15

Thanks @anon38330656 . I was able to fix virtually all the errors thrown up by the validator except one: Bad value for attribute on element link…. I can’t seem to find a way to fix that. Any help? Plus, why couldn’t the codepen’s ‘Analyze HTML’ (and CSS) tool pick up these errors identified by the validator?

16

I’m not seeing the W3C validator throwing any errors other than the first warning and the first two errors that you can ignore because you’re using codepen.

I don’t know which validator codepen uses but it seems to miss a lot of errors which is why I recommend the W3C validator.
Codepen’s validator for CSS is good though.

17

Thanks for the helpful response. Hope I can now proceed to the next project. Looking for forward to even learning more!

18

Looking forward to seeing your next project @Jedidiah.

Happy coding!

1 Like
19

Yes, Now your nav-bar is sticky

1 Like
20

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