This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See hover states for interactive elements
- Solution URL: https://www.frontendmentor.io/solutions/responsive-order-summary-component-using-bem-O9kCAfvuff
- Live Site URL: https://order-summary.matiaslagoevia.com
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
- BEM
Mobile vs Desktop Repeating Background Image Learning about repeat-x, manually finding where the background would break, and then using a media query to seamlessly switch to the desktop version of the background pattern.
Background Image and Color combination At first I thought this was a SVG pattern or something for the background, but then realized that it was possible to combine the pattern image with a color in a creative and pleasing way.
Mobile-First Workflow Really helped to avoid unnecessarily complicating the CSS and layout. Almost no adjustments were necessary to accommodate for a responsive design this way.
BEM structure diagram before implementing solution Similar to the mobile-first workflow, this helped to have a clear idea of how I'd implement the solution before actually doing so. This helped to work with a purpose and arrive at a cleaner, faster solution.
HTML and CSS learning paths I want to continue expanding my fundamentals as I work on the challenges. I've found a good balance for now of reading about chapters, applying the examples within the reference material, and then solidifying it through Frontend Mentor challenges like this one.
BEM I want to continue developing my intuition and experience with BEM. I've found it to be an incredibly useful mental model and I look forward to continue to use and learn from it!
Implement actual plan selection/form logic This will come with later challenges, though it's something I look forward to. It would be interesting to implement the actual logic and behavior for a system like this, not just the appearance/styles. Still, happy with how this version turned out!
- MDN background image/repeat ->
background-imageproperty MDN reference. - HTML and CSS learning paths -> supporting materials to continue to learn more about HTML/CSS fundamentals.
- BEM website -> BEM's official reference/docs.
- BEM video tutorial -> ByteGrad's video on BEM, it's motivation, and some examples.
- BEM breakdown discord help thread -> Grace's review and thoughts on my BEM diagram breakdown of the problem.
- Website - https://matiaslagoevia.com
- Frontend Mentor - @matiaslagoevia
Thank you @gracesnow for your review and advice on my BEM diagram breakdown of the problem! It was incredibly helpful and included good advice for me to continue growing in the future.