Design comparison
Solution retrospective
help me know how to deploy my project online
Community feedback
- @MikDra1Posted about 2 months ago
Well done, here are some things to review 😊:
-
REM for Units: It's best to use
rem
for all units instead ofpx
, as this ensures scalability and consistency in spacing and font sizes based on the user's root font size. It helps improve accessibility. -
Semantic HTML: Consider ensuring all elements are wrapped in semantic HTML tags like
<main>
,<section>
, and<article>
to enhance the structure and SEO-friendliness of the page. -
CSS Variables: Implement CSS variables (
--primary-color
,--font-size
, etc.) for consistent values across the stylesheet. This will allow for easier theme management and tweaking. -
BEM/Convention for Class Naming: Apply a class naming convention like BEM (Block Element Modifier) to make the styles modular and more maintainable. For example, use
.card__title
or.card--highlighted
. -
CSS Reset: Consider adding a full modern CSS reset (like normalize.css or custom resets at the beginning of the stylesheet) to ensure consistent styling across different browsers. Here is a link to one I really like.
-
Clamp() for Responsiveness: Use the
clamp()
function for fluid typography and spacing, allowing elements to resize smoothly between a minimum and maximum value based on the viewport size (e.g.,font-size: clamp(1rem, 2vw, 1.5rem)
). -
Responsive Card: To make the card responsive, ensure the layout uses
flex
orgrid
combined with max-width instead of fixed width values. This will make the design more flexible and adapt better to different screen sizes. -
Use max-width/min-width and max-height/min-height: Instead of using fixed
width
andheight
, opt formax-width
ormin-width
to allow the elements to resize smoothly on different screen sizes, improving overall responsiveness.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0 -
- @StroudyPosted about 2 months ago
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…
-
Using a
<main>
tag inside the<body>
of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
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 -
Developers should avoid using pixels (
px
) because they are a fixed size and don't scale well on different devices. Instead, userem
orem
, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter. -
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.
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 helpful0@SunilBaghel002Posted about 2 months ago@Stroudy thank you for everything it is very helpful for my future projects
1@StroudyPosted about 1 month agoHey @SunilBaghel002, I will be on the lookout for your other projects I'm glad you found this information useful, Let's go 💪
0 -
- @SvitlanaSuslenkovaPosted about 2 months ago
Hi, good job. You don't need divs for every <p> or <h> elements. They are already block elements. h1 {display: block; add here width, margins and so on}
0@SunilBaghel002Posted about 2 months agoThank you and I remember next time@SvitlanaSuslenkova
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