Skip to content
Submitted 5 months ago

Blog Preview card using HTML and CSS

JessB74•50
@JessB74
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 of being able to write the whole code by myself for the first time. I will take time to research more about things I'm not familiar with before beginning the project next time.

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

There were properties I didn't know and it was my first time inserting a SVG file. I came across hsl for the first time as well. I googled and used MDN docs and W3 schools to find answers to things I didn't know. I also had a bit of trouble centering the box and making it responsive. I believe my main focus was my solution to look identical to the result however there's room for improvement so I'm ready to try more projects.

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

I need help with CSS positioning or putting a div in the exact position I want it to be. I would also appreciate any feedback as well. As a self-taught individual aspiring to be a web developer, I can use all the resources and feedback I can get to help me do better.

Community feedback

  • Alexander Romero•180
    @AlexanderTejedorPosted 5 months ago

    Hello! 👋

    I always use this website https://developer.mozilla.org/es/, called MDN, it's official and updated documentation that can help you study and understand more about the world of web design and development. Another thing you can work on is Figma, since this challenge allows you to view the Figma file, this file already gives you all the graphic styles, fonts, borders, shadows, etc.

    I hope this helps you, and good luck with your upcoming challenges 👏.

    Marked as helpful
    1
  • Sadiki Benda•180
    @SadikibendaPosted 5 months ago

    Well done Jess Nice work for real, I read that you need help positioning a div, here are some resource you look. Flex box in css trick, position relative vs absolute in w3school. This will be a starting point on how to position your div.

    I hope this will be helpful

    Marked as helpful
    1
  • Yefree Valdez•840
    @yefreescodingPosted 5 months ago

    Great job on this component.

    It seems that you have a problem with the position of your <div id="main-box">. I fixed it by adding the following style to the body element: min-height: 100dvh;. This will ensure that your body has a height equal to 100% of the viewport, which is super useful.

    Try it and let me know how it goes 😉. Good luck with your future projects!

    Marked as helpful
    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