Building My First E-Commerce Website
Table of contents
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.