Web Programming UNPAS Watch on YouTube

Membuat WEBSITE Kedai Kopi RESPONSIVE dengan HTML & CSS dari 0 + Autodeploy ke WEB HOSTING

3 min read 1 year ago
Published on Aug 30, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a responsive coffee shop website from scratch using HTML, CSS, and a bit of JavaScript. This guide will take you through each step of the process, from setting up your project to deploying it on a web hosting service. By the end, you'll have a fully functional website that you can share with the world.

Step 1: Prepare Your Environment

  • Set Up Your Code Editor: Use a code editor like Visual Studio Code, which is user-friendly and perfect for web development.
  • Create Project Folder: Organize your files by creating a folder for your project, e.g., CoffeeShopWebsite.
  • Gather Assets: Download images and icons from the provided links:

Step 2: Create Basic HTML Structure

  • Create an HTML file: Inside your project folder, create an index.html file.
  • Add Basic HTML Boilerplate:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Shop</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Content will go here -->
</body>
</html>

Step 3: Build the Navbar

  • Add Navbar Elements: Inside the <body> tag, create a navigation bar using <nav> and <ul> elements.
    <nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
  • Style the Navbar: Use CSS in styles.css to style your navbar.

Step 4: Implement Media Queries

  • Make It Responsive: Add media queries in your CSS to ensure the website looks good on all devices.
    @media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
}

Step 5: Create the Hero Section

  • Add Hero Section HTML:
    <section id="home">
    <h1>Welcome to Our Coffee Shop</h1>
    <p>Your favorite place for coffee and relaxation.</p>
</section>
  • Style the Hero Section: Use CSS to add background images and text styles.

Step 6: Develop the About Section

  • Add About Section HTML:
    <section id="about">
    <h2>About Us</h2>
    <p>We serve the best coffee in town.</p>
</section>
  • Style the About Section: Customize with CSS to match your theme.

Step 7: Create the Menu Section

  • Add Menu Section HTML:
    <section id="menu">
    <h2>Menu</h2>
    <ul>
        <li>Coffee - $3</li>
        <li>Tea - $2</li>
        <li>Pastries - $4</li>
    </ul>
</section>
  • Style the Menu Section: Ensure the menu looks appealing with CSS styles.

Step 8: Build the Contact Section

  • Add Contact Section HTML:
    <section id="contact">
    <h2>Contact Us</h2>
    <form>
        <input type="text" placeholder="Your Name" required>
        <input type="email" placeholder="Your Email" required>
        <textarea placeholder="Your Message" required></textarea>
        <button type="submit">Send</button>
    </form>
</section>
  • Style the Contact Section: Make the form user-friendly and visually appealing.

Step 9: Create the Footer

  • Add Footer HTML:
    <footer>
    <p>&copy; 2023 Coffee Shop. All rights reserved.</p>
</footer>
  • Style the Footer: Ensure the footer is clear and matches your site's design.

Step 10: Deploy to Web Hosting

  • Choose a Hosting Provider: Use services like Niagahoster (check for promotions).
  • Upload Files: Use an FTP client to upload your files to your hosting server.

Step 11: Set Up Autodeploy with GitHub Actions

  • Create a GitHub Repository: Store your project on GitHub.
  • Add Deployment Action: Follow the instructions from the GitHub Actions documentation to set up automatic deployment.

Conclusion

You've now created a responsive coffee shop website from scratch using HTML and CSS. You learned how to structure your website, style it for different devices, and deploy it online. For your next steps, consider exploring JavaScript to add interactivity or enhancing your website with additional features. Happy coding!

Table of Contents

Recent