🚀 My Team – Multi-Page Website

This is a solution to the My Team Website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

✅ Table of contents

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
See the correct content for each team member on the About page when the + icon is clicked
Receive an error message when the contact form is submitted if:
- The Name, Email Address or Message fields are empty should show "This field is required"
- The Email Address is not formatted correctly should show "Please use a valid email address"

desktop version

tablet version

mobile version

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.
Flowbite:
- I explored Flowbite, a comprehensive UI kit built with Tailwind CSS. It provided me with pre-designed components, layouts, and styles, helping me deepen my knowledge and skills with Tailwind CSS.
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.