👾 Hello, coding community!
😎 This is my solution to the Single Price Grid Component. I had a lots of fun doing the challenge.
🎨 I added some personal design improvements and also the button to change the card component color.
I'll be happy to hear any feedback and advice!
Hi Lucas,
This is awesome ⭐⭐⭐
I had done this challenge a few months before and struggled greatly during the progress. Instead of making more projects, I felt I should improve the foundation of HTML and CSS by looking at some good examples in Frontend Mentor. Luckily, I came across yours and learnt a lot from it.
Just wondering, how do you practice your HTML and CSS and become so good at it? And do you need to fully commit to HTML and CSS first before learning about JS?
Best, CK from Canada
It was a very difficult challenge, especially to implement the cart functionality. I started learning react six months ago, so please forgive me if I did something not as expected. I welcome any feedback and advice to help me improve my skills.
I appreciate your efforts on making this project :) Mr David, just wonder how much time it took you to finish this project?
Humble opinion: You can make it better ;)
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❤️
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
Feel free to comment on this design. I added another (not requested) layout for tablets because I did not like the single column on medium sized screens. What do you think?
I have two questions:
I tried using gh-pages npm package to deploy the create-react-app via Github Pages but it failed and I used Vercel instead. Has anyone any experiences on how to deploy a react App on Github or some knowledge about any pit falls?
I liked using css grid for this task but is there another way to achieve this layout?
I think using grid is a better and easier approach here, but my first instinct on achieving this layout is to use positioning style attribute.
Firstly, at the desktop view, I set a max-height and max-width for the cards section and the cards themselves, and set the card container to relative position. Then, I position each cards with absolute positioning and translateX / Y, and adjust the position based on preview.
For example, to position the supervisor cards, I set its position value to absolute, follow by top: 50%, which set the top-left corner part of the card to the left centre of the container. Then, to make sure the card is positioned exactly at the centre, I use
transform: translateY(-50%)
to position the card itself up of its own height.
Follow by the same logic, you do the same thing to each of the cards, and you would eventually achieve the same layout.
Best, Chee Kian Teoh
