Skip to content
Submitted 2 months ago

blog-preview-card-main

aditya-alshi•60
@aditya-alshi
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?

Body Styling

  • Applied display: flex on the <body> element to center the main blog container using justify-content: center and align-items: center.
  • Set the fonts directly in the body element for consistency.

Main Container

  • Used the <main> element as the main container.
  • Applied display: flex with a column direction.
  • Managed spacing using margin and padding.

SVG and Graphics

  • Used semantic <figure> and <figcaption> elements for the SVG.

Text Elements

  • Used the <mark> element to highlight the "Learning" text for semantic clarity.
  • Applied <p> and <time> elements for the publication date section: "Published on..."
  • Chose an <h2> element for the blog post title: "HTML & CSS Foundations."

Content Description

  • Considered the <summary> element for the short information section but found conflicting usage guidance in MDN Web Docs.
  • Decided to use a <p> element instead for simplicity and clarity.

Profile Picture and Text

  • Used a <figure> element for the profile image.
  • Will explore ways to align the text and image in a single line.

Typography

  • Used the clamp() function for font sizing to ensure responsive and scalable typography.

Since this project specifically avoided media queries, I plan to focus on learning and implementing them in upcoming projects.

What challenges did you encounter, and how did you overcome them?

Making the font responsive was challenging for me

{
    /*Rest of the styling*/
    font-size: clamp(1.4rem, 2vw, 1.8rem);
}

Used clamp function to overcome it.

Teodor Jenkler - @TedJenkler provided valuable feedback and suggestions.

What specific areas of your project would you like help with?

I need help with

  • I would appreciate feedback for the approach I took on this project.
  • The font appears unusual at the Mobile-L 425px dimension but looks fine at 320px and resolutions above 425px.
  • Created branches for separate projects and left the main branch empty. Is that a good practice?

Community feedback

  • sutan1817•20
    @sutan1817Posted about 2 months ago

    i think you didnt need to use time tag for writing time

    0
  • safaamohamed188•30
    @safaamohamed188Posted 2 months ago

    Fantastic

    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