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 my first attempt at using Frontend Mentor and very new to coding with HTML and CSS.
This attempt is very simple, with basic HTML & CSS. An attempt has been made to be semantically correct and to organize the CSS with minimal but pertinent commenting.
- Solution URL: QR Code Component Repository
- Live Site URL: QR Code Component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Inline-block conforms the container to the size of the contents by default.
Nested elements need to have proportionally smaller border radii.
I found it repetitive to create media queries for various different screen sizes. There must be a way to reduce the number of media queries while also making the page consistently proportionate looking as the screen size decreases.
On the plus side I found a list of some common breakpoints that I might be able to use in future templates.
It is important to always reset margin and padding to 0px with a * selector at the top of the CSS stylesheet so that there isn't any unintentional margins and padding.
- Setting up a repository
- Committing to a repository from my local computer using GitHub Desktop
- Using GitHub Pages to make the solution visible as web page publically
- learn mobile first development with media queries that use "min-width" and apply to future development
- understaning flexbox more concretely so I am certain how best to center any given element
- what are the ways to conform the size of the parent element to the size of the children and which to use under which circumstances
- CSS Breakpoints in 2022 - This article has a list of common breakpoints.
- Website - Rohan Kallianpur
- Frontend Mentor - @rohankallianpur