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!

2 Likes

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