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: Frontend Mentor
- Live Site URL: Vercel
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Media queries are extremely useful to adapt the project to different sizes. This project started with a desktop first approach, of course I struggle more to complete it effectively. But once I developed a mobile-first mentality, the improvement in the workflow was noticiable.
"display: flex" made the project way more responsible than it was before I explored all its potential.
The use of variables to switch between shades of color made it incredibly easy and effecive.
I aim to improve my HTML to make it more inclusive and more readable to other developers.
- A Complete Guide to CSS Grid - Memorizing all CSS commands can be overwhelming, so a little help made me solidify and expand my knowledge about grid and flexbox.
- Github - .ana
- Frontend Mentor - @hellomynameis-ana
I started this project as a single person but I believe that the internet is a community of amazing people sharing what they know. Thanks to several people on each corner of the internet, one comment at a time, we make it possible.