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.
- Solution URL: https://github.com/Davincecodeking/QrCodeChallenge.git
- Live Site URL: https://qr-code-challenge-rouge-eight.vercel.app/qrCardDeskView
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Angular.js - Angular framework
One major learning core for me is learning how to work with external fonts e.g. Google fonts To see how you can add code snippets, see below:
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet"> {
box-sizing: border-box;
font-family: "Outfit", "Helvetica", "sans-serif";
}Areas I will like to focus more in future projects includes the followings:
CSS Grid: Deepen understanding of CSS Grid for creating complex, responsive layouts. Experiment with grid template areas, implicit and explicit grid tracks, and responsive design patterns.
Flexbox: Refine skills with Flexbox, focusing on alignment, distribution, and responsive layouts. Practice handling edge cases and nested flex containers.
Master the use of media queries to create layouts that adapt to different screen sizes and orientations.
- Google - This helped me to quickly research a style or things I'm not clear with. I really liked this pattern and will use it going forward.
- Joshwcomeau - This is an amazing article which helped me understand pixel-perfection ideology. I'd recommend it to anyone still learning this concept.
- Chatgpt - This helped me to quickly research on how to add a new font to your project using google font.
- StackOverflow - This helped my debugging process.
- Website - Vincent Ogunkorode
- Frontend Mentor - @Davincecodeking
- Twitter - @davincedesign