https://github.com/dedo-dev/qr-code-component
First challenge on Frontend Mentor Learning Path
https://github.com/dedo-dev/qr-code-component
css-variables css3 flexbox html5 logical-properties
Last synced: about 1 year ago
JSON representation
First challenge on Frontend Mentor Learning Path
- Host: GitHub
- URL: https://github.com/dedo-dev/qr-code-component
- Owner: dedo-dev
- Created: 2024-06-23T18:14:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-14T18:24:45.000Z (almost 2 years ago)
- Last Synced: 2024-07-15T00:41:18.187Z (almost 2 years ago)
- Topics: css-variables, css3, flexbox, html5, logical-properties
- Language: CSS
- Homepage: https://dz-qr-code-component.vercel.app/
- Size: 146 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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)
- [Author](#author)
## Overview
### Screenshot
### Links
- Solution URL: (https://www.frontendmentor.io/solutions/qr-code-component-uGr2VDqteK)
- Live Site URL: (https://dz-qr-code-component.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Logical properties
### What I learned
With this challenge I refresh my knowledge with:
- CSS Custom Properties how to use and naming them;
- Flexbox;
- how to use element;
- how to use @import to import the font from Google Fonts;
- work with modern CSS Logical Properties and Relative Units;
- Fluid Typography.
```css
.card {
display: flex;
flex-direction: column;
max-width: 20rem;
margin-inline: auto;
background: var(--clr-cardBG);
padding: 1em;
border-radius: 20px;
text-align: center;
}
```
### Continued development
For the future projects I want to continue focusing on CSS Grid, Container Queries, JavaScript and HTML/CSS in general to become more confident with my knowledge
## Author
- Frontend Mentor - [@dedo-dev](https://www.frontendmentor.io/profile/dedo-dev)
- Linkedin - [@daniele-zeppieri](https://www.linkedin.com/in/daniele-zeppieri-0b1a36252/)