Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kennedy-was-taken/qrcode

css html mobile-first-workflow

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/kennedy-was-taken/qrcode
Owner: Kennedy-was-taken
Created: 2024-01-19T23:03:41.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2024-01-26T13:02:10.000Z (12 months ago)
Last Synced: 2024-01-26T14:25:35.684Z (12 months ago)
Topics: css, html, mobile-first-workflow
Language: TypeScript
Homepage: https://qr-code-eight-mu.vercel.app
Size: 689 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Frontend Mentor - QR code component

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

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

  - [Author](#author)

## Overview

### The challenge

Users should be able to:

- View the optimal layout for the page depending on their device's screen size

- See hover states for all interactive elements on the page

### Screenshot

  

   ![Full screen](./src/assets/images/screenShots/fullScreen.png)

  

    

### Links

- Solution URL: [GitHub code solution URL](https://kennedy-was-taken.github.io/qrCode/)

- Live site Url : [Vercel QR code app](qr-code-eight-mu.vercel.app)

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Mobile-first workflow

- @media

- Angular

### What I learned

- Throughout the development of this project, I gained valuable insights into using @media queries to provide screen support for various devices. Specifically, I set breakpoints at 374px for mobile devices and 1440px for desktop devices. However, when attempting to deploy the project on GitHub Pages, I encountered several failures.

- After some consideration, I opted to switch platforms and decided to try Vercel. The experience with Vercel was seamless from start to finish. I began by setting up an account, installing the Vercel Command Line Interface (CLI), and configuring my Angular app for deployment. The deployment process involved running the 'vercel' command in the same directory as the Angular project in the terminal.

- It's worth noting that, despite the availability of a graphical interface, my preferred method for deploying the app in a production environment remains using the Vercel CLI for its efficiency and control.

## Author

- Github Profile: [Kennedy-was-taken](https://github.com/Kennedy-was-taken)

- Frontend Mentor : [@Kennedy-was-taken](https://www.frontendmentor.io/profile/Kennedy-was-taken)