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.
First i got style declarations into the html-document by using :root-Variables for the colors. Defining Font via embed Google Font Outline in Head and defining body-tag for font-family and classes for regular and bold.
After then i building the structure of the body: div with id "container" to catch Image, H1 and Paragraph Embedding QR-Code-Image with img-tag Writing H1 Writing p Styling container with white background, aligning with flexbox.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I'm working a lot with wordpress and Enfold-Theme. So it is useful to see, that development from scratch not as easy as it often looks, when i only read code on instagram. I thankful for the beginning of this journey to become a real developer.
Flexbox is always a riddle. More practice there will be useful for the future. Media Queries are always the same.
- Flexbox Guide - This helped me to unterstand how i can display various containers on the website
- W3 schools - Always a good resource to understand html and css :-)
- Frontend Mentor - @staedti