Build Complete Ecommerce Website using HTML CSS & JavaScript in Hindi🔥Logic Building + Free Notes💝

Поделиться
HTML-код
  • Опубликовано: 15 июл 2024
  • 🚀 Build Complete Ecommerce Website using HTML CSS and JavaScript in One Video in Hindi 🎉
    -------------------------------------------------------
    📢 Checkout our world best JavaScript Course Part 1 & 2 👇
    ⭐️ JavaScript Basics Course Part 1: • JavaScript Full Course...
    ⭐️ JavaScript Advanced Course Part 2: • JavaScript Advanced fu...
    📢Get all my RUclips Videos Source Code at only 199₹ : thapatechnical.shop/source-code
    📢Get your premium complete ecommerce website source code at no cost (Free) :👉www.thapatechnical.com/2024/0...
    -------------------------------------------------------
    Welcome to our Final part 3 of Complete JavaScript Course Tutorial for Beginners in Hindi, where you'll master How to build a fully responsive multipage Ecommerce website from scratch and the art of building logics on how to solve JavaScript problems while build websites. Whether you're a beginner or a seasoned coder, this one-stop JavaScript tutorial has you covered.
    --------------------------------------------------------
    Before Learning JavaScript, Don't forget to watch 👇
    🔥🚀 Watch Best HTML Course 👉 • HTML Complete Tutorial...
    🔥🚀 Watch Best CSS Course 👉 • Complete CSS Tutorial ...
    --------------------------------------------------------
    🔗🌟 Play Quizzes, Get Premium Source Code & Notes at no cost 👉 thapatechnical.shop/courses/c...
    Can't access the link above? No worries! Get your Source Code & Starter Files here 👇
    👉 www.thapatechnical.com/2024/0...
    ------------------------------------------------------
    🎁 Hostinger Servers Exclusive Offers🎁
    Click here to Buy India Best Hosting 👉 www.hostinger.com/thapa7
    For Thapa Family 💥 Use the discount code THAPA7 to get Extra 10% OFF!
    -----------------------------------------------------
    ✌️ Become Member, get access to perks, free Source code, & more..
    / @thapatechnical
    🚀 Check my Instagram to Connect with me: / thapatechnical
    🗨️ Discord Server Link for Programmer to Hangout: / discord
    -----------------------------------------------------
    ⌚ TIMELINE ⌚
    0:00 - Introduction to E-commerce Website
    1:40 - Key Highlights
    4:50 - Prerequisites for Building an E-commerce Website
    5:40 - Maximizing Your Learning from the Video
    6:40 - Introduction to Vite, the Frontend Build Tool
    9:30 - In-Depth Overview of the Project
    17:22 - Thapa Technical Source Code Sale
    18:52 - Obtaining the E-commerce Style.css File
    19:50 - Installing Vite in VSCode for Building the E-commerce Project
    24:55 - Understanding the Vite Folder Structure
    29:55 - Exploring the index.html File of the E-commerce Project
    31:10 - Adding style.css File to the E-commerce Project
    33:10 - Creating a Navbar
    42:12 - Adding Add to Cart Button in Navbar
    45:55 - Hero Section
    50:30 - Remaining Sections of the Home Page
    1:02:30 - Footer for the Home Page
    1:04:20 - Creating Dynamic Cards in JavaScript
    1:05:40 - Template Elements in HTML for Dynamic Cards
    1:21:30 - Displaying Dynamic Product Cards Using JavaScript
    1:45:25 - Function to Increment and Decrement Product Card Quantity
    2:07:20 - Function to Add Products to Local Storage
    2:28:50 - Updating Cart Value on Navbar Icon
    2:32:40 - Handling Existing Add to Cart Products
    2:57:10 - Creating the Add to Cart HTML Page
    3:05:50 - Function to Retrieve Product Data from Local Storage
    3:16:00 - Function to Display Add to Cart Products in UI
    3:20:30 - Function to Retrieve Original Price and Quantity Data from Local Storage
    3:28:10 - Function to Remove Products from Add to Cart Page
    3:38:15 - Function to Increment and Decrement Quantity and Price on Add to Cart Page
    3:59:05 - Error Resolution
    4:00:05 - Updating Total Product Price in Add to Cart
    4:12:10 - Adding Toast Notification to E-commerce Project
    4:20 - Creating About, Product, and Contact Pages for E-commerce
    4:23:30 - Adding Dynamic Footer to All Pages
    4:26:30 - Implementing Responsive Layout
    4:27:30 - Building the E-commerce Project in Vite
    4:29:40 - Configuring Vite Navigation
    4:35:10 - Hosting the E-commerce Website Live
    4:46:40 - Conclusion

Комментарии • 283

  • @ThapaTechnical
    @ThapaTechnical  4 месяца назад +29

    Finally, Our World Best JavaScript Course is finally Complete 🔥🔥 If you love the video plz LIKE SHARE & SUBSCRIBE 💝💝
    📢 Checkout our world best JavaScript Course Part 1 & 2 👇
    ⭐ JavaScript Basics Course Part 1: ruclips.net/video/13gLB6hDHR8/видео.html
    ⭐ JavaScript Advanced Course Part 2: ruclips.net/video/YwsOCN8woA8/видео.html
    📢Get all my RUclips Videos Source Code at only 199rs : thapatechnical.shop/source-code
    📢Get your premium complete ecommerce website source code at no cost (Free) :👉www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html
    --------------------------------------------------------------------------------------------------
    Before Learning JavaScript, Don't forget to watch 👇
    🔥🚀 Watch Best HTML Course 👉 ruclips.net/video/5ccq_nLHneE/видео.html
    🔥🚀 Watch Best CSS Course 👉 ruclips.net/video/MSICFljRcb4/видео.html
    --------------------------------------------------------------------------------------------------
    👉 Updates Section: I'll provide you with updates below regarding any issues we encounter in our video
    📢 Update for March 12th: If you notice that the total price section doesn't change when removing items from the cart, simply add the "updateCartProductTotal()" function in our "removeProdFromCart.js" file. It's a simple fix😅Apologies for missing this step in the video. Otherwise, everything is working great, and if any issues arise, I'll keep you updated. Also, I've already shared the updated code on GitHub. Thanks for your understanding!

    • @techpukhraj
      @techpukhraj 4 месяца назад

      ​@user-pb8xi7nq3p
      Source code some files missing

    • @techpukhraj
      @techpukhraj 4 месяца назад +3

      E commerce website files are missing

    • @techpukhraj
      @techpukhraj 4 месяца назад +1

      E commerce website files are not complete there are some files missing

    • @Mr_Dimension
      @Mr_Dimension 4 месяца назад +1

      @ThapaTechnical is there any backend database connection or not? So that admin can see the registered user, orders?

    • @RishiRajxtrim
      @RishiRajxtrim 4 месяца назад +1

      🙂👍

  • @AmanKumarSinhaOfficial
    @AmanKumarSinhaOfficial 4 месяца назад +106

    Waiting for World Best React JS series... ❤❤

  • @meditzz143
    @meditzz143 3 месяца назад +7

    world best js course ✖ world best js course,teacher,channel ✔

  • @user-qp3kb9yo6g
    @user-qp3kb9yo6g 4 месяца назад +9

    Thank you so much Thapa sir for the world best javascript course😊😊

  • @monstergamingtelugu2894
    @monstergamingtelugu2894 2 месяца назад +2

    This is best course in RUclips with beautiful presentation. Thank you brother

  • @guricreation2192
    @guricreation2192 4 месяца назад +12

    Sir abhi mera part -1 complete hua h bahut badiya explain kiya h aapne. Part -2 ke baad dekhta hu m or fir khud e commerce site bnauga ❤❤❤ aap bahut bdiya teacher ho sir

  • @shraddhagore5907
    @shraddhagore5907 2 месяца назад +1

    Thank you so much for creating this tutorial. I was looking for a functional, dynamic website & only your video had what I needed.

  • @vijendrasharma1375
    @vijendrasharma1375 4 месяца назад +2

    Thank you so much for this awesome project sir ❤😊

  • @awesomeguy6427
    @awesomeguy6427 4 месяца назад +1

    Bas thapa ab ek node js ka intezaar hai please ekdm tagda project ke saath.

  • @sonalkiknowledge8999
    @sonalkiknowledge8999 2 месяца назад

    Amazing Video! Great Work! Appreciated Sir, Best for beginers to Learn Javascript and get idea about these things how they work.

  • @user-ge5ll5fz7x
    @user-ge5ll5fz7x Месяц назад

    Salute to sir, waiting for react course, please provide video of react in new format, like your new html, css, and js world best course

  • @user-vt3fe9gy7t
    @user-vt3fe9gy7t 4 месяца назад

    Thanku Thanku sirrrrr💓💓💓💓

  • @user-zc5ng9ey7g
    @user-zc5ng9ey7g Месяц назад

    Hello Thapa Sir!
    I hope my comment / message will find you well. I'm a beginner in Web Development from Pakistan. Recently i had good need of learning JS and for that i short listed several playlists of Indian RUclipsrs. After watching all the playlists i am telling you that your way of teaching furthermore your delivered concepts about JS moreover the outline of this course and numerous of other things i other things i observed in your JS whole course(Part 1 to 3) is extraordinary along with that completely helpful for each and every beginner who has a passion in itself to achieve something big. Sir now i'm going to learn React.js from your channel and after that InshaAllah i'll also learn MERN Stack form your channel. Sir please i requested to you that never be disappoint that someone appreciate you or not. Your efforts for your students is paid off. Keep bringing these sort of courses for your many students like me.
    Before learning JS i learned HTML and CSS from an institute by taking physical classes but after learning JS from you i'll learn again HTML and CSS from your channel because i know that you have taught those courses just like your JS course (too much conceptual).
    I'll highly recommend to every learner of JavaScript that you should check out this course at least once and i guarantee you that if you watch it 1 time, you will watch all 3 parts of this course because Thapa Sir designed this course from EcmaScript 2015 to 2023 which is really up to date. So the moral of my message is that noe every of learner of JavaScript can easily learn all the old topics to new topics by exploring this course.
    Again Thank You so much Sir Vinod Bahadur Thapa. May Allah bless you a good, healthy and long l9ife with lots of happiness.

  • @satishchaudhari1255
    @satishchaudhari1255 4 месяца назад +2

    Amazing work sir ❤

  • @6.squash.936
    @6.squash.936 4 месяца назад +1

    Thank you so much Thapa sir 🤩🤩

  • @ranahussnainali295
    @ranahussnainali295 4 месяца назад +1

    Thanks for creating amazing Front end course please create new PHP and my SQL course

  • @mhhamzaedits
    @mhhamzaedits 4 месяца назад +5

    Thapa bhai vite React JS ka bhi world best course chahiye ❤❤ Kya aap ye Task Complete karenge , Love from Rural Uttar Pradesh 😊 Thapa bhai humko mini project jyada chahiye taki besic understanding level badhe

  • @muhammadhassangaming4752
    @muhammadhassangaming4752 Месяц назад

    Level ha sir ap ka ❤ , or ap ka samjanay ka 😊❤🎉🎉

  • @user-dv1nc2cp6b
    @user-dv1nc2cp6b 4 месяца назад +3

    This course is really awesome 😎🆒

  • @mohsanqureshi9650
    @mohsanqureshi9650 4 месяца назад +1

    Part 1 complete hgya ab part 2 ki Bari
    TT 💓 plzz react Ka b course bnani bro
    Love from Pakistan ❤️

  • @Asim_Ali4857
    @Asim_Ali4857 4 месяца назад

    Kindly sir you are back with an interesting project

  • @edsHTML
    @edsHTML 4 месяца назад

    Really great project😎😎The website looks cool

  • @Ashay39
    @Ashay39 4 месяца назад

    Just loved the creation of the products section using Templates

  • @MdAZAD-ck8bf
    @MdAZAD-ck8bf Месяц назад

    thanku so much sir, for amazing project

  • @souravsarkar-mu8hq
    @souravsarkar-mu8hq 4 месяца назад +1

    You are great ❤

  • @BeymOsman_edits
    @BeymOsman_edits 4 месяца назад

    Awesome project 🎉🎉🎉🎉

  • @X_PHENOMENAL001
    @X_PHENOMENAL001 4 месяца назад +1

    Thankyou sir👌

  • @l_am_genius
    @l_am_genius 4 месяца назад

    Boom ! 💥💥 you are awesome sir 😊😎😎

  • @malikahmadprince287
    @malikahmadprince287 4 месяца назад +1

    sir hats off
    thankyou 🙏🙏❤️

  • @AmanKumarSinhaOfficial
    @AmanKumarSinhaOfficial 4 месяца назад +2

    Bhai we want part 2 with php backend

  • @shooter8262
    @shooter8262 4 месяца назад

    Next course wating❤

  • @javascriptmastery2493
    @javascriptmastery2493 4 месяца назад +1

    Great🎉

  • @WaqasKhan-xy9nq
    @WaqasKhan-xy9nq 4 месяца назад

    You are Awesome👍.

  • @ranatariq8638
    @ranatariq8638 4 месяца назад

    What a wonderful and amazing technique used... Method is so much impressive
    None of other like you . Thank you so much Sir

  • @9hourfun
    @9hourfun 4 месяца назад

    Sir everything is best but Your coding skill

  • @Krishna11409
    @Krishna11409 4 месяца назад

    Bhai you are great ❤❤

  • @user-hz4rg6pw2r
    @user-hz4rg6pw2r 4 месяца назад

    Thank you Sir

  • @Intezaar6819
    @Intezaar6819 4 месяца назад +10

    Bhaiya plzzzz mern stack ka full course upload kr do plzzzz it's my humble request

    • @bestproductsamazon8744
      @bestproductsamazon8744 3 месяца назад

      Devin aa gya hai koi faayda nhi

    • @Podcasto7682
      @Podcasto7682 2 месяца назад

      Abhito Devin ka popot hogaya hai ab kya bologe
      ​@@bestproductsamazon8744

  • @v2factsandupdates327
    @v2factsandupdates327 4 месяца назад

    Awesome course

  • @safayetthe1savage608
    @safayetthe1savage608 4 месяца назад

    This is called quality content ❤
    No one can make content like this❤
    Respect bhai✨❤️

  • @BhaktiTone
    @BhaktiTone 4 месяца назад +4

    3rd Comment. Thank You So Much For this, I Was Eagerly Waiting For this. Thank You ❤🎉

    • @ThapaTechnical
      @ThapaTechnical  4 месяца назад +1

      Plz share with your friends on all social networking sites too ok 💝

    • @BhaktiTone
      @BhaktiTone 4 месяца назад +2

      @@ThapaTechnical Hmm

  • @user-kk7wq3ij1y
    @user-kk7wq3ij1y 4 месяца назад +5

    Sir the js course was actually so amazing we are glad that we finded you on RUclips ❤❤.......sir did you can post PHP course too 👀

    • @gaming_with_raza7867
      @gaming_with_raza7867 2 месяца назад

      Go with Mern Stack
      No I am not hater of php I also worked in php as beginner .
      But you go for large projects it's hard to find in RUclips and Not everyone tell advance php. So I should suggest you to Move On Mern Stack

  • @chandan_mishra18
    @chandan_mishra18 4 месяца назад +1

    Thank you so much sir for this awesome Javascript project you do lot for us thankyou sir❤

  • @fdkgamer3631
    @fdkgamer3631 4 месяца назад

    Incredibly ❤

  • @shooter8262
    @shooter8262 4 месяца назад

    Finallly finally ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉

  • @xyonxyt9170
    @xyonxyt9170 3 месяца назад

    waitting for world best react crashcourse like 2021 js crashcourse jisko dekhne se fulll react cover ho jayega

  • @asadrehan7788
    @asadrehan7788 4 месяца назад

    sir you are my inspiration❤❤

  • @MalikWebStack
    @MalikWebStack 3 месяца назад

    thanku so much for making project with Pure javaScript instead of reactjs. bcz i want to build my core fundamental. thanks for Pure Javascript Project.❤❤ everyone is making project with react and as a beginner i don't related from those video. thanks to understand need of beginner.

    • @AakashSingh-ge6nj
      @AakashSingh-ge6nj 3 месяца назад

      Bro did you completed this project

    • @MalikWebStack
      @MalikWebStack 3 месяца назад +1

      @@AakashSingh-ge6nj i wish i would have completed but no😢

  • @viralbd4021
    @viralbd4021 Месяц назад

    thapa vaiya you are my idol🥰🥰 Love from bangladesh

  • @codingtutorials3924
    @codingtutorials3924 4 месяца назад

    awesome course

  • @AakashSingh-ge6nj
    @AakashSingh-ge6nj 4 месяца назад

    Thank you so much Thapa bhai for the world best javascript course

  • @Ayushkumar79999
    @Ayushkumar79999 4 месяца назад

    thank you sir

  • @mr_affan15
    @mr_affan15 3 месяца назад +2

    Gajab bhai definitely isko banunga , thanks but payment integration hai ismei??

  • @studymaterialinfo
    @studymaterialinfo 4 месяца назад

    Kya bat hai thapa bhai🥳🥳🤝🤝

  • @pkyadav6230
    @pkyadav6230 4 месяца назад

    Jarur banaunga

  • @KishanHingu
    @KishanHingu 3 дня назад

    You Are Awsome sir Thanks For Your Support 😊😊

  • @codeVithSk
    @codeVithSk 4 месяца назад

    well done bro

  • @user-fz4lo7to1e
    @user-fz4lo7to1e 4 месяца назад

    Good job

  • @mohitashliya8750
    @mohitashliya8750 4 месяца назад

    Thapa is still the perfect for react.

  • @karak-4
    @karak-4 3 месяца назад

    sir plz make a full A to Z Shopify like E-commerce website 🙏🙏

  • @anwarbakkar
    @anwarbakkar 3 месяца назад

    from pakistan "world Best JS Course"
    🙋‍♂

  • @jitendrashivgan545
    @jitendrashivgan545 4 месяца назад

    Sir aise hi 4-5 project karavdo that using react and tailwind plz we have to need this project

  • @stockmarketoutlook1948
    @stockmarketoutlook1948 3 месяца назад

    superb

  • @Alamshaikh86
    @Alamshaikh86 4 месяца назад

    Bhai ji es look me bahut achhe lagte ho aisa hi look rakha karo

  • @user-fz4lo7to1e
    @user-fz4lo7to1e 4 месяца назад

    Finally released ❤

  • @Faizan_Iqbal07
    @Faizan_Iqbal07 4 месяца назад

    NiCe videO ❤

  • @usamausman5225
    @usamausman5225 4 месяца назад

    Waiting for world best React js course.

  • @seomarketing5042
    @seomarketing5042 4 месяца назад

    Waiting for World best Bootstrap and Tailwind Course

  • @ranahussnainali295
    @ranahussnainali295 4 месяца назад +1

    World Best PHP and my SQL series please

  • @user-kh1up1uu9v
    @user-kh1up1uu9v 4 месяца назад

    Create more projects related to js plz sir❤❤

  • @Vortexo07
    @Vortexo07 3 месяца назад +2

    Sir, I've been facing a problem...I've made an e-commerce site with the help of your video using vite...
    But upon running "npm run build" -> "npm run preview" the 4173 webpage isn't showing the images on product cards...
    What could be the reason?!
    I really appreciate your help 🙏

  • @sanjinaafrinesha8262
    @sanjinaafrinesha8262 3 месяца назад

    first of all ,it's an awesome project..please add backend to the project with laravel

  • @asmita0403
    @asmita0403 3 месяца назад

    Amazing content 💛💛💛

  • @BilalKhan-qj1vb
    @BilalKhan-qj1vb 4 месяца назад

    Waiting for React Js ❤

  • @user-or6of3ih8p
    @user-or6of3ih8p 4 месяца назад

    Boom guys❤

  • @user-jp9jd6el1f
    @user-jp9jd6el1f 2 месяца назад

    Waiting for World's best react course

  • @rafialmasud7737
    @rafialmasud7737 4 месяца назад +1

    Thanks You Sir, I am watching from Bangladesh, reply please

  • @m.r.powery.t.8058
    @m.r.powery.t.8058 4 месяца назад

    Sir , please upload PHP basic to advanced video

  • @muhammadmansoor7425
    @muhammadmansoor7425 4 месяца назад

    Waiting for next js project base tutorial

  • @Coder856
    @Coder856 4 месяца назад

    Sir we are waiting for react js series ❤❤

  • @monikakumari3043
    @monikakumari3043 4 месяца назад +2

    Let's start❤❤

    • @ThapaTechnical
      @ThapaTechnical  4 месяца назад +2

      Plz share with your friends on all social networking sites too ok 💝

  • @AvmsTech
    @AvmsTech 4 месяца назад

    Thank You So Much 🙏🏻❤❤❤❤

    • @ThapaTechnical
      @ThapaTechnical  4 месяца назад +1

      Welcome, Plz share with your friends on all social networking sites too ok 💝

    • @AvmsTech
      @AvmsTech 4 месяца назад

      @@ThapaTechnical G Bilkul Q nahi

  • @user-gm5ko4yl9d
    @user-gm5ko4yl9d 3 месяца назад

    sir kindly make a video on how to integrate payment method in ecommerce

  • @harshmaniar4068
    @harshmaniar4068 3 месяца назад

    Please add the functionality for the Payment Getway (STRIPE ) System

  • @RASHMISINGH-re8yi
    @RASHMISINGH-re8yi 4 месяца назад

    Waiting for world best react is couse

  • @connecthamzathemes4393
    @connecthamzathemes4393 4 месяца назад

    React py bhi banao bro..

  • @HafizumarFarooq-gt4ue
    @HafizumarFarooq-gt4ue 4 месяца назад

    Thanks for this hard work ❤❤❤❤

  • @user-bb7mx1lx4h
    @user-bb7mx1lx4h 4 месяца назад

    Please start Next js series sir ❤❤❤❤❤❤❤❤❤❤

  • @murliengineering6130
    @murliengineering6130 3 месяца назад

    Sir angular ka bhi ek course banaye

  • @csstudent624
    @csstudent624 4 месяца назад

    Sir waiting for nodejs series

  • @arunguttedar.00
    @arunguttedar.00 2 месяца назад

    Waiting for world best react js

  • @mahendrasingh-oq2jr
    @mahendrasingh-oq2jr 4 месяца назад

    Sir, please make world best React JS series next... 🙏

  • @WebDevXpert
    @WebDevXpert 3 месяца назад

    Responsive Payment Gateway Form Design using HTML & CSS : ruclips.net/video/vxl8NZoc5WU/видео.html

  • @beins6068
    @beins6068 4 месяца назад

    Please start react js series 😊

  • @codedjango
    @codedjango 4 месяца назад +2

    bhai iska tailwind css waala version bhi leke aao please

  • @ramakrishnaboyapati9930
    @ramakrishnaboyapati9930 2 месяца назад

    What is the backend you have used? Can we use appwrite database with this project? Please reply.

  • @hinata1066
    @hinata1066 4 месяца назад

    You really did hard work ❤❤❤

    • @ThapaTechnical
      @ThapaTechnical  4 месяца назад

      Thank You Hinata.. Say Hi too Naruto from my side ok..

  • @w3bpiyush_
    @w3bpiyush_ 4 месяца назад

    World Best React Js Soon ❤

  • @sujalkids
    @sujalkids 4 месяца назад

    Sir we want php lesson also from you

  • @ABHISHEKKUMAR-wt1pw
    @ABHISHEKKUMAR-wt1pw 4 месяца назад

    Sir bus react pe bhi video layia