Skip to content
Submitted 13 days ago

Blog preview card

Snigdha Sukun•90
@snigdha-sukun
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?

I am proud that I was able to use custom font in the project

@font-face {
    font-family: 'Figtree';
    src: url("./assets/fonts/Figtree-VariableFont_wght.ttf") format('truetype');
}
What challenges did you encounter, and how did you overcome them?

I encountered some difficulty while writing the CSS code, particularly in accurately positioning the box vertically for the mobile view. I referred to a few CSS tutorial websites for syntax and values, and after some trial and error, I was able to get it right.

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

CSS techniques

Community feedback

  • Natali 👻 Grimm•1,150
    @Grimm-NPosted 12 days ago

    Great job! 🎉 Your hard work is really paying off. Keep it up! 👏

    For easier collaboration, consider making your repository public so others can view and share feedback on your code. It’s a great way to learn together! 🌐👩‍💻👨‍💻

    A few tips:

    1. Centering with Flexbox: To center an element in a container with Flexbox, use:

      container {
    display: flex;
    justify-content: center;  /* Centers horizontally */
    align-items: center;      /* Centers vertically */
}

    2. Use Relative Units Over Pixels: Using em, rem, %, vw, and vh instead of px makes your design more flexible, adapting better to different screen sizes and settings.

    3. Follow the Mockup’s Layout and Sizes: Sticking closely to the mockup helps tackle real design challenges and build strong skills. Practice makes perfect! 💪

    Fantastic progress—keep going! 🚀

    1
  • Renzorr•870
    @RenzorrPosted 13 days ago

    Good job, but here are some changes i would made:

    Good Journey

    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