/barista-competition-challenge

PAST - Mock registration page for a barista competition.

Primary LanguageJavaScript

☕ Barista Competition Challenge

A mock registration page for a barista competition.
Web page published to github-pages at: barista-competition-challenge.

✔️ Project Requirements:

  • Create a competitor registration web page for the "Barista Competition" based on the provided press release and Instagram post.
  • The registration form should capture the barista's name, email, and phone number.

⚙️ Primary Technologies Used:

  • Bootstrap 4
  • CSS3
  • HTML5
  • JavaScript - ES6
  • Sass
  • Webpack

📇 Feature Highlights:

  • The page uses Webpack so that assets are bundled and minified lowering the number of HTTP requests and improving load times.
  • The page uses responsive, mobile-first design.
  • The registration form includes client-side validation with a simulated backend that runs the same validation logic.
  • The application includes a loadVideoIfNetworkIsGood() function that will only load the background video if the network has a connection of 3g or 4g and if the user does not choose to save data on a mobile device.
  • Large images were optimized using Squoosh.app.
  • The page uses semantic HTML to make sure it is accessible.

🖥️ Desktop View

Desktop Screenshot

📱 Mobile View

Mobile Screenshot