Blog - Card Landing Page with HTML and CSS FlexBox

Hi @ToprakPehleeone,

Nice project! Here are a couple of suggestions for improvement:

Reduce Unnecessary <div> Elements: Consider using fewer <div> elements in your project. For example, an <h1> can be used as a flex container if needed. Streamlining your HTML structure can make your code cleaner and more efficient.

Use ARIA Labels: When <div> elements are necessary, consider adding ARIA labels to describe their content. For instance, you could use aria-label="Card info" to provide context for screen readers.

Hope these suggestions help!

Best, Teodor

You can use the clamp() function to ensure text adjusts smoothly across different screen sizes. Like so

h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

Here are a few other things to look at

• It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
• Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
• Use a class instead of an ID for styling to keep specificity low, reserve IDs for JavaScript manipulation.