Skip to content
Submitted 3 months ago

Blog - Card Landing Page with HTML and CSS FlexBox

Toprak Pehlivan•140
@ToprakPehleeone
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

  • Teodor Jenkler•3,800
    @TedJenklerPosted 3 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 helpful
    0
    Toprak Pehlivan•140
    @ToprakPehleeonePosted 3 months ago

    Thank you so much for great feedback! I will apply your suggestions on my future projects. @TedJenkler

    1
  • Boris•2,850
    @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 helpful
    0
    Toprak Pehlivan•140
    @ToprakPehleeonePosted 3 months ago

    Thank you so much for feedback! @mkboris

    0

Please log in to post a comment

Log in with GitHub

Join 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