@MikDra1
Posted
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. -
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 helpful