Questions No.

01

Scenario: You are launching an online store for your new business. Your goal is to choose a tool
that is user-friendly, requires minimal or no technical skills, and allows easy modification or
customization for a professional look.

Available Tools:

1. Shopify
2. Wix eCommerce
3. Square Online
4. WooCommerce (for WordPress)
5. BigCommerce

Question: Choose two tools (just write names) from the list above that you would consider
using to build your online store also briefly tell why these tools are good choices for a non-
technical user and how they meet your store’s needs.

Answer:

Shopify and Wix eCommerce are excellent choices for a non-technical user looking to set up an
online store.

Shopify is known for its ease of use and offers a range of professionally designed themes that
can be customized without coding. With intuitive drag-and-drop features, it allows users to ass
products, manage inventory, and set up payment methods with minimal efforts. Its large app
marketplace provides flexibility, enabling easy integration of additional features ads the business
grows.

Wix eCommerce is another user-friendly option with a highly visual, drag-and-drop editor,
making customization straightforward. It offers templates tailored for online stores and allows
beginners to design a professional-looking website quickly. Wix also includes built-in marketing
tools, which help store owners reach and engage customers without needing technical skills.
Both platforms provide the essential tools to create and manage an online store efficiently, even
for beginners.
Questions No. 02

Scenario: You are a Front-End Developer considering how to build an eStore for a client. There
are two options available to you for development of estore or online shop for a client

 Use an online eCommerce tool (Shopify, Wix eCommerce, Squarespace, BigCommerce,

WooCommerce, Square Online, Weebly etc)
 Develop a custom eStore using HTML, CSS, and JavaScript.

Project Scenarios:

 Project A: A small business needs a simple eStore with quick setup and minimal customization.
 Project B: A large retail brand requires a highly customized eStore with unique features and
integrations.

Question: For each project (A & B), choose between an online tool or custom development and
justify your choice based on factors like customization and budget.

Answer:

Project A: For a small business needing a straightforward eStore, an Online eCommerce tool
like shopify or Wix eCommerce is ideal. These platforms provide ready-made templates, quick
setup, and essential features such as inventory management, payment processing, and shipping
options, all without the need for technical expertise. This approach is budget-friendly and
efficient, fitting a smaller budget and short timeline. Additionally, the scalability offered by these
platforms allows the business to grow with minimal hassle, making it a perfect choice for a
simple, manageable online store.

Project B: For a large relail brand seeking a highly customized eStore, custom development
using HTML, CSS, and JavaScript is optimal. Custom coding allows for complete control over
design, unique features, and complex integrations, resulting in a tailored user experience. While
this route is more time-consuming and expensive, it meets the brand’s needs for scalability, high
performance, and brand-specific functionality. Custom development aligns well with the brand’s
large scope, enabling a unique and robust online presence.
Questions No. 03

Suppose you are working as a Front-End Developer in a company that primarily handles E-
commerce projects, and you are asked to create a webpage (without online tools) by using
HTML that allows users to sign up for E-store offers. Your webpage should include the
following elements:
Heading:
"E-store Offers Signup"
Form:
Create a form that includes the following elements:
 A text box for the user to enter their email address.
 A drop-down menu where the user can select their favorite product category (e.g.,
Electronics, Fashion, Beauty & Health). (Like below image)
 A checkbox labeled “Subscribe to promotional emails”.
 A submit button labeled "Join Now".

Make sure to organize the form elements neatly and provide appropriate labels for each field like
below images.

Note:
Write the HTML code in the word file and output of code must show page structure like above
images. Students can run html code in this link: W3Schools Tryit Editor
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-store Offers Signup</title>
<style>
/* Basic styling to organize form layout */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
}
.form-container {
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
h1 {
color: #333;
}
label {
display: block;
margin: 10px 0 5px;
text-align: left;
}
input[type="email"],
select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
.checkbox-container {
display: flex;
align-items: center;
justify-content: left;
margin-bottom: 15px;
}
.checkbox-container input {
margin-right: 10px;
}
.submit-btn {
width: 100%;
padding: 10px;
 background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.submit-btn:hover {
background-color: #218838;
}
</style>
</head>
<body>

<div class="form-container">
<h1>E-store Offers Signup</h1>
<form action="#" method="post">
<!-- Email Address Input -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>

<!-- Favorite Product Category Dropdown -->

<label for="category">Favorite Product Category:</label>
<select id="category" name="category" required>
<option value="">Select a category</option>
<option value="electronics">Electronics</option>
<option value="fashion">Fashion</option>
<option value="beauty-health">Beauty & Health</option>
 </select>

<!-- Subscribe to Promotional Emails Checkbox -->

<div class="checkbox-container">
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to promotional emails</label>
</div>

<!-- Submit Button -->

<button type="submit" class="submit-btn">Join Now</button>
</form>
</div>

</body>
</html>