Build and Deploy Ecommerce Website Using HTML CSS JavaScript | Ecommerce Website Part 6

Поделиться
HTML-код
  • Опубликовано: 12 июн 2024
  • Learn How To Make Full Responsive Ecommerce Website Using HTML CSS & JavaScript. This is a free HTML CSS Course. And in this course we will learn how to build and deploy a full multipage ecommerce website completely from scratch step by step.
    Why This Course?
    - Responsive Ecommerce Website Tutorial Using HTML CSS & JavaScript.
    - Completely For Beginners.
    - Multipage Ecommerce Website Project.
    - Best Beginner Friendly Free Course On RUclips.
    - Learn How to build amazing professional and responsive websites.
    - Learn the fundamentals of web design.
    - Modern CSS, including flexbox and CSS Grid for layout.
    - Modern CSS techniques to create stunning designs and effects.
    - How to use common components and layout patterns for professional website design and development.
    - Advanced responsive design using media queries.
    - And Many More.
    Part5: • Build and Deploy Ecomm...
    Part7: What should I create? Comment Below.
    Images: github.com/tech2etc/Build-and...
    Source Code 1: www.buymeacoffee.com/tech2etc...
    Source Code 2: ko-fi.com/s/06e4db9e09
    Certificate: tech2etc.com/web-design-html-...
    Icons: fontawesome.com/
    Fonts: fonts.google.com/
    Recommended Course:
    Multipage Responsive Ecommerce Website With Bootstrap HTML CSS & JAVASCRIPT:
    cutt.ly/8Uqt5MQ
    Multipage Responsive Online Course/LMS Website HTML CSS & JavaScript:
    cutt.ly/7UqyeiR
    All Source Codes: www.buymeacoffee.com/tech2etc
    ⛔❌Do Not CLICK This Link: bit.ly/3lJLyLY
    Need any help? Join my Discord: / discord
    ⭐️ Merch ⭐️
    👕 Merchandise: tech2-etc.creator-spring.com
    If you enjoyed this video, then please please 👍LIKE and SUBSCRIBE this channel & press the bell icon for future videos.
    Thank you.
    =============
    SUPPORT ME 💪
    =============
    🎁 Support and Buy Me A Coffee for exclusive episodes, discord and more!
    www.buymeacoffee.com/tech2etc
    🎀 Donate Me By Paypal: www.paypal.com/paypalme/tech2etc
    ==========================
    Free Course to Improve Your Skills
    ==========================
    ✅ WordPress Insider:
    • WordPress Tutorial
    ✅ Learn Bootstrap With Projects:
    • Bootstrap Website Tuto...
    ✅ Web Development For Beginners:
    • Learn Web Design & Lea...
    ✅ Responsive Web Design With Projects:
    ruclips.net/user/Tech2etcpl...
    ✅ Learn JavaScript With Projects:
    • JavaScript Projects Fo...
    ✅ Learn Python With Projects:
    • Python Projects
    ===============================
    Connect with me & get daily updates👇
    ===============================
    Discord: / discord
    Instagram: / fahimulkabir.tech2etc
    Twitter: / tech2etc
    LinkedIn: / fahimulkabirchowdhury
    Group: / 14295322
    FB (Personal): / mdfahimulkabir
    FB Page: / tech2etc
    Timestamps:
    0:00 Intro
    1:44 Create Shopping Cart HTML File
    3:01 Navbar
    3:36 Product Details Table
    7:32 Style Product Details Table
    14:01 Apply Coupon & Cart Total
    16:55 Style Coupon & Cart Total
    22:45 Responsive CSS Media queries
    26:27 Final Responsive Preview
    #ecommerce_htmlcss #ecommerce_tutorial #multipage

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

  • @Tech2etc
    @Tech2etc  2 года назад +58

    Guys, Hope You are enjoying this course 💥
    Please HIT the SUBSCRIBE Button 👊 & Help me to reach 200k Subscribers Goal ❤
    Check more free courses in the channel ▶
    Timestamps:
    0:00 Intro
    1:44 Create Shopping Cart HTML File
    3:01 Navbar
    3:36 Product Details Table
    7:32 Style Product Details Table
    14:01 Apply Coupon & Cart Total
    16:55 Style Coupon & Cart Total
    22:45 Responsive CSS Media queries
    26:27 Final Responsive Preview

    • @monishsoni27
      @monishsoni27 2 года назад +2

      Don't provide source code but you can atleast provide images for free it would be helpful

    • @Tech2etc
      @Tech2etc  2 года назад +3

      @@monishsoni27 Images are always free.

    • @skeeterstudies8109
      @skeeterstudies8109 2 года назад +2

      No login page sir

    • @kaoutharelfarissi3452
      @kaoutharelfarissi3452 2 года назад

      Don't provide source code but you can atleast provide images for free it would be helpful

    • @Tech2etc
      @Tech2etc  2 года назад +1

      @@kaoutharelfarissi3452 all of the images of any tutorials in my channel are always free.

  • @saurabhbelekar5431
    @saurabhbelekar5431 2 года назад +306

    Part 7 should be add database to the backend to store user data

    • @nv3796
      @nv3796 Год назад +22

      Login feature too

    • @bloomyredwood2279
      @bloomyredwood2279 Год назад +10

      please do this! My tutor said this was vital to know.

    • @linnaloch2003
      @linnaloch2003 Год назад +20

      Yes, I hope you make part 7 with database, part 8 with payment. So much thank and i really appreciate with your hard work.:)

    • @Squirreberus
      @Squirreberus Год назад +1

      true

    • @drakata27
      @drakata27 Год назад +6

      I dont think he will do it

  • @plex716
    @plex716 8 месяцев назад +3

    I have built websites before but never tried e-commerce, but after watching your video series I have managed to build a complete responsive e-commerce website. Thank you very much and keep the good work!

  • @Naveenbalani400
    @Naveenbalani400 Год назад +30

    Thank You, Sir.
    Waiting for part 7 on the backend database.
    The Series was fantastic.

  • @perfectInprada
    @perfectInprada 7 месяцев назад +6

    I would like to express my sincere gratitude. This entire course has been immensely helpful in improving my understanding of HTML, CSS, and JavaScript.

  • @yao_barna
    @yao_barna 2 года назад +44

    I am delighted with this tutorial, waiting for part 7 to start on back end! learning so much, thanks!

    • @Tech2etc
      @Tech2etc  2 года назад +18

      Thank you soo much. Stay connected.

    • @yao_barna
      @yao_barna 2 года назад +3

      @@Tech2etc already subscribed, hope for the next part of this tutorial. Best from Argentina!

    • @alessioperrone3907
      @alessioperrone3907 Год назад +11

      @@Tech2etc can u please do the back end too?

    • @buraxta_
      @buraxta_ Год назад +8

      @@Tech2etc we're waiting but the rest never came 😁

    • @Aryakhatri-gg3vk
      @Aryakhatri-gg3vk День назад

      @@Tech2etc I completed the whole course but I couldn't find code of script.js of sproduct.html to change mainimg and smallimg. I would be so thankful if you could tell which part is it in.

  • @rajnishsharma2410
    @rajnishsharma2410 8 месяцев назад

    this is a very amazing learn of the video for making Ecommerse website

  • @rahulsuryavanshi5373
    @rahulsuryavanshi5373 Год назад +3

    Thank you, Sir. Waiting for the backend part of this website.
    This was an excellent tutorial

  • @bernardwamalwa5331
    @bernardwamalwa5331 9 месяцев назад +2

    Am gratefull to you so much. After going through the whole course I now feel confident to dive into the job market. I could recommend that the next part be focused on the backend part. Thank you very much for sharing this amazing course.

  • @enricastanco4909
    @enricastanco4909 Год назад +8

    really useful! I think it would be very useful too, to see how to build the logic of an e-commerce with JavaScript, perhaps simulating a database! ☺

  • @forwambaa.elisha4724
    @forwambaa.elisha4724 2 года назад +5

    So amazing
    And so easy and understandable
    Part 7 should be focused on backend thanks
    Best RUclips channel

  • @namratadesai774
    @namratadesai774 11 месяцев назад +3

    This is an amazing series, please upload part 7.

  • @eduvoicevisionstudio5527
    @eduvoicevisionstudio5527 8 месяцев назад

    this is very amazing course i have learn a lot of thing from this please continue to backend ...

  • @hassan-ot1vt
    @hassan-ot1vt 11 месяцев назад

    This course was amazing. It gives handon experience. I really enjoyed this course and learnt a lot. Thanks for this amazing course.

  • @SnobbyLion
    @SnobbyLion 9 месяцев назад

    Thank you so much bro! I learned so much!

  • @aromakhan873
    @aromakhan873 Год назад +2

    It was amazing course, I learned so much.
    Please start with the backend and also payment option!

  • @yashhindustani1915
    @yashhindustani1915 Год назад

    Loved 😍 this series awesome course

  • @RIDDHIMARDIYA
    @RIDDHIMARDIYA 7 месяцев назад

    Thank You, Sir.
    I'm Waiting for part 7
    Plz a little soon

  • @idynamic2277
    @idynamic2277 Год назад +12

    You must need keep doing this serie man, really!
    You are really good, and Im thankful for all this videos. You are helping me a lot bro!
    Im excited for part 7, witch you should make the back-end, please.
    One more time, thanks for that!

  • @studyinsanity638
    @studyinsanity638 Год назад

    You have awesome teaching skills. Waiting for backend.

  • @afaqnoor2467
    @afaqnoor2467 11 месяцев назад

    Thank You so much SIR

  • @enockbohoussou7125
    @enockbohoussou7125 11 месяцев назад

    I really liked this course.

  • @jamestetteh-rt8ff
    @jamestetteh-rt8ff Месяц назад

    Thank you so much you really helped me

  • @rediet2494
    @rediet2494 9 месяцев назад

    I thank you so much for your hard work and free gift! Much respect and Blessing to you!!

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

    Thank you i appreciate it 🎉🎉🎉🎉

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

    Really precious videos pls keep on the other parts 💓

  • @elnurismaylov
    @elnurismaylov Год назад

    Thank you, u r best :)

  • @BM8643
    @BM8643 2 года назад +1

    I have seen your videos, it looks very good. Thank you very much, brother.

  • @vaibhavwadhavane874
    @vaibhavwadhavane874 Год назад

    thanks for sharing this

  • @Franck_Polla
    @Franck_Polla Год назад

    Thank very much bro

  • @anyasiuche5617
    @anyasiuche5617 Год назад +1

    Really Enjoying this series , am already feeling like a pro coding along. Honestly you are the best man. Thanks

    • @KiaraBlogs
      @KiaraBlogs Год назад

      Hi Anyasi, my code is not working. Did your code worked?

  • @NandishPS
    @NandishPS 9 месяцев назад

    It would be so amazing to have the backend part , You explained very well!

  • @Code_Kingdom999
    @Code_Kingdom999 9 дней назад

    Nyc project brother too coool

  • @fancyaristocrat7450
    @fancyaristocrat7450 Год назад

    You're awesome. Thank you very much.

  • @ShoaibUrRehman-ce7sw
    @ShoaibUrRehman-ce7sw 11 месяцев назад

    Thank you very much sir, I have learned a lot from your course.❤

  • @hamzanaseem2147
    @hamzanaseem2147 9 месяцев назад

    Thank you Sir you are a great person i enjoy the course and learn many thing in this course thank you and again Jazakallah❤

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

    Tnkieww sirr it's my frst project 🎉

  • @ych6472
    @ych6472 Год назад

    Please continue the other parts.Thank you

  • @mwansaworkouts1820
    @mwansaworkouts1820 2 года назад +2

    Thanks, I have learned a lot. The implementations of the backend will be highly appreciated.

    • @Tech2etc
      @Tech2etc  2 года назад

      Sure, I Will try that

  • @abdulrasheedaminu5809
    @abdulrasheedaminu5809 Год назад

    I really enjoy the video

  • @HammadRehman-zn9du
    @HammadRehman-zn9du 7 месяцев назад

    This series was very helpful 🙏❣
    Thank you so much ❤

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

    Thanks so much for your effort put on this. Liked and Comented and waiting for database!

  • @vloggingwitharslan1011
    @vloggingwitharslan1011 Год назад

    Nice work

  • @maramahmed7209
    @maramahmed7209 Год назад

    yeah please continue this serious cause I really enjoyed with this serious and it's really helpful thankyou😀

  • @salmaadel2933
    @salmaadel2933 5 месяцев назад

    thank you for this helpful series ☺

  • @mrGroot7
    @mrGroot7 9 месяцев назад

    Yes, I hope you make part 7 with database connectivity to backend, part 8 with payment. So much thank and i really appreciate with your hard work.:)

  • @YoutubiA-Open
    @YoutubiA-Open Год назад

    hy frend im very happy to watch your channel
    your video is very important to my
    tks four very things

  • @bossreaction8020
    @bossreaction8020 11 месяцев назад

    Thanks Bro this Kind of Information

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

    hey man ..i finished the course, ty ...But it will be nice a part 7 with the finished cart (this part is not properly implemented because the products are already in the card and not added by the customer) it will be nice a part 7 where Customer have a Add To Cart Button on all the products and abble to open a product to view it (and add it to cart ) ....when added to automaticaly put the price ,also when adding 5 or the same product to auto calculate the price in the card and total price, laso if we have like 1000 products in a product page mabe the customer want to add 20 products ,will be nice to make this in aprt 7 that java script code where customer adding alot products by ADD to Cart button ...also there is missing return to main page option(to index page) ty for all the effort you do for us !!

  • @feras1598
    @feras1598 Год назад

    Thanks for the series, this definetly helped me and motivated me to continue learning...

  • @AspirantswithShashi
    @AspirantswithShashi Год назад

    Awesome....You are really awesome brother...

  • @movieshotsyorker3711
    @movieshotsyorker3711 Год назад +1

    Brother It's Request,,, Please Upload Part 7 ,, Because I want to learn ,,, I think you are the best teacher who explain everything in very simple way. So please Upload Part 7

  • @JustXanderOne
    @JustXanderOne Год назад

    Thanks too much for your course ❤

  • @pratikburade5221
    @pratikburade5221 2 года назад +5

    Amazing, I enjoyed creating the website
    and the way of teaching whole section step-by-step, that was fantastic
    hop You will bring with some more content in future, that will help student like us.
    Extremely amazing
    Thank you for giving your precious time to help us

    • @Tech2etc
      @Tech2etc  2 года назад +1

      Thank you for watching this tutorial.

    • @pratikburade5221
      @pratikburade5221 2 года назад

      @@Tech2etc Can you connect it to a database?

    • @pratikburade5221
      @pratikburade5221 2 года назад

      Sir it will help us in our project
      Thank you sir

    • @Real-Fx
      @Real-Fx 2 года назад

      Please can u help me personal with my website

  • @androidgamers6276
    @androidgamers6276 Год назад +2

    part 7 please ...
    add a simple page animation
    add js to the cart and making it work
    add more js to the code when going through pages
    love your videos thanks man

  • @dasari5763
    @dasari5763 5 месяцев назад

    ❤❤❤ Thanks for your Efforts. Login Feature and Database Connectivity as like Real Time website. Please upload as soon as possible

  • @mohdfurkan6212
    @mohdfurkan6212 Год назад

    Please sir continue this playlist i need learn more about backend and data base please sir do that it's really helpful that you made that amezing tutorial..

  • @kooyaw4445
    @kooyaw4445 7 месяцев назад

    You just earned a subscriber

  • @___RoX___
    @___RoX___ Год назад

    yes please make the video, everyone on yt making only front end please show us how to setup data base to make website more real and web hosting also

  • @artikumbhar537
    @artikumbhar537 Год назад +1

    Thank you, Sir. This was an excellent tutorial. Waiting for the backend part of this website.

    • @Tech2etc
      @Tech2etc  Год назад

      Your most welcome. Please share this project on your social media. Will appreciate that.

  • @raotalha05
    @raotalha05 10 месяцев назад

    you have done very hard work for us please ad functionality indeed

  • @kaotharabalogun6056
    @kaotharabalogun6056 8 месяцев назад

    Thank you so much for such an explicit series, it guided me perfectly.
    I will like to ask if we need to create a single product page for all the products like you explained for the 1st product or if there is a better way to combine it.

  • @dheenadhayalan9516
    @dheenadhayalan9516 Год назад

    Thank you

  • @vedchaudhari6587
    @vedchaudhari6587 Год назад +1

    Pls create backend part !!! Your explanation is too awesome.

  • @sayanmukherjee1166
    @sayanmukherjee1166 Год назад

    Sir this course is amazing .. Hats off to your hard work and keep continue distributing your knowledge to us. Thank you sir ..

    • @Tech2etc
      @Tech2etc  Год назад

      Thank you so much. Please share this project on your social media. Will appreciate that.

  • @isaacdankwa4549
    @isaacdankwa4549 Год назад

    great tutorial. Very informing. Upcoming backened should include signup and payment options including mobile money payment

  • @chiranjeetsingh461
    @chiranjeetsingh461 16 дней назад

    Thank You, Sir
    Watting for Part 7

    • @User_dz-2
      @User_dz-2 4 дня назад

      hi bro send me src code plz

  • @raimamondal5977
    @raimamondal5977 Год назад

    you are great your videos help me lots

    • @Tech2etc
      @Tech2etc  Год назад

      Your most welcome. Please share this project on your social media. Will appreciate that.

  • @bernadoadikpeto9201
    @bernadoadikpeto9201 Год назад +3

    Do part7 for database to backend. Please🙏
    It's so important

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

    Hey everyone , i completed this series and its very good , you will learn responsiveness , how to embed map and video using html , a great tutorial to master html and css.

  • @juancarlosrodriguez1085
    @juancarlosrodriguez1085 Год назад

    Great course!!!. I've learned a lot. Thanks!!!....NEXT????....I would like to see the same tutorial but may be creating the content more dynamically using Javascript and persisting the info using the local storage. Thanks a million!!!!....

  • @dephneydsouza6488
    @dephneydsouza6488 2 года назад

    this was a great help!! Thanks

  • @STARGAZZ
    @STARGAZZ Год назад +2

    how to link each shop items to the cart page?
    can you make a video related to that?

  • @wisdomjordan
    @wisdomjordan Год назад

    hello sir. thanks for your great effort. you have improved me much much...

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

    thank you

  • @joshlane2951
    @joshlane2951 2 года назад

    Thank you very much man, you project is the best tutorial imo. Because many others youtuber just making only the Homepage and use many hard technics with no explain.
    With your project and videos i'm now understand much more and most important is i have a beautiful project place in my CV now, haha.

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

    Hi, thanks for this amazing tutorial. I was hoping you will make it functional by adding more javascript to it and database for backend, cheers

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

    Are there more videos? Where's the one on how to make the shopping cart functional to place orders? How to use local storage, database, or API for a functional ecommerce website? Please continue with the tutorial. Great videos so far.

  • @Duyka1st
    @Duyka1st Год назад

    thanks 😍

  • @VishwasGG777
    @VishwasGG777 8 месяцев назад +1

    how can i add the section where we have to enter address, phone no a
    ame and other info. while making the payment ??? & it should generate a qr code for payment option [fake QR or else orignal QR which would be set to 1rupess or the actual amount ]

  • @buraxta_
    @buraxta_ Год назад

    you have been very helpful to us, thanks for everything

  • @biziz4879
    @biziz4879 2 года назад +1

    Thank you for everything learnt a lot.

    • @Tech2etc
      @Tech2etc  2 года назад

      Glad to hear that

  • @ImagineThatPuppets
    @ImagineThatPuppets Год назад

    Fantastic tutorials!

    • @Tech2etc
      @Tech2etc  Год назад

      Thank you very much.

  • @kartikrameshchavan4710
    @kartikrameshchavan4710 11 месяцев назад +1

    Thanks Sir

  • @gunahawk6893
    @gunahawk6893 2 года назад

    thanks man this was great

  • @belloemmanuel5020
    @belloemmanuel5020 Год назад

    Love the course part 7 should topic should be the previous order page.

  • @mdanisurrahman7231
    @mdanisurrahman7231 Год назад

    THIS is absoletly amazing advice.

    • @Tech2etc
      @Tech2etc  Год назад

      Thank you very much.

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

    yes please add it's backend part too

  • @jooryalhamed938
    @jooryalhamed938 2 года назад

    Hello, thank you so much for these amazing videos.

    • @Tech2etc
      @Tech2etc  2 года назад

      Glad u enjoyed it

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

    Thankyou

  • @joanahenriques5493
    @joanahenriques5493 9 месяцев назад

    I just finished to follow along and I am amazed. Keep up with the good work. Highly appreciated

    • @User_dz-2
      @User_dz-2 4 дня назад

      hi send me src code plz

  • @rocktarun100
    @rocktarun100 Год назад

    Congratulation 100K subscribers💖

  • @zainabzadeh8604
    @zainabzadeh8604 18 дней назад

    Thanks a million! Waiting for part 7

    • @User_dz-2
      @User_dz-2 4 дня назад

      hi can you send me src code plz

  • @jahnavi4258
    @jahnavi4258 5 месяцев назад

    Add Js for adding and removing the cart itrems and make the table responcive for the cart and also may be add database to the backend to store user data it'll help out a lot..

  • @Rohit_chauhan_07
    @Rohit_chauhan_07 11 месяцев назад

    This course is very amazing I think one more part add this play list buy now button and fill user our card details and with the pop of Confrome your order that's part is most important of this playlist please add this part after that this playlist is very amazing please add this part 🤓🤗🤗❣🙏

  • @anshsrivastava2452
    @anshsrivastava2452 11 месяцев назад

    how can we make it user according website like the cart will only show those items which was added by the customer only
    ?

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

    Okay beautiful, I've seen the rest of the videos but when add Javascript? That will be perfect honestly.

  • @apnabuddy5646
    @apnabuddy5646 Год назад

    i'm waiting broo p-7 quickly

  • @jophil007
    @jophil007 9 месяцев назад

    Please how do I make the cart logo highlighted with the "active class" in the Mobile and iPad view... Tried adding the class but it didn't work

  • @anjaligiri3882
    @anjaligiri3882 Год назад +1

    Start a series for backend also 👍
    Really appreciate your support ❤️