Design comparison
Solution retrospective
I can adjust most of the things more precisely.
What challenges did you encounter, and how did you overcome them?How to adjust the paragraph, list, indent and character-spacing when use media-query
What specific areas of your project would you like help with?overall and list styles, marker, pseudo selectors
Community feedback
- @StroudyPosted 2 months ago
Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…
-
For future project, You could downloading and host your own fonts using
@font-face
improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts -
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
-
Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like
1.5
for flexibility. Avoid using fixed units likepx
or%
, as they don't adapt well to changes in font size or layout. -
Using
rem
orem
units in@media
queries is better thanpx
because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences. -
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>
description tag missing that helps search engine determine what the page is about, Something like this<meta name="description" content="description goes here" />
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful1@WhitezerDPosted 2 months ago@Stroudy Thx a lot.. Really appreciated for your time to help me and many people with these much details. I hope you have a great journey on this path too.
1@StroudyPosted 2 months agoHey @WhitezerD, Lets go, I encourage you to do some code reviews to, We can learn a lot from seeing other peoples solution. It is apart of the learning journey. Lets go 💪
0 -
- Account deleted
It looks great! I just think you forgot to change the color of some texts to brown, but it’s certainly very good work!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord