Blog - Card Landing Page with HTML and CSS FlexBox
Design comparison
Solution retrospective
Doing research to find a solution for responsive text-sizing was challenging but fun. I have learned the 'calc()' function on CSS. Tried different inputs to find the best version that suited my project. Before i have used 'px' values to arrange font-sizes. From now on i will try to use 'rem' and 'em' properities because they are much better for adaptive and responsive code.
What challenges did you encounter, and how did you overcome them?Aligning a small image with a tag was a bit challenging first. I have tried to use 'text-align' and 'vertical-align' properities on CSS but it didn't work. Finally i have decided to use 'display: flex' and find the solution.
What specific areas of your project would you like help with?Doing research to find a solution for responsive text-sizing was challenging but fun. I am sure there is a better and cleaner way to optimize that. I am open to ideas and suggestions!
Any feedback will be appreciated.
Community feedback
- @TedJenklerPosted 2 months ago
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
Marked as helpful0@ToprakPehleeonePosted 2 months agoThank you so much for great feedback! I will apply your suggestions on my future projects. @TedJenkler
1 - @mkborisPosted 3 months ago
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.
Marked as helpful0 - It's best practice linking Google fonts directly in the HTML
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