@MikDra1
Posted
Well done, here are some things to review 😊:
-
REM for Units: It's best to use
remfor 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__titleor.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
flexorgridcombined 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
widthandheight, opt formax-widthormin-widthto allow the elements to resize smoothly on different screen sizes, improving overall responsiveness.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
