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

Поделиться
HTML-код
  • Опубликовано: 6 июл 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

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

  • @ThapaTechnical
    @ThapaTechnical  3 месяца назад +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!

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

      MySQL post plz

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

      ​@@Siddhakumbhar12
      Source code some files missing

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

      E commerce website files are missing

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

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

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

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

  • @AmanKumarSinhaOfficial
    @AmanKumarSinhaOfficial 3 месяца назад +105

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

  • @user-qp3kb9yo6g
    @user-qp3kb9yo6g 3 месяца назад +8

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

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

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

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

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

  • @guricreation2192
    @guricreation2192 3 месяца назад +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 Месяц назад +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 3 месяца назад +2

    Thank you so much for this awesome project sir ❤😊

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

    This course is really awesome 😎🆒

  • @Vortexo07
    @Vortexo07 2 месяца назад +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 🙏

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

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

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

    Amazing work sir ❤

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

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

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

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

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

    Thank you so much Thapa sir 🤩🤩

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

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

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

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

  • @mhhamzaedits
    @mhhamzaedits 3 месяца назад +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

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

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

  • @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.

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

    the CSS file you gave is different from this project it's not working all selector names are wrong or different from yours can you give me the right link sir.

  • @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

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

    Kindly sir you are back with an interesting project

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

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

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

    Just loved the creation of the products section using Templates

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

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

  • @umangpatel158
    @umangpatel158 25 дней назад

    Bro can we use node js to add login page to this project please reply.

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

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

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

    thanku so much sir, for amazing project

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

    Really great project😎😎The website looks cool

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

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

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

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

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

      @@ThapaTechnical Hmm

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

    Thankyou sir👌

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

    You are great ❤

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

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

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

    sir hats off
    thankyou 🙏🙏❤️

  • @user-kk7wq3ij1y
    @user-kk7wq3ij1y 3 месяца назад +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

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

    Sir everything is best but Your coding skill

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

    Boom ! 💥💥 you are awesome sir 😊😎😎

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

    Thanku Thanku sirrrrr💓💓💓💓

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

    In last when you include all the html files but for me JS file not working what i do now??

  • @amitsingh-gz5im
    @amitsingh-gz5im 2 месяца назад

    hello Thapa sir, mai ne bhi same website bana ke netlify pe host kiya hai but mai home page se dure page nai ja pa raha hai kay problem ho sakta hai kuch help kar sakte hai aap.

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

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

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

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

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

    Next course wating❤

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

    Hey, I have a question.. do we have to remember all the steps? Like for “function for displaying product containers” , I have to remember all the steps?

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

      I don't think anyone can remember all the steps, Sir himself has opened the code on another PC

  • @Israrfacts-oo2up
    @Israrfacts-oo2up 11 дней назад

    Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.
    type="module" likne k baad yeh error arha hai yeh q arha hai.??

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

    Great🎉

  • @RubyBhat-vu8ft
    @RubyBhat-vu8ft 8 дней назад

    ThankYou Sir

  • @Intezaar6819
    @Intezaar6819 3 месяца назад +9

    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

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

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

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

    sir you are my inspiration❤❤

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

    You are Awesome👍.

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

    Awesome project 🎉🎉🎉🎉

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

    What is the diff between react js project vs dev Vita project

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

    thapa vaiya you are my idol🥰🥰 Love from bangladesh

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

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

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

    Bhai you are great ❤❤

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

    Awesome course

  • @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😢

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

    from pakistan "world Best JS Course"
    🙋‍♂

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

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

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

    Incredibly ❤

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

    awesome course

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

    Hello sir, navigation bar ki CSS work ni kr rhi inline block mein nhi hai

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

    thank you sir

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

    sir event and local storage folder not available in source code of world best js course. Please check once.

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

    Thapa is still the perfect for react.

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

    Everything is Ok But Cann't access the pdf file
    I hope you will solve this problem soon

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

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

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

    Sir please add event and local storage folder in js course part 1 which you taught on part 2 video of js course and it is missing in full starter file

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

    What did he used for database

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

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

  • @m.salmanraja2227
    @m.salmanraja2227 2 месяца назад

    Koi batay ga yeh konsa theme hai vs code ka??

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

    how to add payment gateway sir so that people can buy the product on the website ?

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

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

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

    Jarur banaunga

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

    Good job

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

    World Best PHP and my SQL series please

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

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

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

    Sir aapne ye images kaha se liye he plz bataye .......
    ya koi source hi bataye

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

    well done bro

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

    Waiting for World best Bootstrap and Tailwind Course

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

    Bhaiya host krne ke baad products section wale images show ni ho rhe hai aur local host me show ho rhe hai
    Please help me

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

    Waiting for world best React js course.

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

    Create more projects related to js plz sir❤❤

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

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

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

    Kya bat hai thapa bhai🥳🥳🤝🤝

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

    superb

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

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

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

    e commerce website banane ke liye is type ki images kahan se milengi?
    plz help me...😞

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

    Sir , please upload PHP basic to advanced video

  • @NEON.1O11
    @NEON.1O11 3 месяца назад

    what coming next in web dev series do you have like the levels and if you dont mind could you please share whats in your mind

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

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

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

    bhai iska tailwind css waala version bhi leke aao please

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

    Let's start❤❤

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

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

  • @manahil-45678
    @manahil-45678 Месяц назад

    Agar buy karna hobto is web par wo page kase bannaye

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

    NiCe videO ❤

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

    Sir we are waiting for react js series ❤❤

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

    Sir isme payment gateway add kaise kare

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

    Thanks for this hard work ❤❤❤❤

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

    Finally released ❤