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

I used positions

@sebamarques

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 think i'm proud to do it relatively quickly, (faster doesn't mean better, but i wanted to test myself and how much time takes me to do the design), and the thing i would do different is using less positions and using more flex or grid, whichever makes a good design with less lines in my CSS.

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

As i said, the positions of the elements, when i did the card i noticed that there was a lot of white space between the elements, i tried changing widths, heights, etc but neither of that changed how the card was looking, so i used a lot of position(i don't know if it's bad, but i used in every tag) to solve that problem, i think using flex or grid you can make a cleaner code but right know i don't know how to do it.

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

With positions, i would love to change how i did the code in CSS, i want to change it to flex so it looks cleaner when you open the CSS, i used a lot of positions so that's why i want a change or get help on how to do it using a modern tool as flex.

Community feedback

@IuliusCaesarGR

Posted

Good Job, You should change in .informative-card{ top: 50%; } and add transform: translate(0%, -50%); for center the card. [Source] (https://www.cssportal.com/css-properties/transform.php).

1

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