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

Four-card feature solution on bare CSS flow - No Flex nor Grid

gusfoca 170

@gusfoca

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


So, a few questions arised while working on this challenge:

  1. What should be treated as first-heading (<h1>)? Some solutions made two headings for the first to blocks; is that right? What about accessibility issues?
  2. I had a hard time figuring out the right proportions between fonts, blocks' boxes, margins, etc. in order to match the design previews. Are there ways or tools for that?
  3. Finding a method for the making of the page also posed some problems. What should one do after defining the HTML and basic CSS (fonts, etc.)? What to tackle next? Are there known approaches to that? Just found myself iterating on changing things: markup - margins/padding - sizes - back on markup again...

Community feedback

Martin 1,150

@ringm

Posted

Hi gusfoca, excellent job on completing this challenge! I'll try to answer your questions:

  1. Content-wise, the heading is just one sentence, no matter how it's stlyed. So IMO it should be one heading element.

  2. I think your result is almost exactly as the design preview, if you want a faster/precise way of knowing the exact measures and colors the designer used, you need their original design file, which in this case you can buy on the project details page.

  3. After defining the markup and base styles of the page, I like to start styling the site with a mobile-first approach, that means, defining the stlyes for the smallest screen and when working your way up. I think that's not what you did in this case, and that's probably why your site is breaking in small/medium screens. Open your project on a big screen and shrink the browser window to see what happens. Don't forget about responsiveness!

I know you can improve this one! It's looking great so far. If you could refine the layout in smaller screens I think it will look better still. Happy coding!

1

gusfoca 170

@gusfoca

Posted

@ringm Thanks for the feedback and references!

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