Thanks for checking out this front-end coding challenge. To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.
Your challenge is to build out this landing page, and integrate it with the rel.ink API and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your 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
Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design to work to along with active states.
The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as font-size, padding and margin. This should help train your eye to perceive differences in spacings and sizes.
If you would like the Sketch file in order to inspect the design in more detail it is available to purchase here.
You will find all the required assets in the /images folder. The assets are already optimized.
There is also a style-guide.md file, which contains the information you'll need, such as color palette and fonts.