Frontend Mentor - QR code component solution

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.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Screenshot

My process

• Checkout the LiveStreams on Twitch from 22th and 23th April 2022

Built with

• Semantic HTML5 markup
• CSS custom properties
• Sass

• Mobile-first workflow

What I learned

• basic practice and workflow with HTML and Sass for frontend design
  • derived from Gary Simon's Crash Course
• when to not work with media queries😅
• when to use absolute/relative scales

started design with relative width for QR card,

.card {
    max-width: 85vw;
}

which resulted in increasing card size on increasing screens.

Hence, switched to absolute scale:

.card {
    width: 318px;
}

Continued development

• flexbox/grid -> positioning in CSS
• create good HTML skeleton for easy workflow with CSS
• UX design
  • figma/Adobe XD
• forms (also Django forms)
• Django
• Python
• JavaScript basics

Author

• Twitter - @CoderMatching
• Twitch - Sammeeey
• LinkedIn - Samuel Hartmann

Acknowledgments

Great thanks to all the people who followed my process on Twitch or Twitter - even now in the beginning where I obviously still suck♥🤗