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

single-price-grid-component-master

@Abdelrahman0Khaled

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


i have problem with media quire ..how can i understand it ? how can i make this project with best practice ? I am still learning ..i took this challenge to apply what I learned, not as a challenge all feedback is welcome❤️

Community feedback

@teoh4770

Posted

Hi Khaled,

In this case, I would start from the mobile design first, design the card from top to bottom. Then I would use media query to produce the grid layout.

Mobile Design -> Desktop Design, this way you would saving yourself tons of time to media query stuff.

To understand the media query, I would suggest one of the video of Kevin Powell (CSS guru for real) on Youtube called Responsive Design Made Easy, a 45 minutes video you can follow to see how he reproduce a web design from the ground up, from HTML to set the structure, to CSS to set the color and spacing, to eventually media query for complexity.

this is the link : Responsive Design Made Easy

I gain a lot of insight from it, which helps me restructure my thinking to approach the frontend mentor challenge.

Sincerely,

Chee Kian Teoh

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