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

Responsive Four Card Feature Section Using Flexbox And Media Queries

@lindajensen

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


What are you most proud of, and what would you do differently next time?

I'm just super proud that I figured it out. When I saw the design I was like no way I'm solving this one. I have no idea where to even start (with the desktop version that is). I mean I don't know how to position things like that. But I decided to start with the mobile version and just see how far I could get. And I think I did good.

My biggest mistake was almost finishing it, and then leaving it for a few days so when I came to finish it now I was really lost.

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

The biggest challenge was the desktop version. The mobile version was fine. I didn't know how to make the colored top-border but that was easily googled. Positioning the boxes however was something else. My first instinct was to use CSS Grid, but I just couldn't figure it out. So then I tried Flexbox and when I found the property align-self the whole thing just worked itself out so that was nice.

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

I don't know. I guess I'd like to know if the challenge could have (should have?) been solved with CSS Grid? If that was doable then I'd also like to know how.

I'd also like to know what this means: "All page content should be contained by landmarks". I keep getting this as an error in my Accessibility Report and when I looked it up far as I could tell landmarks are elements that help with the structure and semantics of a page (like header, main, article, section etc.). But when I add those to try and fix the errors it doesn't change anything. So does anyone know what I'm missing?

Community feedback

Darkstar 1,000

@DarkstarXDD

Posted

  • For this project you only need one landmark element and that's the <main>. You can change your <div.outer-container> to be <main.outer-container>. Check this reference.
  • Yes, this would have been a perfect challenge to be done using the grid layout. Would have been much easier too. But nothing wrong with using flexbox either.
  • I see you have created the title as two separate headings, using a <h1> and <h2>. But it is just one single heading with just two separate styles applied for two separate lines. This is very important because currently when a screen reader user browsers this page, the screen reader will read that one heading as two separate headings, which can be confusing. What you can do is use a single <h1> and then inside that use a <span> tag to select second line of the heading and style it differently.
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