Thomas Alva Edison Tribute Page - Feedback

Code Feedback
1

Hello world! I just finished my first project, for responsive web design certification. My tribute page was about Thomas Alva Edison.

I need your feedback so I can evaluate my project :smiley:
Here is my project: https://codepen.io/pamela-sarnia/full/gOaVNRa

I open for any crititism :smiley:

2 Likes
2

Welcome to the forums @pamela-sarnia. You page looks good. Some things to revisit;

  • The title element belongs in the head element, not in the body element. If you want to use it in codepen, 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.
  • Review the lesson about giving meaningful text to links.

I donā€™t normally comment on someoneā€™s style because it is what it is. This is something you should have a second look at;

  • on smaller screens the ā€œlife infoā€ section starts falling out of itā€™s container. Since you stack ā€œlife infoā€ and ā€œtribute infoā€ maybe move ā€œlife infoā€ to the left more and make the container a little wider.

Thatā€™s a lot of fonts in the font-family. You donā€™t link or import Roboto and itā€™s never used. Better to just have one or two fonts with a generic fallback (serif or sans-serif).

1 Like
3

Thank you for your advice :slightly_smiling_face:

By far:

  1. Iā€™ve deleted some fonts.
  2. Iā€™ve deleted title in main and move it to head section in setting.
  3. Wikipedia Page is working.
  4. Iā€™ve tried to fix the floating but the two columns looks too narrow in mobile view. So, I make two mobile responsive display, one for computer screen (columns width 55% and 35%) and another for mobile screen (both width 100%). But, it doesnā€™t work. In desktop view, it still choose the mobile view.

I also tried max-width so it will be two columns in desktop view and one column in mobile view. It works perfectly but the margin is too wide.

So for now, it displays one column though I also make it two columns for desktop screenā€¦

4

Hello Pamela,

The content centered make text very easy to read, but in my notebook the fonts are very small.

I see in the header and footer, title and quote is not align with the whole page content.

Maybe the gaps between boxes would be more uniformed, also left and right borders more next to the content.

5

Thank you :slightly_smiling_face: Iā€™ll try to fix them.

6

Everything stacks nice now on small screens and looks good on large. Nice job!

I didnā€™t say it wasnā€™t working. I said it wasnā€™t accessible. Read the attachments that I added to understand what accessibility means.

7

Ok. I change it to:

Read the rest of the story on Thomas Alva Edison Wikipedia Page.

Sounds like read more. Still thinking about a better sentenceā€¦

8

I would say it is good but you should have picked a small image and should have had a bit more content like tribute videos about him.

9

That sounds good. Nice job @pamela-sarnia