restaurant-css-framework

You can visit the project at this link.

Bootstrap-Powered Web Development Project with Custom Functionalities

This BeCode project, initially perceived as a quick task, aimed to create five web pages using the Bootstrap framework while integrating specific functionalities into each page. The basic approach involved leveraging Bootstrap's pre-built components and styles to expedite the development process while delivering aesthetically pleasing results.

The five pages created as part of this project could include elements such as interactive forms, responsive navigation bars, blog sections, image galleries, or any other relevant content based on project requirements.

While building the pages using Bootstrap can simplify layout and responsive design management, integrating custom functionalities on each page, such as JavaScript scripts for DOM manipulation, user interaction, or form validation, might require special attention to ensure smooth operation.

Ultimately, this BeCode project provided an opportunity to learn and apply web development skills, using Bootstrap as a foundation for web page design while customizing these pages with specific functionalities to meet project needs.

Additional Project Instructions

Throughout the project, the following supplementary guidelines were given:

Implement a responsive form with conditional logic.
Prioritize speed and efficiency in both the development and deployment phases.
Incorporate a cookie banner.
Create a realistic menu with allergen information or descriptions.
Employ a custom map feature.
Utilize Dribbble for reference or inspiration.
Ensure no broken links within the project.

Additional Project Instructions

Throughout the project, the following supplementary guidelines were given:

Implement a responsive form with conditional logic.
Prioritize speed and efficiency in both the development and deployment phases.
Incorporate a cookie banner.
Create a realistic menu with allergen information or descriptions.
Employ a custom map feature.
Utilize Dribbble for reference or inspiration.
Ensure no broken links within the project.

Coach's Feedback

Dante

During our recent review, several adjustments were made to the menu design. Specifically, badges have been relocated to be positioned beneath the text, enhancing both readability and aesthetics.

An alignment issue was identified in the captions, where inconsistencies between padding and margin were present. This issue has been resolved to ensure a consistent presentation.

Furthermore, a typographical error was found in the gallery text of the "Picture" page. We have corrected this mistake to ensure a seamless user experience.

It's worth noting that adding images requires adaptation to the new design, which can be time-consuming. Considering the integration of a "collapse" button to allow users to view the dish beneath the description is an option to explore, but it would also require adjustments to the images.

Lessons Learned

Proactive Approach: I learned the importance of being proactive. At the beginning of the project, I invested a significant amount of time trying to set up Bootstrap cleanly and searching through the documentation for answers. While this initially seemed like a detour, it ended up being beneficial as I was able to help others with similar issues. Most importantly, this early effort paid off, as I didn't face any major setbacks during the deployment phase, which had initially seemed daunting. Running multiple tests beforehand really eased the finalization process, creating a sense of calm and positivity.
Adapting to Additional Requests: Initially, I thought I had completed the project after the first couple of days, but additional requests and requirements kept cropping up. This forced me to rethink and adjust my project plan. I faced a challenge in finding the right design layout that I wanted to deliver, which took up a significant amount of time.
Continuous Improvement: I realized that there's always room for modification and improvement. To manage this, I used tools like Trello to prioritize and keep track of the most important changes. This helped me maintain a clear overview and stay organized throughout the project.
User-Friendly Design: I understood the importance of using buttons and links effectively to make the project more user-friendly and enjoyable to interact with. A well-designed user interface can greatly enhance the overall user experience.

Tech Stack

Client:

Feedback

If you have any feedback, please reach out to us at matthieugravy@gmail.com

Run Locally

Clone the project

  git clone git@github.com:matthieuGravy/restaurant-css-framework.git

Go to the project directory

  cd restaurant-css-framework

Install dependencies

  npm install

Start the server

  npm run resto

Source Attribution

As a solo creator for this project/document, I have utilized various resources from different online sources. I would like to acknowledge and thank these sources for their valuable contributions to my work. Here is a list of the sources I consulted for images, icons, and other visual elements:

Images:

Canva (https://www.canva.com/): I used Canva to create and customize visual elements such as graphics, infographics, and illustrations.

Pexels (https://www.pexels.com/fr-fr/): I drew from Pexels' collection of high-quality images under the Creative Commons license to enhance my project.

Pixabay (https://pixabay.com/fr/videos/): I found a variety of royalty-free videos on Pixabay, which I integrated into my work.

Icons:

Bootstrap Icons (https://icons.getbootstrap.com/): I used Bootstrap Icons library to access a wide range of ready-to-use icons in my project.

Canva (https://www.canva.com/): I also customized icons using Canva to meet my specific requirements.

I would like to express my gratitude to all these sources for their contributions to my project. Each one of them played an essential role in creating visually appealing and informative content.

Do I plan to continue the development of this project?

No, I could have sped up the tasks by using a JavaScript framework to reuse a jumbotron or iterate the menu. Using HTML slowed down my productivity with these tools. The process was quite lengthy because each time an error occurred, I had to perform detailed checks one by one.