Skip to content

HyunCafe/odin-restaurantpage

Repository files navigation

odin-restaurantpage (14 weeks into my coding journey)

Throughout the Odin Restaurant Page project, I focused on implementing best practices by using modularity in my code and setting up the webpack environment to bundle my modules. Additionally, I learned how to effectively use DOM manipulation to dynamically create and switch between different tabs while having everything be mobile responsive while following BEM and DRY. Overall, this project allowed me to showcase my skills in modularity, webpack, and DOM manipulation, demonstrating my ability to create mobile-responsive, dynamic webpages for optimal user experience.

Summary of Key Features:

  • Use of webpack to set up the development environment
  • Implementation of DOM pageload for smoother user experience
  • Stagger effect for main section images to create an engaging visual layout
  • Modularity through the use of different modules to enhance code reusability
  • Responsive design for mobile and tablet devices, including a hamburger menu for easy navigation

Project Animation

Live Link

Project Timeline

Mar 19, 2023

  • Initial commit to set up repository and project structure
  • Set up webpack environment and added basic styling to the project
  • Implemented DOM pageload for smoother user experience
  • Added footer section details and styling, and included necessary assets
  • Fixed clickable links for footer to ensure proper navigation
  • Added background image and further styled footer for improved aesthetics
  • Implemented stagger effect for main section images to create a more visually appealing layout.

Mar 20, 2023

  • Add: Implemented best practice of modularity by adding different modules to enhance code reusability
  • Add: Worked on contact page, including styling and layout
  • Add: Added slide effect on page load for a more engaging user experience
  • Fix: Resolved bug with event listener reattachment for navbars, ensuring proper functionality
  • Refactor: Refactored code to use DOM manipulation instead of innerHTML, improving performance and security
  • Add: Added contact page, providing users with a way to get in touch and request information or assistance.

Mar 21, 2023

  • Add: Added responsive mobile design for contact page
  • Add: Added responsive for mobile on home page
  • Fix: Made mobile responsive for header and footer, and added hamburger menu
  • Add: Added responsive mobile for footer and reservations
  • Add: Added contact page, and fixed element shifting

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published