Hands-on Exercise to Create a Static E-commerce Website

webdev
Exercices
Auteur
Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Date de publication

2024-10-13

PART I: Individual Work

Objective: Create a basic e-commerce web page with multiple sections, including a heading, paragraph, link, image, and a table.

Instructions:

  1. Open a Text Editor:

    • Choose a text editor like Visual Studio Code or WebStorm.

  2. Write the Basic HTML Structure:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My E-commerce Website</title>
  <meta name="description" content="An example e-commerce website">
  <meta name="keywords" content="e-commerce, online store, products">
  <meta name="author" content="Your Name">
</head>
<body>
</body>
</html>

  3. Create a navigation bar:

      <nav>
 <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="products.html">Products</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="contact.html">Contact</a></li>
 </ul>
  </nav>

  4. Add a heading and paragraph to the home page:

    <section>
   <h1>Welcome to My E-commerce Store</h1>
   <p>Discover our range of products and shop online.</p>
</section>

  5. Create a table on the “Products” page:

    <table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>$19.99</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

  6. Add a description to the “About” page:

    <section>
  <h2>About Our Shop</h2>
  <p>We are a leading e-commerce store offering a wide range of products at competitive prices. Our mission is to provide the best online shopping experience for our customers.</p>
</section>

  7. Save the files: Save each page with a .html extension (e.g., index.html, about.html, contact.html).

  8. Open the index page in a web browser: You should see a basic web page with navigation links, a heading, a paragraph, a table, and a contact form.

  9. Improve the website by following these suggestions:

  • Validate your HTML: Use an HTML validator to ensure your code is correct and standards-compliant. https://validator.w3.org/
  • Test your pages: Test your web pages in different browsers to ensure compatibility.
  • add more realistic content about the products and the company.
  • add more product pages and use links to navigate between them.
  • Use a consistent structure: Maintain a consistent structure throughout your web pages for better organization and navigation.
  • Add more content: Expand your web pages with additional sections, images, and links.
  • Accessibility Improvements: Add ARIA roles and properties to improve accessibility. You have to make some research about ARIA.

PART II: Group Work

  • Goal:

    • Once you have completed Part I, form groups of five students and start working on a simple e-commerce static website.
    • Demonstrate your knowledge and skills by building a more comprehensive project.

  • Requirements:

    • Follow the guidelines and requirements outlined in Final Project and Review, mainly Part I.
    • Work only on the structure and content of the website. You will implement the design and styling in the next exercise.
    • Each group member should contribute to different sections of the website.

Réutilisation