https://github.com/tadeubdev/shortly-frontend-mentor
Shortly Frontend Mentor Project
https://github.com/tadeubdev/shortly-frontend-mentor
challenge css frontend-mentor
Last synced: over 1 year ago
JSON representation
Shortly Frontend Mentor Project
- Host: GitHub
- URL: https://github.com/tadeubdev/shortly-frontend-mentor
- Owner: tadeubdev
- Created: 2021-12-27T17:06:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-10T17:07:22.000Z (over 4 years ago)
- Last Synced: 2025-02-09T11:26:26.942Z (over 1 year ago)
- Topics: challenge, css, frontend-mentor
- Language: CSS
- Homepage: https://tadeubdev.github.io/shortly-frontend-mentor/
- Size: 721 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Shortly URL shortening API Challenge solution
This is a solution to the [Shortly URL shortening API Challenge challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## 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)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Shorten any valid URL
- See a list of their shortened links, even after refreshing the browser
- Copy the shortened link to their clipboard in a single click
- Receive an error message when the `form` is submitted if:
- The `input` field is empty
- Something went wrong trying to short the url
### Screenshot
### Links
- Solution URL: [https://github.com/tadeubdev/shortly-frontend-mentor](https://github.com/tadeubdev/shortly-frontend-mentor)
- Live Site URL: [https://tadeubdev.github.io/shortly-frontend-mentor/](https://tadeubdev.github.io/shortly-frontend-mentor/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JS
## Author
- Website - [Tadeu Barbosa](https://github.com/tadeubdev)
- Frontend Mentor - [@tadeubdev](https://www.frontendmentor.io/profile/tadeubdev)
- Twitter - [@tadeubdev](https://www.twitter.com/tadeubdev)
- Dev.to - [@tadeubdev](https://dev.to/tadeubdev)