colinthedev/sleek-rest-website

A two page restaurant site with reservations page

sleek-rest-website 🍔

restaurant website with error handling on booking page

About 👇

A two page restaurant website with booking page.

This project was created from scratch using grid for the main layout and BEM method.

Built with a mobile first approach.

Deployed using Github-pages

Final Considerations

This project was great practice to strengthen positioning layout with responsive design.

I used javascript for the catering/events section to display content based on selection and update with corresponding image depending on screen size.

• By giving each image (mobile, tablet, desktop) an id, I could target them seperately and store them in their own variables, While depending on the screensize i disable and enable each image in media queries using CSS. The enabled ID ('desktopImage', 'tabletImage', 'mobileImage') then display's the correct corresponding image size.

Practice with form validation and displaying error messages using javascript.

Built With

• HTML-5
• SCSS
• Javascript

Key Features

A few key features implemented include:

• ✅ Drop down menu
• ✅ Toggle button
• ✅ DOM manipulation
• ✅ Increment counter
• ✅ Error handling
• ✅ Fully responsive

Sections Included

• Home
  • Booking