Skip to content

Latest commit

 

History

History
85 lines (63 loc) · 1.89 KB

README.md

File metadata and controls

85 lines (63 loc) · 1.89 KB

Frontend Mentor - QR code component

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

QR Code Component Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Responsive design
  • Mobile-first workflow

What I learned

During this project, I practiced important CSS concepts, especially:

Flexbox for centering:

.conteiner {
    display: flex;
    margin: 0 auto;
    height: 100dvh;
    width: min-content;
}

.card {
    margin: auto auto;
}

Responsive units:

.image {
    width: 80dvw;
    height: 80dvh;
    max-width: 200px;
    max-height: 200px;
}

Box-shadow for depth:

.card {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

This project helped me better understand how to use Flexbox for centering and how to work with responsive units (dvw, dvh) to create layouts that work well on different screen sizes.

Continued development

In future projects, I want to focus on:

  • Improving my understanding of CSS Grid
  • Learning more about web accessibility
  • Practicing CSS animations
  • Exploring CSS frameworks like Tailwind

Author