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
  • Previews
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

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, or `Your Message`` fields are empty and should show "Can't be empty"
  • The Email Address is not formatted correctly should show "Please use a valid email address"

Previews

Desktop Version

Tablet Version

Mobile Version

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: GitHub Pages Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• React - JS library
• TailwindCSS - CSS Framework
• Vite - Frontend Tooling

What I learned

The biggest thing I learned during this project was when to choose grid over flexbox for layouts. I initially used Flexbox for the project cards, and the links layout, but the more advanced the layout became, the clearer it became that the grid was a better tool for the job.

Continued development

In future projects, I want to practice using composition more. I think my implementation of the Container component was a solid concept but I didn't execute it as well as I wanted.

I also plan to look into how other developers are using Tailwind for responsive design. This is my second project using the framework, and I've done some research on best practices, but I think it's time for some further exploration.

Author

• Website - Patrick Dolan
• Frontend Mentor - @Patrick-Dolan