My first FCC Project! Tribute Website

Code Feedback
1

Hi everyone :wave: , I have just finished my Tribute Page. I tried my best and there’s the result https://codepen.io/Kulasus/pen/ydNypd. What would you add? And what you don’t like? I am looking forward to your feedback. :hugs:

2

The linear-gradient background on your main div sometimes makes it hard to read the white text.

I’d put a min-width on the main div so it can never get too small and scrunched up.

I’d also give the main div some left/right padding so the image doesn’t push up against it’s sides when the width gets to mobile sizes.

In codepen you don’t need the <style> tags in the css section. You can also use the menu on the top right of the css section to make your css look more organized and check it for errors.

1 Like
3

Thanks for your feedback!

Good ideas i will update it asap.
I was actually using visual studio code and then I copied it into codepen. Codepen looks very confusing for me.
Also I would like to ask: Is there any way to edit body tag? In VSC it worked normaly, but I couldnt find any solution for codepen. :thinking:

4

It looks like to me that you have the right idea to use the body tag with what you are doing in the CSS section on codepen to manipulate your body but the <style> tag you have in the CSS is in the way of letting it happen.

5

It looks good @Kulasus but there are some things you can revisit.

  • codepen expects only the code you’d put between the <body> </body> tags. If you have something to add to <head> click on the Settings button and add it there. (For instance, the link to your font)

  • likewise, you don’t need to include the <style> </style> tags in the CSS section. codepen assumes them for you.

  • codepen provides you with validators for HTML, CSS and JS. Click on the arrow in each section and click on the respective ‘Analyze’ link. You have some errors in HTML that you can clean up.

  • Not sure if you noticed but you’re using the <strong> tag but the text on your page doesn’t render as such. This is because when you imported your font you only selected regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700).
    Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.

1 Like