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

Three Column Preview Card

@kalkslucas

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey! Could you give me your feedback please? I did this project some time ago, but only now am I uploading it to the platform and I am resuming my studies on Web tools.

Community feedback

@williamboehringer

Posted

Hi Lucas, Greetings from another Brazilian!

Looking briefly at your code, I could notice some points that may help you improve considerably in this challenge and in many others.

The first thing I noticed is that you've used the flexbox. It's a personal choice rather to use flex or grid, but I will give my sincerely opinion. It's way easier in this case to use grid, you would certainly write less code and get the same result, i suggest you take a look at it, search some videos on youtube about grid and how to use it. In this case you would divide your div "conteudo" in 3 parts, and use the property "place-items: center", instead of position absolute to center the whole thing.

Another advice would be to use height and width instead of padding to give the size you want to your columns. Sometimes use padding is good, but in cases like this is definetily not a good option, specially using fixed values. The fixed values will be annoying to deal with when you start making things responsive.

For now, I think that this advices should give you some things to work and some tools to. Hope I've helped, keep on going and good coding :)

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