Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
2
Comments
2

incmoga

@incmoga40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Blog preview card solution using semantic HTML and CSS-flexbox


    incmoga•40
    Submitted 20 days ago

    1 comment
  • Responsive QR code page using semantic HTML and CSS -flexbox


    incmoga•40
    Submitted 24 days ago

    1 comment

Latest comments

  • Madan003•30
    @Madan003
    Submitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    I'm feeling better now as compared to my first challenge.

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

    Challenges i faced in knowing about the font size, border-radius, width, height at finally knew it from figma design.

    Blog preview card

    1
    incmoga•40
    @incmoga
    Posted 20 days ago

    GOOD Job! your code is functional and clean but here are a few recommendations to make it more professional and maintainable:

    1. Use Semantic Tags: Replace generic div elements with semantic tags where appropriate. For example use <time> for the publication date.

    <time class="card__date">Published 21 Dec 2023</time>
    

    2.BEM Naming: use BEM (Block-Element-Modifier) methodology for class naming to improve purity and understandable code, example:

    <article class="card">
      <img class="card__image" src="..." alt="...">
      <div class="card__tag">Learning</div>
      <time class="card__date" datetime="2023-12-21">Published 21 Dec 2023</time>
      <h2 class="card__title">HTML & CSS foundations</h2>
      <p class="card__description">...</p>
      <div class="card__author">
        <img class="card__avatar" src="..." alt="...">
        <span class="card__author-name">Greg Hooper</span>
      </div>
    </article>
    

    3. Mobile Responsiveness: Add media queries for mobile devices (max-width: 375px).

    @media (max-width: 375px) {
      .container {
        width: 327px;
        height: auto;
        padding: 20px;
      }
      .card__tag, .card__date { font-size: 12px; }
      .card__title { font-size: 20px; }
      .card__description { font-size: 14px; }
    }
    

    4. In Author Section, use flexbox instead of float: Use Modern CSS layout standards: Flexbox/Grid.

    .card__author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
    

    With these improvements, the code will be more robust and professional.

    The main thing to remember is that you are amazing!

    Marked as helpful
  • P
    Heran-Girma•20
    @Heran-Girma
    Submitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    nj,n

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

    ,jnk,n

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

    jb,jb

    css

    3
    incmoga•40
    @incmoga
    Posted 23 days ago

    Great job! but everything needs to be changed from html to css, good luck!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub