ThomasAurelius / fm_dine-restaurant-website

Frontend Mentor Challenge - Dine Restaurant

Frontend Mentor - Dine Website Challenge solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

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
• See the correct content for the Family Gatherings, Special Events, and Social Events section when the user clicks each tab
• Receive an error message when the booking form is submitted if:
  • The Name or Email Address fields are empty should show "This field is required"
  • The Email Address is not formatted correctly should show "Please use a valid email address"
  • Any of the Pick a date or Pick a time fields are empty should show "This field is incomplete"

Screenshot

Links

• Solution URL: https://github.com/ThomasAurelius/fm_dine-restaurant-website
• Live Site URL: https://thomasaurelius.github.io/fm_dine-restaurant-website/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

Continued development

I still need to figure out how the official design formatted the inputs the way the way they did. All other visuals are complete

Useful resources

-Shoutout to Kevin Powell for teaching so much great CSS!

Author

• Website - thomasaurelius.com
• Frontend Mentor - @thomasaurelius
• Twitter - @thomasaurelius4

Acknowledgments

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.