Building My First E-Commerce Website

The concept of an online marketplace has always intrigued and fascinated me. Observing the various interactions of elements on such websites has been captivating. Surprisingly, despite this interest, I had never considered building one myself, or even attempting to do so.

However, in this week's project @Web3bridge, the challenge was to create an e-commerce website—a complete one. So, I embraced the task and delved into it headfirst. I started by searching for the necessary resources to accomplish this feat. After some thorough searching, I eventually found what I needed and began to implement them.

I kicked off the website using a UI template provided to me and then focused on constructing the page structure.

Project Structure

• index.html: This file contains the structure and content for the home page of the e-commerce website.

• shop.html: The shop page displays various products available for purchase.

• blog.html: This page showcases blog posts or articles related to the products or industry.

• about.html: The about page provides information about the company or brand.

• contact.html: Users can find contact information and a form to reach out for inquiries.

• style.css: The CSS file styles the HTML elements to ensure a visually appealing layout and design.

• script.js: JavaScript functionalities are implemented in this file to add interactivity to the website.

Challenges

One of the main challenges I encountered during the build of this project was the short time duration allotted for completion. I was striving to meet a deadline, which inevitably led to the project being incomplete. Thus far, I managed to build the Home, Shop, Product, Blog, and About Us pages, but the Contact page is still in development.

New Lessons Learnt

During this project, I learned the importance of website structure. Well-organized pages not only facilitate current functionality but also ease future maintenance. I enjoyed incorporating responsiveness into my websites; it was both enjoyable and straightforward. Additionally, I discovered the <marque>tag in HTML, and exploring its behavior was intriguing.

To catch a glimpse of what I have described, I have shared a link to the live project here.

I look forward to your constructive reviews and comments.