Skip to content
Submitted over 4 years ago

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

gusfoca•170
@gusfoca
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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
    @ringmPosted over 4 years ago

    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
    @gusfocaPosted over 4 years ago

    @ringm Thanks for the feedback and references!

    0

Please log in to post a comment

Log in with GitHub

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