This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This is the my first QR Code Challenge on Frontend Mentor, Desktop and Mobile Version (width: 375px;)
This project was not difficult, but rather fun to make. I tried to keep my code as simple and clean as possible. I used div container for the actual card, and some flex box to position the elements in a column. To attribute the design and challenge to Frontend Mentor I put this section in a html semantic footer. Once I was done, pushed the folder to online GitHub respository, see the Solution URL [GitHub] and posted a live version of the Netlify.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Figma
For the mobile version I saw no need to use media queries.
I did check for optimization by running Lighthouse and got 100's for the Performance, Accessibility, Best Practices and I received a 91 for SEO.
This was my first time using Figma. I enjoyed using this tool very much. I loved that it gave specific details to the padding, margins, font-color and specific sizes of the card and the QR image. Very nice!
I look forward to future projects where I will be implementing animations as well a using CSS Grid. I had fun using Flexbox.
I look forward to implementing projects that involve using Javascript, the DOM, Figma.
In the learning path there is a great resource for using git to upload to the GitHub respository. Thank you for that awesome resource, very exciting stuff!
- Website - Coming Soon!
- Frontend Mentor - @thegrindnet
Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.
To several people that I consider my mentors:
- Jonas Schmedtmann
- Jose Portilla
- Clyde Matthew Thank you for sharing your knowledge and making it exciting.
My Beautiful Family: Lorena, Johanna and Ezra, thank you for supporting me in my journey.