Tribute maybe? to Monkey D Luffy

I just finished my first freecodecamp project and I would like to get some feedback on it. All criticism is accepted because it will help me become a better coder.

https://codepen.io/SageMike/pen/ZEEVVZo.

1 Like

Oh, man, One Piece :smiling_face_with_three_hearts: Anyway, strictly from a web design perspective, you have two major issues:

  1. You hard-coded too many measurements in CSS, particularly in margin and width properties. What I mean is that in order to get a truly responsive web page that will look good on both desktop and mobile, you should avoid absolute measurements (like for example pixels) whenever you can. Instead, use relative units like percentages (or em, rem, vh, vw, etc.). This way, the elements will shrink and grow with the page, so there won’t be the need to scroll left and right on smaller screens, which isn’t the best user experience.
  2. The font you’ve chosen is really hard to read for bigger chunks of text. The general rule is that for longer content, you should go with a sans-serif font because those are the easiest to read on screen, although it’s not uncommon to see serif here as well (but anything too crazy or ornamental is just overwhelming). Another thing is - don’t use more that two different fonts on a single page. So, my suggestion is this: choose either Norican or Lobster for your <h1> and then the rest of the text on the page should be sans-serif. (By the way, you might use your ‘h1’ font for subheadings too, but I think yours are a bit too long for this to look good.)

Just a tiny disclaimer: I’m not a designer, so don’t take my word on all of this, but try to experiment a little bit and see what makes most sense from a user’s perspective. Maybe look at other websites on the internet and analyze the ones you like.

Hope this helps, and good luck on your journey! :blush:

1 Like

Thank you very much! :smiley: I really appreciate the feedback. Glad seeing some one pece gave you the feels.

1 Like

Hi @SageM-19! Here’s some advice…
“Click Here” is not a good practice for links. Remember to give links meaning by using descriptive text. :wink:
https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text

1 Like

I see that you like to use gradients. The one that you chose for the title really blent in, but the one that has the image inside it… It’s okay, but I would suggest that you make it a simillar color to the page so that it blends in, too.

Add a little padding on the left side of you page so that the text is a little more packed into the center. A good ten percent would be great.

Try smoothing out your corners with the border-radius css command a little.

A font and background color that matches the character more would add a nice touch of detail to your page.

At all else, great job. Keep up the awesome stuff!

1 Like

Really work on the CSS. And careful about the fonts you use, some might slightly break your website.

You could try this free course, it will explain css better than me : https://www.bitdegree.org/course/coding-for-beginners-space-doggos (don’t mind the cartoonish k-9’s)

1 Like

One thing I noticed was the misplace closing body tag. It should be after the footer and just before the html closing tag.

I also think some of the CSS can be smoothed out a bit. There is some styling that can eliminated or there are better more efficient ways of doing it.

As for design: cut down on the amount of text. Large blocks of it are hard to read on screens.

Keep at it.

1 Like

Hi @SageM-19, your page looks good. Just something to revisit;

  • 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.
    • In HTML you have an id that you use more than once.
1 Like