Qr-Code-Component

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #rust #docker #macos #java #windows #awesome #vue #awesome-list #openai #ios

Qr-Code-Component

(★ 11)

A responsive QR code card built with HTML and CSS. This clean, modern design features a QR code that links to Frontend Mentor challenge, helping developers improve their front-end skills.

Qr-Code-Component Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Frontend Mentor - QR code component solution

This is a solution to the [QR code component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H). Frontend Mentor challenges help you improve your coding skills by building realistic projects

![](https://raw.githubusercontent.com/Ayokanmi-Adejola/Qr-Code-Component/main/preview.jpg)

## My process

### Built with

- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Google Fonts

### What I learned

This project helped me practice creating a responsive component using flexbox. I focused on creating clean, semantic HTML and well-organized CSS.

Some key aspects I'm proud of:

```html
<main>
  <div class="card">
    <img src="./images/image-qr-code.png" alt="QR code to frontendmentor.io">
    <div class="card-content">
      <h2>Improve your front-end skills by building projects</h2>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>
</main>
```

```css
body {
  font-family: 'Outfit', sans-serif;
  background-color: hsl(212, 45%, 89%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}
```

### Continued development

In future projects, I'd like to focus more on:

- Implementing more advanced CSS techniques
- Improving accessibility features
- Learning CSS Grid for more complex layouts
- Exploring CSS animations for interactive elements

### Useful resources

- [MDN Web Docs](https://developer.mozilla.org/en-US/) - Comprehensive reference for HTML and CSS.
- [CSS-Tricks Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - This helped me understand flexbox layout concepts.
- [Google Fonts](https://fonts.google.com/) - For finding and implementing web fonts.

Qr-Code-Component

Qr-Code-Component Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Qr-Code-Component

Qr-Code-Component Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README