A repository containing code snippets and web development practice studies! The main focus is to exercise CSS, building UI components and hone my skills with Vue.js!

Main technologies used: Vue.js shadcd/ui Tailwind Vanilla CSS HTML

• QR-Code Card

This is a solution to the QR code component challenge on Frontend Mentor.

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

Final version!

• Solution URL: Github repository
• Live Site URL: Deployed app URL

• HTML5
• CSS
• Flexbox basics
• Grid basics

This project was great for starting to get hands-on experience with the essentials of CSS. It was very useful for getting a better understanding of flex and grid containers, their properties and their child's properties (especially getting a better grasp of grid-template-rows/columns property). It was also great for experimenting with auto and % units for component spacing!

Below are some highlighted code snippets from the main CSS class:

* {
    min-width: 0;
}

#qr-code-data{
    display: grid;
    grid-template-rows: max-content min-content min-content;

    align-self: center;

    background-color: var(--white);
    padding: 14px;
    margin-inline: 10px;
    border-radius: 5%;
    max-width: 270px;
    min-height: 450px;
}

• MDN Docs - Sizing items - Great visual examples of different components needing different treatments for reaching a final goal.
• CSS Tricks - Flexbox guide - Godly flexbox demonstrations.
• CSS Tricks - Grid guide - Godly grid demonstrations.
• CSS Tricks - Flex property - Shows many flex uses for the property and some nice practical examples.
• Kevin powell - A practical guide to responsive web design - Great visual examples and practical guidelines for better responsive layouts!.

• Website - amorabot
• Frontend Mentor - @amorabot