Feedback for my first project - Tribute Page

Hi everyone!

After many years of dabbling, I decided to take the leap and go for (seriously) learning all things Front End Dev so I’m glad that I found FCC which has helped tremendously. :grin:

I started designing/coding webpages back in 2000 for about 4-ish years and picked it back up in 2016 when I ran a website and needed to make changes to the design/troubleshoot. Just simple CSS and HTML, but I forgot how much I actually enjoyed it and wanted to learn more.

I just finished my first project and was wondering if I could get a bit of feedback on it. :smiley: I think the biggest struggle I encountered was fiddling with positioning divs, but I understand that it’ll just take practice. But let me know what you think and where I can improve. I’d really appreciate it!

My Tribute Page can be found here.

Thank you for taking the time to look and I appreciate your feedback!

1 Like

Your page looks clean, nice job!

If you want some help with colors you can go to Colorsinspo they have some great color combinations there.

I was looking through your code and saw html and body tags, on codepen you don’t need to add these tags you can just start right off
Annotation 2020-02-01 205524
Any external stylesheets you want to link, like google fonts, you can do this by clicking on the gear icon next to HTML Annotation 2020-02-01 205643
Also your page doesn’t look as good on mobile view

You can use media queries to place the image and content to the full width of mobile, like in a column layout, you should use flexbox or grid for that (don’t use float).

Have fun!


Ah, thank you so much for your feedback and for the tip with codepen and colorinspo! :grin: I’ll definitely work on getting more comfortable with flexbox/grid and start adding in media queries too.

1 Like

Hi @oboroinori, welcome to the forums. Your page looks good. There are some things you may want to revisit.

  • As mentioned, on using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Run your HTML through a validator. Click on the ‘Validate by Direct Input’ tab and paste in your HTML. You have some typo’s and missing closing tags that you may want to revisit.
  • In codepen, in the CSS section, click on the down arrow and then the ‘Analyze CSS’ link. You have a couple of duplicates that affect how your page renders.

I don’t normally comment on someone’s design but since you’ve made the dates in your timeline a different color, try removing the bullets. It’ll look nicer.

Thank you, Roma! I appreciate you taking the time to give your feedback! It means a lot :grin:

I went through and used the analyze-tool on both sections and fixed what was flagged. There was something in the HTML about my link not being relative, but I wasn’t sure what that meant? Everything else came up fixed.

And I appreciate your comment about the bullets, and it does look a lot better without them :sweat_smile: Thanks again!

1 Like