Tribute page, my first project!

Code Feedback
1

Hi, everybody!
Here is my first project, I´ll be glad to have any feedback that can help me improve, thanks!

Tribute page: https://codepen.io/Macaco01/pen/xxwxwmr

1 Like
2

Cool man!
Things to improve -

  • Give some padding to the content on your site, to make it more readable.
  • Increase the font size.
  • Can change the font use fonts.google.com

Overall great.
I’ve build the same project a few days ago take a look - click here

3

Welcome to the forums @Macaco01. Your page looks good. There are a few things you should revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your project.
  • When using codepen it 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.
  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are errors you should clean up
  • Review the lesson about giving meaningful text to links.
5

i´ve done some changes based on what you´ve told me , you can go and check them out, Thanks!

6

Hi Zippytyro great advice! Quick question how do you use some of these fonts from google? I tried inputting into my Tribute page under the CSS option as font-family: Comic Neue . Would other step would i have to take to link it to that font?

Thank you,

7

Here are the steps -
Go to fonts.google.com then choose one font and it will get selected automatically.

image
image1296×636 50.7 KB

look in the corner the font is selected, go to embed option -
then copy the link tag code paste it under your <head> section in your HTML.

image
image336×661 20.6 KB

You see the CSS there copy the font-family code after it and paste it wherever you want that font-family.

PS: you can select as many fonts you want from the Google fonts site. Add them at once, all the fonts will be added then copy the whole code.

8

I still see coding errors when running your code through the W3C validator @Macaco01. Maybe you didn’t save or maybe you created a new pen?
You can do the editing in the same pen, save it and then you don’t have to resubmit your project.
If you made changes and saved them in a new pen you’ll have to resubmit using that new URL.
Hope that makes sense.

9

Oh super simple! Thanks Zippy!

10

Hope that worked for you. btw my name is Shashwat. we can connect on instagram @zippytyro.

1 Like