{"id":21582,"date":"2024-10-17T16:44:17","date_gmt":"2024-10-17T16:44:17","guid":{"rendered":"https:\/\/codewithcurious.com\/?p=21582"},"modified":"2024-10-21T02:44:49","modified_gmt":"2024-10-21T02:44:49","slug":"coffee-shop-website-using-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/codewithcurious.com\/projects\/coffee-shop-website-using-html-css-and-javascript\/","title":{"rendered":"Coffee Shop Website using HTML CSS and JavaScript"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Coffee Shop Website using HTML, CSS & JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Introduction :<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This project is a website for coffee house business. It uses HTML for the structure, CSS to style the pages, and JavaScript for making the site interactive. The site includes several sections like a landing page with a banner and an image slider, areas to show services, a menu, and animated counters that display important business stats. If you are having a coffee shop you can take the advantage of this website and customize this according to your requirement to showcase coffee shop services and items<\/p>

The design is responsive, which means it works well on any device such as phones, tablets, or desktops.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Structure :<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

HTML :<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Head Section :\n<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Links to external resources, including stylesheets from Google Fonts, Font Awesome for icons, and Swiper.js for the image slider.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
Body Section :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Contains the core components of the webpage:<\/p>

  1. Navbar<\/strong>: A fixed navigation bar that provides links to different sections of the site.<\/li>
  2. Landing Section<\/strong>: Features a welcome message and a call-to-action button, alongside a Swiper image slider.<\/li>
  3. About Section<\/strong>: Highlights key business features like ease of ordering, fast delivery, and quality coffee.<\/li>
  4. Menu Section<\/strong>: Displays a brief description of the coffee house’s menu with associated images.<\/li>
  5. Business Data Section<\/strong>: Displays business statistics, like the number of branches and awards.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    CSS :<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Global Styles :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Font settings, margins, padding, and box-sizing are reset for consistency across browsers. html<\/code> is set to font-size: 62.5%<\/code> for easier scaling and responsiveness.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Container and Navbar :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The container spans the full width and height, providing a base layout. The navbar is styled with a fixed position, making it always visible, and it transitions smoothly into a sticky mode when scrolling, shrinking its height.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Landing Section :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The banner text is centered with the use of absolute positioning and is styled to stand out with fonts from Google. Call-to-action buttons have hover effects that change colors and borders for interactivity.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Swiper Slider :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Custom pagination styles are applied to the Swiper bullets, and images are set to cover the entire viewport for an immersive experience<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Responsive Design :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The website is built to be responsive, ensuring that the layout and images adjust properly on different screen sizes. The use of percentages and flexible units like rem<\/code> helps achieve this.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    JavaScript Logic :<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Swiper Functionality :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The Swiper.js<\/strong> library is used to create an image slider that transitions between images with a fade effect.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Autoplay :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The images change automatically every 4 seconds (delay: 4000<\/code>) without disabling the autoplay when the user interacts with the slider (disableOnInteraction: false<\/code>).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Looping :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The slider loops indefinitely (loop: true<\/code>), ensuring continuous movement without breaks.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Pagination<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Bullet-style pagination allows users to navigate between slides manually, with the pagination bullets being clickable (clickable: true<\/code>).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    Purpose of Functions\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Swiper Slider Initialization :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Initializes the image slider and controls its behavior, ensuring smooth transitions between images, autoplay, and user interaction via pagination.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t
    Scroll Event Listener :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    This function checks the user’s scroll position in real-time and applies two important changes:<\/p>

    1. Sticky Navbar<\/strong>: Adds\/removes the sticky<\/code> class when the user scrolls down to keep the navigation visible while compact.<\/li>
    2. Trigger Counters<\/strong>: When the user scrolls past the menu section, the counters for business data start incrementing.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t
      startCount Function :<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      This function controls the increment of each business data counter. It starts counting from 0 to the target value and stops when the target is reached.The counting process is paced by setting the interval dynamically based on the target value, ensuring the numbers increment at a consistent speed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      Get Discount on Top Educational Courses<\/span><\/h3>
      Brand Name<\/th>Discount Information<\/th>Coupon Codes Link<\/th><\/tr><\/thead>
      Educative.io<\/td>20% discount on Educative courses and plans<\/td>
      W3Schools<\/td>20% discount on W3Schools courses<\/td>
      KodeKloud<\/td>10% discount on KodeKloud courses and plans<\/td>
      GeeksforGeeks<\/td>30% discount on GeeksforGeeks courses<\/td>
      Target Test Prep<\/td>20% discount on Target Test Prep<\/td>
      Coding Ninjas<\/td>\u20b95000 discount on Coding Ninjas courses<\/td>
      Skillshare<\/td>40% discount on Skillshare<\/td>
      DataCamp<\/td>50% discount on DataCamp<\/td>
      365 Data Science<\/td>57% discount on 365 Data Science Plans<\/td>
      Get Smarter<\/td>Flat 20% discount on Get Smarter courses<\/td>
      SmartKeeda<\/td>Flat 40% discount on SmartKeeda courses<\/td>
      StackSocial<\/td>20% discount on StackSocial courses<\/td>