Frontend Mentor - Designo agency website solution
This is a solution to the Designo agency website 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 each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Receive an error message when the contact form is submitted if:
- The
Name
,Email Address
orYour Message
fields are empty should show "Can't be empty" - The
Email Address
is not formatted correctly should show "Please use a valid email address"
- The
Screenshot
Links
My process
Built with
- React Responsive
- Formik & Yup for form & form validation
- Next.js - React framework
- Styled Components - For styles
What I learned
This is my first project with Next, I learnt a lot about the NPM ecosystem and how to read documentation as I used a number of helper libraries in the project. I struggled a bit with making the website responsive due to the number of layout shifts and absolutely positioned elements. I used the react responsive package to handle some of those elements.