URL Shortening API Landing Page
All of the following information can be found on Frontend Mentor , but is included here for convenience and reference purposes.
📝 Brief
Integrate with the bitly URL shortening API and play with browser storage in this landing page challenge.
Your challenge is to integrate with the bitly API to create shortened URLs and display them like in the designs.
You will need to create a bitly account and get an API key to use the API. Account creation is free, and free accounts have a limit of 1,000 API requests per month.
You have complete control over which packages you use to do things like make HTTP requests or style your project.
Your users should be able to:
- 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
formis submitted if:- The
inputfield is empty
- The
- View the optimal layout for the interface depending on their device’s screen size
- See hover and focus states for all interactive elements on the page
Download the starter code and go through the README.md file. This will provide further details about the project. The style-guide.md file is where you’ll find colors, fonts, etc.
🗃 Assets provided
- JPEG design files for mobile & desktop layouts
- Style guide for fonts, colors, etc.
- Optimized image assets
- README file to help you get started
- HTML file with pre-written content
Click here to download the starter files.
💡 Ideas to test yourself
- Write your styles using a pre-processor, such as Sass , Less or Stylus
- Train your eye for detail by getting your solution as close to the design as you can
- Try estimating the time it will take for you to build the project. Then see if the time taken matches up to your estimate. Project estimations are a skill that is often overlooked but is essential for professional developers
Designs
Desktop
Active States
Mobile
