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

Overview

A component of a QR Code Form

Screenshot

Links

• Solution URL: https://github.com/loryvi/qr-code-component
• Live Site URL: https://loryvi.github.io/qr-code-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• I learned Semantic Html.
• :memo: Note: Flexbox using display: flex;
  • align-items/align-self : flex-start, flex-end, center, baseline, stretch
  • order of an item
  • justify-content : flex-start (default), flex-end, center, space-between, space-around, space-evenly
  • flex-direction : row (default), row-reverse, column, column-reverse
  • flex-wrap : nowrap, wrap, wrap-reverse
  • flex-row : <flex-direction> <flex-wrap>
  • align-content to set how multiple lines are spaced apart from each other. : flex-start, flex-end, center, space-between, space-around, stretch

Continued development

:bulb: Animation for the component

Useful resources

• https://flexboxfroggy.com/ - This helped me for learn flexbox. Easy to visualize and the i love the graphics! Lilypads and frogs are cute!
• https://developer.mozilla.org/

Author

• Website - lory
• Frontend Mentor - @loryvi
• Twitter - @lorycodes