Shopping Cart Website from Scratch Ecommerce

How to build a fully functional web storage shopping cart that integrates with Paypal. Step by step instruction webdev
Shopping Cart Website from Scratch Ecommerce
File Size :
1.69 GB
Total length :
4h 16m



Laurence Svekis


Last update




Shopping Cart Website from Scratch Ecommerce

What you’ll learn

Create a custom website with a shopping cart
Create multiple page websites that can store products within a shopping cart

Shopping Cart Website from Scratch Ecommerce


Basic HTML and JavaScript
Desire to learn


This course will introduce HOW YOU can build a custom front-end coded shopping cart from scratch.  Users will be able to add items from multiple pages into a shopping cart. Users will also have a shopping cart that has a checkout button to purchase shopping cart items using Paypal.  You will be amazed at how easy this is to setup and get going on your website.  This is by far one of the most asked for and discussed types of projects that web developers create.  Learn to create a simple eCommerce system using HTML, and jQuery.    Course also covers using Bootstrap to build the website but Bootstrap is not a required part for the functionality of the code.
HTML – Using HTML for page structure you can setup products on multiple different web pages.  Once you visitors click the button links on the product the item information gets added to a shopping cart.  Checkout anytime or browse more products updating the shopping cart.  This is a simple but useful solution for anyone who wants a simple shopping experience for visitors to HTML web pages.
CSS – Bootstrap is used within the course to apply styling and structure to the website. Bootstrap is used for rapid web development so we can focus more on the mechanics of the application and how it works.  Some CSS will be covered but in limited capacity within the course.
JavaScript / jQuery – Some limited JavaScript is used but course content and coding is mainly based around jQuery.   jQuery provides an easy way to add event listeners and work with JSON data.
PayPal – Purchases from the shopping cart can be made via Paypal.  the course will show you how to JSON format your shopping cart items, and extract out the object information.  This format can be utilized in other for other payment processors as well.  Checkout within the course is formatted with a one click option to pay via Paypal.
Step by step learning with explanations of code being used to build functionality within the shopping cart.  Some HTML and JavaScript experience is necessary as this is a fast paced course covering specific topics related to the creation of the shopping cart.
I’m here to help you learn to build projects with HTML and jQuery and ready to answer any questions you may have.   Are you ready to take the first step and start learning how to create your own eCommerce website from scratch?  Join now and see what you can create.


Section 1: Introduction to creating a front end shopping cart

Lecture 1 Introduction to building a shopping cart from scratch

Lecture 2 Course Resources and Links

Section 2: Build a jQuery Shopping cart

Lecture 3 Setup Basic HTML template and source links

Lecture 4 Source Code Default HTML template

Lecture 5 Create Product add event listener

Lecture 6 Use data attributes to pass values to jQuery

Lecture 7 Source Code Event listeners and Data Attributes

Lecture 8 Update add more products

Lecture 9 Create Shopping cart object array

Lecture 10 Loop Through Items in the array jQuery

Lecture 11 Add items increase quantity in the shopping cart

Lecture 12 Add session storage and parse JSON

Lecture 13 Use Session Storage to update array object values

Lecture 14 Create Shopping Cart output

Lecture 15 How to Display Cart items and totals

Lecture 16 Output dollars in currency format

Lecture 17 Source Code Storage Shopping Cart

Section 3: Create Bootstrap Ecommerce Website with shopping cart

Lecture 18 UX add Bootstrap classes

Lecture 19 Shopping cart dialog window popup

Lecture 20 Create a bootstrap table

Lecture 21 Bootstrap 4 Tables

Lecture 22 Add Checkout Buttons

Lecture 23 Add Bootstrap Grid

Lecture 24 Add Cards update Bootstrap styled items

Lecture 25 Add Bootstrap NavBar

Lecture 26 More Bootstrap Styling

Lecture 27 Create Page Footer

Lecture 28 Source Code Products.html

Lecture 29 Create Checkout page

Lecture 30 Create Paypal Checkout Form

Lecture 31 Adding event listeners update quantity

Lecture 32 Tweaking output quantities

Lecture 33 Complete Shopping Cart Checkout to Paypal

Lecture 34 Source Code Checkout to Paypal checkout.html

Section 4: Bootstrap Website Building and styling

Lecture 35 Create Mulitple page website

Lecture 36 Create About.html page

Lecture 37 Source Code About.html

Lecture 38 Create Index.html Carousel

Lecture 39 Source Code Index.html

Lecture 40 Overview products.html

Lecture 41 Source Code Products.html

Lecture 42 CSS Source Code

Lecture 43 Summary overview of JavaScript

Lecture 44 Source Code JavaScript

Lecture 45 Course Resources

Section 5: Source Code Tweaks asked for by students

Lecture 46 Update intro and thanks

Lecture 47 Shopping Cart Updates

Lecture 48 Adding Remove button making event listener

Lecture 49 remove object from array

Lecture 50 Update Checkout of shopping cart

Lecture 51 Checkout Zero Quantity Remove

Lecture 52 Source Code for products.html

Lecture 53 Source Code for checklist.html

Lecture 54 Source Code

Section 6: Bonus Section

Lecture 55 JavaScript ProtoType example

Lecture 56 JavaScript Code Prototype example

Web developer and web designers,anyone who wants to build a website with a shopping cart,Anyone who wants to learn more about web storage,Anyone who wants to learn and see jQuery in action and what can be done,Create a Paypal checkout within any website,Front end coders who want to create a shopping cart

Course Information:

Udemy | English | 4h 16m | 1.69 GB
Created by: Laurence Svekis

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top