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
This is a solution to the QR code component challenge on Frontend Mentor.
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!.