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

3-column preview card component using Flex Box & Semantic HTML

@aaron-diaz

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


How do you guys find out the dimensions (width and height) of these projects without the design files? I'm really curious. Because I feel like I waste a lot of time on that. On another note, can you tell me what should I do so my component can be properly positioned where it is suposed to be? Thank you very much.

Community feedback

Cian 80

@ciandm

Posted

Hi Aaron,

To help you find the dimensions, you could create a free Figma account or Adobe XD and drag the images in to them that you download, on an artboard that is correctly sized for the images. For example, I believe the images in the challenges for desktop are usually 1440px, which is a standard artboard for designing desktop screens. You can create a 1440px artboard and drag the image that you download onto it and then use the built in rulers to determine sizes. Alternatively, measure distances using the rectangle tool by drawing the distance between components, or the padding on the components, etc.

To position your component properly, it's usually a mix of padding and margin as well as using flexbox (which you seem to be using here). I would tend to not use fixed heights where possible as these can harm responsiveness. On that note, you should look at media queries to style your solution for mobile. As well, you seem to be using general selectors for your CSS styles. I would encourage you to use class names for styling, and maybe even look at the BEM notation for naming your classes. While the general selectors might be okay for this challenge, you will need more control of your styles on larger pages and designs.

0

@aaron-diaz

Posted

@ciandm Thank you very much for your feedback! As you said, the fixed heights were preventing the site from being completely responsive, despite the fact that I was actually using media queries. I fixed the problem by playing with the margins of some elements instead. On another note, I just created a Figma account and began looking into css methodologies. I'm confident solving the following challenges will be even easier for me now that I've taken your advice :)

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