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.

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

• Solution URL: GitHub
• Live Site URL: Vercel

• 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
• Flowbite – Components on top of Tailwind CSS

• 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.

• Astro Documentation
• React Documentation
• React Hook Form Documentation
• Tailwind CSS Documentation
  • Quick reference
  • Customizing Screens
  • Functions & Directives
  • Default configuration
  • Default spacing scale
• Flowbite Documentation
  • Astro vs. Flowbite

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