Shopping Cart Website from Scratch Ecommerce
4.5 (47 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
704 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Shopping Cart Website from Scratch Ecommerce to your Wishlist.

Add to Wishlist

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
4.5 (47 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
704 students enrolled
Created by Laurence Svekis
Last updated 3/2017
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 14 Articles
  • 10 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create a custom website with a shopping cart
  • Create multiple page websites that can store products within a shopping cart
View Curriculum
  • 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.

Who is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
54 Lectures
Introduction to creating a front end shopping cart
2 Lectures 09:55
Build a jQuery Shopping cart
15 Lectures 01:14:10

Source Code Default HTML template

Create Product add event listener

Use data attributes to pass values to jQuery

Source Code Event listeners and Data Attributes

Update add more products

Create Shopping cart object array

Loop Through Items in the array jQuery

Add items increase quantity in the shopping cart

Add session storage and parse JSON

Use Session Storage to update array object values

Create Shopping Cart output

How to Display Cart items and totals

Output dollars in currency format

Source Code Storage Shopping Cart
Create Bootstrap Ecommerce Website with shopping cart
17 Lectures 01:38:45
UX add Bootstrap classes

Shopping cart dialog window popup

Create a bootstrap table

Bootstrap 4 Tables

Add Checkout Buttons

Add Bootstrap Grid

Add Cards update Bootstrap styled items

Add Bootstrap NavBar

More Bootstrap Styling

Create Page Footer

Source Code Products.html

Create Checkout page

Create Paypal Checkout Form

Adding event listeners update quantity

Tweaking output quantities

Complete Shopping Cart Checkout to Paypal

Source Code Checkout to Paypal checkout.html
Bootstrap Website Building and styling
11 Lectures 36:01
Create Mulitple page website

Create About.html page

Source Code About.html

Create Index.html Carousel

Source Code Index.html

Overview products.html

Source Code Products.html

CSS Source Code

Summary overview of JavaScript

Source Code JavaScript

Course Resources
Source Code Tweaks asked for by students
9 Lectures 35:01
Update intro and thanks

Shopping Cart Updates

Adding Remove button making event listener

remove object from array

Update Checkout of shopping cart

Checkout Zero Quantity Remove

Source Code for products.html

Source Code for checklist.html

Source Code
About the Instructor
Laurence Svekis
4.2 Average rating
14,276 Reviews
314,341 Students
188 Courses
Instructor, 18+yrs Web Experience

I'm here to help you learnachieve your dreams, come join me on this amazing adventure today

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998.  I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides."

"Learning, understanding with a strong passion for education.  The internet has provided us with new opportunities to expand and share knowledge."

Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online.  Technology connects us all in many ways.  It opens up doors to those who embrace it and learn how to make those connections real.

"My courses are designed to help you achieve your goals, learn and update skills"

Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications.  Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO

"Understanding technology provides a means to better connect with users.  It also opens so many doors.   Knowledge is the key to success and I want to help you experience what technology has to offer. I'm passionate about web technologies, and look forward to sharing my knowledge and experience with you!"