First project! Would love some feedback on my tribute page

Code Feedback
1

Just finished my :soccer: themed tribute page.

Still getting my head around properly incorporating responsive web design and I feel like I may have overcoded some of the CSS styling (as I was doing a lot of fiddling and not 100% sure what would work)

Thanks in advance for any feedback to help me learn and improve! :+1:

Codepen: https://codepen.io/cjcon90/pen/dyYZvzo

Github: https://github.com/cjcon90/freeCodeCamp-tribute

(edit: I’ve just looked at the page on my phone… yeesh, lots of learning to do yet!)

3 Likes
2

Nice job @cjcon90.

I love your theme. I also love the fact that you wanna improve on your skills. That’s what really matters. When we work on ourselves, we become better, and better, then someday eventually best.

I suggest your website could use some more white space. You should try using paragraphs, margin or padding to space out your content.
Happy coding!

1 Like
3

It looks great.

I would agree with @Lafen , a little white space could make it look even better and also optimize it for mobile view.

1 Like
4

Hi @cjcon90 !

Nice job! :slight_smile:

Like previous posters have said, this page would benefit a lot from some white space between the paragraphs. It’s preferable to control paragraphs by using several p elements, not with br. (so the white space you’d achieve in the CSS with margin-bottom on p, for instance)

I’m curious why you’ve used position: relative on many of your selectors, as I don’t see any actual offsets with the top, bottom, left or right properties. If you don’t want to offset your elements, there’s no need to use position: relative :slight_smile:

Also, it might be worth keeping in mind that not all font-weights exist for all typefaces. I think, for instance, that Georgia does not have a 200 font-weight.

Keep up the good work!

1 Like
6

@Lafen Thanks for your encouragement, and kind words re the theme! All that time pondering over and scrutinizing different shades of red was not in vain :smile:

@qvistdev09 Thanks! That’s really helpful info (total “duh” moment not using p for paragraphs!)

Gonna watch more vids on positioning as I was kinda using them willy-nilly without fully understanding trying to make things work! That was definitely an example of some of my “overcoding”

With the help of all the feedback here I managed to clean it up a lot and it's total night & day, especially for mobile. Really appreciate the help!
7

Your page looks good @cjcon90. Some things to 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 projects.
  • When using codepen it only expects the code you’d put within the <body> </body> element 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 code through the W3C validator.
    • There are coding errors you need to address.
    • Use external styling rather than in-line styling
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The HTML one misses a lot which is why I recommend W3C
    • The CSS one is good. Run it. There’s a duplicate you can clean up.
  • Don’t use <br> to force spacing. Use margin and/or padding in CSS.
1 Like
8

Thanks so much! That’s incredibly helpful, especially the W3C validators.

Still getting to grips with CodePen (also just discovered github pages) but that helped immensely and I understand it a lot more now!

Really appreciate the help :+1:

1 Like
9

Hi! How did you do the test suite? I didn’t do it!

10

Good job @cjcon90.

I can see you added more white space. It looks remarkable!

Keep it up!

1 Like
11

Hello @cjcon90 . I’ve created a video with some feedback on your project https://youtu.be/s1N-ybGso_M. hope you like it :slight_smile:

1 Like
12

Oh cool, thank you - that’s a great YouTube series idea, subscribed to your channel!

Was weird seeing my creation up on someone else’s YouTube! Felt like I’d served a meal to Gordon Ramsay and was awaiting feedback :sweat_smile:

Cheers for the inclusions and glad you liked the page :grin:

1 Like
13

No problem at all @cjcon90! This was to support creators and help them grow rather than being an old man screaming at what you’re doing wrong :smiley: