/url-shortening

URL shortening API landing page. Challenge from Frontend Mentor.

Primary LanguageCSS

Frontend Mentor - Pricing component with toggle solution

This is a solution to the URL shortening API landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents✒️

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

Screenshot

Links🔗

My process🧩

Built with🔨

  • Semantic HTML5 markup
  • CSS custom properties
  • SASS
  • Flexbox
  • JavaScript

What I learned📝

  • Use @import rule to import the font that i want to use.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
  • Use SASS variables in a React project. SASS variables need to be imported in each file in which i want to use them.
@import "variables";
  • Use overflow-x property to hide the horizontal scrollbar.
* {
overflow-x: hidden;
}
  • Soon...


Useful resources


    

  • 



Author🙋🏻