Skip to content

AlexBelostozky/Drink2Go-HTML-Academy

Repository files navigation

Graduation project «Drink2Go»


Drink2Go is an coffee drinks online-store. The user can find out about new products, advantages of Drink2Go products, and view the catalog.

Project preview


Statement of work

Only Figma UI design and specification was originally given.

And my task was to create the adaptive HTML layout for mobile, tablet and desktop (Chrome, Firefox, Safari friendly) within only 7 days using:

  • BEM methodology
  • Less preprocessor
  • image adaptation for screens with different DPI
  • Gulp automatisation
  • PixelPerfect precision
  • validate the form before sending it to the server (check the existence and length of the comment) (currently implemented using HTML5)

Results

Within 7 days I worked on the project for 62 hours. The points of the specification that I managed to complete during this time below:

  • adaptive layout
  • BEM methodology
  • adaptive images
  • accessibility of the navigation menu in the mobile version when JS is disabled
  • form validation
  • implementing the slider in promo section using swiper.js library
  • implementing the map section using Leaflet library
  • custom select input
  • different hover, focus, active, and disabled states of button and input elements
  • PixelPerfect precision

The project is currently under review. After the review, I will post the results here.


Improvement plans

Further I want to fulfill the remaining points of the specification.