https://github.com/smart-ace-designs/astro-qrcode-component

A solution to the "QR Code Component" challenge on Frontend Mentor using Astro and Tailwind CSS.
https://github.com/smart-ace-designs/astro-qrcode-component

astro frontendmentor-challenge

Last synced: about 1 month ago
JSON representation

A solution to the "QR Code Component" challenge on Frontend Mentor using Astro and Tailwind CSS.

• Host: GitHub
• URL: https://github.com/smart-ace-designs/astro-qrcode-component
• Owner: Smart-Ace-Designs
• License: mit
• Created: 2024-06-22T19:16:52.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-10-17T03:24:56.000Z (2 months ago)
• Last Synced: 2024-10-19T05:40:34.427Z (2 months ago)
• Topics: astro, frontendmentor-challenge
• Language: Astro
• Homepage: https://smartacedesigns-astro-qrcode-comp.netlify.app/
• Size: 776 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

## Table of contents

- [Overview](#overview)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### Screenshot

![qrcode-component](https://github.com/Smart-Ace-Designs/Astro-QRCode-Component/assets/132539186/7c3bb672-0c85-4469-98ca-9611759b22a8)

### Links

- Solution URL: [GitHub](https://github.com/Smart-Ace-Designs/Astro-QRCode-Component)

- Live Site URL: [Netlify](https://smartacedesigns-astro-qrcode-comp.netlify.app/)

## My process

### Built with

- Astro

- Astro [Major Tom](https://github.com/Smart-Ace-Designs/Astro-Major-Tom) Template

- Tailwind CSS

- Flexbox

- Bun

### What I learned

- How to center items both vertically and horizontally.

- How to add custom colors to Tailwind CSS by adding it to the `extend` object in the "tailwind.config.mjs" file.

- How to add a custom font family to Tailwind CSS by creating custom style sheet file to import the font and then by adding it to the `extend` object in the "tailwind.config.mjs" file.

- Bun

- Astro components

- Astro `` and dynamic image importing

### Continued development

During this build I did not use the provided Figma document as I currently do not have a Figma account. Learning and using Figma in the future might help better match the spacing and dimensions of the solution to the design specification.

### Useful resources

- [Mr Coder (Frontend Mentor Challenges)](https://www.youtube.com/watch?v=5BBYPntB-GY) - This helped me with my mental roadblock of centering the card and organizing the `
` structure.

- [Net Ninja (Tailwind CSS Tutorial)](https://www.youtube.com/watch?v=6UVQlB1eo5A&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw&index=5) - This helped me configure Tailwind CSS with custom colors and fonts.


## Author

- Website - [Smart Ace Designs (GitHub)](https://github.com/Smart-Ace-Designs)

- Frontend Mentor - [@smart-ace-designs](https://www.frontendmentor.io/profile/Smart-Ace-Designs)

## Acknowledgments

- [Net Ninja](https://www.youtube.com/@NetNinja)

- [Mr. Coder](https://www.youtube.com/@MrCoderYt)