Frontend Mentor - Order summary card solution 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.
Table of contents Overview The challenge Links Built with What I learned Continued development Useful resources Author Acknowledgments
Overview The challenge Users should be able to:
See hover states for interactive elements Screenshot
Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
Links Solution URL: Live Site URL:
Built with Semantic HTML5 markup CSS custom properties Flexbox CSS Grid Mobile-first workflow
What I learned Used landmarks, which hopefully won't return any annpoying errors this time. Used more accessible coding (aria!) Did not use a library and just pure HTML and CSS. Continued learning the dark art of centering things (will I ever master it?). I did, in fact, code this for mobile view first. I am no longer a mongoloid with a big screen fancy.
Continued development Definitely getting the hang of having a process. I haven't refactored my code yet, but will soon. Let's get this puppy on the internet first!
Useful resources https://dev.to/venkyakshaya/the-ultimate-guide-to-center-align-css-2h9l - An awesome resource for centering.
Author Website - Elizabeth Sønnichsen Frontend Mentor - @Azulio123 Dev.to - https://dev.to/lavenderliz
Acknowledgments Dev.to was pretty helpful. My husband cheered me on. I didn't need a tonne of help this time. Also, the feedback from frontend mentor has really been awesome.