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.
Oh, man, One Piece Anyway, strictly from a web design perspective, you have two major issues:
- You hard-coded too many measurements in CSS, particularly in
margin
andwidth
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. - 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
orLobster
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!
Thank you very much! I really appreciate the feedback. Glad seeing some one pece gave you the feels.
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.
https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text
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!
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)
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.
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.
- In HTML you have an