Cuisine Restaurant
Website for a cuisine restaurant.
Data Sheet.
Technologies:
- HTML
- CSS
- JavaScript
Introduction:
I carried out this project under the supervision of Leomaris Reyes, who at that time was my Technical Coach at Platzi Master.
At that time, she took on the task of researching on Dribbble for a UI that I could mock up to practice my skills. And that's how we came across this UI for a kitchen restaurant.
Objective:
My main goal in developing this project was to practice and build a solid foundation of knowledge as a Frontend developer. At the same time, I wanted to have a personal project that could give me visibility and substantiate my knowledge as a web developer.
Challenges:
My greatest difficulty in developing this project was the menu section, as we have a slider within another slider. Undoubtedly, there are multiple libraries out there to create incredible sliders such as Slick-Slider or Swiper. However, understanding how they work and coding one with Vanilla JavaScript can be challenging.
In my case, I opted to be more practical. I defined my menu in a JSON structure that allowed me to access its information easily. And I modify the content and attributes of the HTML elements each time the user selects a menu type or a specific slide. This way, we offer the functionality to navigate through the menu with a very simple implementation.
Features:
- Image and video slider.
- Automatic playback of slider.
Conclusion and Learnings:
At the time, this project was quite challenging, but it undoubtedly helped me improve my skills as a Frontend developer and proved to myself that I had acquired good foundational knowledge to understand and tackle development problems. I felt satisfied with the result, especially considering that I completed it within a period of 7 days.
Some of the learnings I had were:
- Generating HTML content dynamically and manipulating the DOM using JavaScript.
- Learning to identify and implement responsive design patterns such as Off Canvas, Column Drop, Layout Shifter, and Tiny Tweaks.
- Mastering the use of CSS Grid.
- Utilizing tools for optimizing images, such as Squoosh, which allows transforming images to the .webp format and adjusting their size and quality.
References:
- Dribbble. UI design for Cuisine Restaurant. Designed by Mithun: https://dribbble.com/shots/12927498-Cuisine-Restaurant-Website.
- Carlos Azaustre. The 5 Patterns of Responsive Design with Flexbox: https://carlosazaustre.es/los-5-patrones-del-responsive-design.
- Squoosh App. Image compression tool: https://squoosh.app.
- Platzi Master. Education program offered by Platzi: https://platzi.com/blog/platzi-master-que-es.