🚀 Designo Agency Website

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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

---

💡 Overview

The challenge

The challenge is to build out this multi-page website and get it looking as close to the design as possible.

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 should show "Can't be empty"
  • The Email Address is not formatted correctly should show "Please use a valid email address"
• View actual locations on the locations page maps (we recommend Leaflet JS for this)

Screenshots

desktop version

tablet version

mobile version

Links

• Solution URL: GitHub
• Live Site URL: Vercel

---

🎯 My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Astro.js – All-in-one web framework
• React – JS library
• React Hook Form - For form state management
• Tailwind CSS – For styles
• Mapbox – Open-source maps

What I learned

• Astro.js:

  • I discovered Astro.js, a powerful static site generator that allows me to build fast and modern websites using components from different frameworks like React, Vue, and Svelte.

• Tailwind CSS:

  • I deepened my knowledge of Tailwind CSS, a utility-first CSS framework. It simplifies rapid development by offering pre-defined utility classes that can be combined to create complex designs while maintaining a clean and readable codebase.

• React Hook Forms and Components in Astro:

  • I learned about React Hook Forms, a library for building forms in React, and integrated them into Astro sites. This allowed me to streamline form validation, state management, and user input handling while leveraging React's component-based architecture within Astro.js.

Useful resources

• Astro Documentation
• React Documentation
• React Hook Form Documentation
• Tailwind CSS Documentation
  • Quick reference
  • Customizing Screens
  • Functions & Directives
  • Default configuration
  • Default spacing scale
  • Plugins:
    • Typography Plugin
    • Container Queries Plugin
• Mapbox Documentation
  • Styles API

---

👨‍💻 Author

• Website – www.jakubjirous.dev
• Frontend Mentor – @jakubjirous
• LinkedIn – jakubjirous