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 Flex component using HTML and CSS

#accessibility

@Heph-zibah

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


if I can use flexbox, why do I need to use grid?

What makes grid different from flexbox anyway?

Community feedback

Kingsley Agu• 285

@didyouseekyng

Posted

Good morning Tee, I see you have some accessibility issues here, so to help you with that:

  1. You need to include an h1 tag in your html file.

  2. I think you also need to change the attribution div tag to a footer tag. This would also help.

And then to finally answer your question about the difference between flexbox and grid in the way I've come to understand it:

  • Flexbox can be used for layouts that are one-dimensional, if I'm dealing with a layout that has one row and column, what's the essence of grid? while Grid can be used on layouts that seem two-dimensional, a situation where in a layout you have things stacking on top of each other. I hope this helps, we could talk more about it if there's anything. Overall, It's nice to see you've completed this challenge. Kudos!!

Marked as helpful

0

@Heph-zibah

Posted

@didyouseekyng

You see this accessibilty issue ehn, I don't know again.

I will make sure to implement all you have suggested.

And yes, thank you for giving answers to my question. I am currently working on a challenge that requires i use grid and there's no way i will shy away from it. You can be on the lookout for it.

Thank you so much for taking time out to review the code.

0
Paul Obidike• 0

@mobicodez

Posted

@didyouseekyng Hello kingsley, if the layout is stacking on top of each other is this were we use Z-index?

God job @Heph-zibah baby steps counts

1
Kingsley Agu• 285

@didyouseekyng

Posted

@mobicodez Hey bro, How are you doing? regarding your question, you don't just use the z-index on every element unless it's really needed for the design. I've used the z-index before and what it does is:

  • It makes an element appear like it's in front or even behind another element. It's great for creating some nice effects on your page, but not necessary for the layout itself.

NOTE:

  • The z-index property is used only on positioned values like the absolute, fixed and relative.
  • The element with the higher z-index goes to the front of the element with a lower z-index.
0
Paul Obidike• 0

@mobicodez

Posted

@didyouseekyng Thanks boss. noted

by the way my solution for this project sucks.

  1. Media queries - X
  2. Proper use of grid & flex - X
  3. coding structure - X
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