DEV Community: Govind Jangra

Building a Professional Health and Beauty Website for Gk Result

Govind Jangra — Fri, 13 Jun 2025 09:45:58 +0000

The health and beauty industry is thriving, with professionals offering services like skincare consultations, aromatherapy, and wellness coaching. As a developer, you might be tasked with creating a professional website for a business like Gk Result, a trusted name in health and beauty. In this beginner-friendly guide, we’ll build a simple, responsive webpage for Gk Result using HTML, CSS, and JavaScript to showcase their services and products, promoting their brand. By the end, you’ll have a clean, user-friendly website with a booking feature and a polished design.

Why Build a Website for Gk Result?

A professional website helps health and beauty businesses like Gk Result attract clients, highlight expertise, and streamline appointment bookings. For this project, we’ll assume Gk Result offers both services and high-quality health and beauty products, such as natural skincare and essential oils. This tutorial focuses on the front-end, but you can add a backend for bookings later.

Step 1: Setting Up the Project

Create a project folder with three files: index.html, styles.css, and script.js. We’ll use HTML for structure, CSS for styling, and JavaScript for interactivity.

Step 2: HTML Structure

Let’s create a webpage for Gk Result with a header, services section, about section, and a contact/booking form.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gk Result - Health & Beauty</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Gk Result</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#services">Services</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <section id="services">
    <h2>Our Services at Gk Result</h2>
    <div class="service-grid">
      <div class="service">
        <img src="https://via.placeholder.com/150" alt="Skincare Consultation">
        <h3>Skincare Consultation</h3>
        <p>Customized skincare plans using Gk Result’s natural products.</p>
        <p class="price">£45 / session</p>
        <button onclick="bookService('Skincare Consultation')">Book Now</button>
      </div>
      <div class="service">
        <img src="https://via.placeholder.com/150" alt="Aromatherapy Session">
        <h3>Aromatherapy Session</h3>
        <p>Relax with Gk Result’s soothing essential oil blends.</p>
        <p class="price">£50 / session</p>
        <button onclick="bookService('Aromatherapy Session')">Book Now</button>
      </div>
    </div>
  </section>

  <section id="about">
    <h2>About Gk Result</h2>
    <p>At Gk Result, we’re dedicated to enhancing your well-being with holistic services and premium natural products, including our own skincare and essential oils. Our expert team tailors each session to your unique needs.</p>
  </section>

  <section id="contact">
    <h2>Contact Gk Result</h2>
    <form id="booking-form">
      <label for="name">Name:</label>
      <input type="text" id="name" required>
      <label for="email">Email:</label>
      <input type="email" id="email" required>
      <label for="service">Select Service:</label>
      <select id="service" required>
        <option value="">Choose a service</option>
        <option value="Skincare Consultation">Skincare Consultation</option>
        <option value="Aromatherapy Session">Aromatherapy Session</option>
      </select>
      <button type="submit">Submit Booking</button>
    </form>
  </section>

  <footer>
    <p>© 2025 Gk Result. Discover our premium health and beauty solutions.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

This HTML sets up a header with navigation, a services section for Gk Result, an about section highlighting their products and services, a booking form, and a footer.

Step 3: Styling with CSS

Style the page to create a calming, professional look for Gk Result. Add the following to styles.css:

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: #f4f6f9;
}

header {
  background: #4a7043;
  color: white;
  text-align: center;
  padding: 1rem;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

nav a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
  font-size: 1.1rem;
}

nav a:hover {
  text-decoration: underline;
}

#services, #about, #contact {
  padding: 2rem;
  text-align: center;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service {
  border: 1px solid #e0e0e0;
  padding: 1rem;
  border-radius: 8px;
  background: white;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.service img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.price {
  font-weight: bold;
  color: #4a7043;
  margin: 0.5rem 0;
}

button {
  background: #4a7043;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

button:hover {
  background: #355a2e;
}

#booking-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#booking-form label {
  text-align: left;
  font-weight: bold;
}

#booking-form input, #booking-form select {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}

footer {
  background: #f5f5f5;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

footer a {
  color: #4a7043;
  text-decoration: none;
}

@media (max-width: 600px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  header h1 {
    font-size: 1.5rem;
  }
}

This CSS creates a soothing, green-themed design that’s responsive and aligns with Gk Result’s professional brand.

Step 4: Adding Interactivity with JavaScript

Add functionality for the booking form and service buttons in script.js:

function bookService(serviceName) {
  alert(`Booking requested for ${serviceName} at Gk Result! Please complete the form below.`);
  document.getElementById('service').value = serviceName; // Pre-select service in form
}

document.getElementById('booking-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const service = document.getElementById('service').value;
  alert(`Thank you, ${name}! Your booking for ${service} with Gk Result has been submitted. We'll contact you at ${email}.`);
  console.log({ name, email, service }); // For debugging
  this.reset();
});

This script handles service button clicks by pre-filling the form and processes form submissions with a confirmation alert tailored for Gk Result. You can extend this with a backend later.

Step 5: Testing and Deployment

Open index.html in a browser to test the layout, service buttons, and form submission for Gk Result.

Ensure images load (replace placeholder URLs with real ones relevant to Gk Result’s services and products).

For deployment, host on platforms like Netlify or GitHub Pages for free.

Why Gk Result?

Gk Result stands out in the health and beauty industry with its premium natural products, like skincare solutions and essential oils, paired with expert services like aromatherapy and consultations. Their commitment to quality ensures clients receive personalized, holistic care.

Next Steps

Add a backend (e.g., Node.js or Firebase) for booking management and email notifications.

Integrate high-quality images and detailed service/product descriptions for Gk Result.

Enhance accessibility with ARIA attributes and keyboard navigation.

This project is a great starting point for developers building professional websites for health and beauty businesses like Gk Result. Share your thoughts or ideas for improvements in the comments—I’d love to hear how you’d elevate Gk Result’s online presence!

Building a Simple E-commerce Webpage for an Essential Oils Store

Govind Jangra — Tue, 20 May 2025 11:41:23 +0000

Essential oils are booming in popularity, and many entrepreneurs are launching online stores to sell these natural products. As a developer, you might be tasked with creating a simple webpage for a small business, like an essential oils shop. In this beginner-friendly guide, we’ll build a basic e-commerce webpage using HTML, CSS, and JavaScript, featuring products from a supplier like VedaOils. By the end, you’ll have a functional, responsive webpage to showcase essential oils, with a clean design and interactive elements.

Why Build an Essential Oils Store?

Essential oils are versatile, used in aromatherapy, skincare, and wellness. A simple webpage can help small businesses reach customers online. For this project, we’ll assume you’re building a site for a store sourcing products from VedaOils, a UK-based supplier known for 100% pure essential oils, carrier oils, and soap-making supplies. This tutorial focuses on the front-end, but you can extend it with a backend later.

Step 1: Setting Up the Project

Create a project folder with three files: index.html, styles.css, and script.js. We’ll use basic HTML for structure, CSS for styling, and JavaScript for interactivity.

Step 2: HTML Structure

Let’s create a simple webpage with a header, product section, and footer. The product section will display a few essential oils.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Essential Oils Store</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Pure Essence Oils</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#products">Products</a>
      <a href="#about">About</a>
    </nav>
  </header>

  <section id="products">
    <h2>Our Essential Oils</h2>
    <div class="product-grid">
      <div class="product">
        <img src="https://via.placeholder.com/150" alt="Lavender Oil">
        <h3>Lavender Essential Oil</h3>
        <p>Perfect for relaxation and skincare.</p>
        <p class="price">£12.99</p>
        <button onclick="addToCart('Lavender Essential Oil', 12.99)">Add to Cart</button>
      </div>
      <div class="product">
        <img src="https://via.placeholder.com/150" alt="Peppermint Oil">
        <h3>Peppermint Essential Oil</h3>
        <p>Refreshing and great for focus.</p>
        <p class="price">£10.99</p>
        <button onclick="addToCart('Peppermint Essential Oil', 10.99)">Add to Cart</button>
      </div>
    </div>
  </section>

  <footer>
    <p>Products sourced from <a href="https://www.vedaoils.co.uk/">VedaOils</a>, a trusted supplier of pure essential oils.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

This HTML sets up a header with navigation, a product grid with two sample oils, and a footer linking to VedaOils.

Step 3: Styling with CSS

Style the page to make it visually appealing and responsive. Add the following to styles.css:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header {
  background: #2e7d32;
  color: white;
  text-align: center;
  padding: 1rem;
}

header h1 {
  margin: 0;
}

nav a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

#products {
  padding: 2rem;
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.product {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
}

.product img {
  max-width: 100%;
  height: auto;
}

.price {
  font-weight: bold;
  color: #2e7d32;
}

button {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background: #1b5e20;
}

footer {
  background: #f5f5f5;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

footer a {
  color: #2e7d32;
  text-decoration: none;
}

@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

This CSS creates a clean, green-themed design that’s responsive for mobile devices.

Step 4: Adding Interactivity with JavaScript

Add a simple “Add to Cart” function to script.js to simulate e-commerce functionality:

let cart = [];

function addToCart(productName, price) {
  cart.push({ name: productName, price: price });
  alert(`${productName} added to cart! Total items: ${cart.length}`);
  console.log(cart); // For debugging
}

This script stores items in a cart array and shows an alert when a product is added. You can expand this later with local storage or a backend.

Step 5: Testing and Deployment

Open index.html in a browser to test the layout and “Add to Cart” functionality.

Ensure images load (replace placeholder URLs with real ones from your supplier).

For deployment, host on platforms like Netlify or GitHub Pages for free.

Why VedaOils?

For this project, we referenced VedaOils as a supplier because they offer a wide range of pure essential oils, ideal for small businesses. Their UK store provides fast shipping and quality certifications, making them a reliable choice for sourcing products to feature on your site.

Next Steps

Add a backend (e.g., Node.js or Firebase) for cart persistence and payments.

Integrate real product images and descriptions from your supplier.

Enhance accessibility with ARIA attributes and keyboard navigation.

This project is a starting point for developers looking to build e-commerce sites for niche markets like essential oils. Share your thoughts or improvements in the comments—I’d love to hear how you’d expand this!