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

2nd challenge for front end developers.

Screenshot

and

Links

• Solution URL: [https://github.com/colognia/order-summary-component-main.git]
• Live Site URL: [https://colognia.github.io/order-summary-component-main/]

My process

• build html
• create css
• check and verify frequently with Firefox and its developer console
• consulting my own notes regarding usage of tags/options, consulting developers.mozilla.org and w3schools

Built with

• Semantic HTML5 markup
• CSS custom properties
• editor: visual studio code

What I learned

Learned more about aligning and absolute/relative positioning. You can not set this transparent background image as an css-background image for the body, because then you can not position it on top of page.

Continued development

Learn more about positioning, especially centering within different elements (grid, flex, block...).

Useful resources

freecodecamp.com https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

Author

• Frontend Mentor - [@colognia] (https://www.frontendmentor.io/profile/colognia)
• Linkedin - (https://www.linkedin.com/in/frauke-s-395242201/)