Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview card using HTML and CSS

JessB74 50

@JessB74

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@AlexanderTejedor

Posted

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

@Sadikibenda

Posted

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

@yefreescoding

Posted

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
Discord logo

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