Ecommerce Website HTML CSS Javascript - Complete Responsive Multipage

Поделиться
HTML-код
  • Опубликовано: 3 ноя 2024

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

  • @dotWebdesigns
    @dotWebdesigns  2 года назад +119

    Sorry for intercut clip:
    CSS line 37 to 42 code should be:
    *{
    margin:0;
    padding:0;
    }

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

      Tq bro❤✌

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

      @@ahmedk6485 If I pay for 3 coffees, does that mean I will have access to the website codes and images? or I'll just pay for coffees without receiving anything in return
      and what does it mean to 'buy a coffee?'

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

      how about CSS line 890 code?

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

      Bro, i want this project source code. could you please share with me the way of getting

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

      😁 thanks you sir

  • @allinone19996
    @allinone19996 7 месяцев назад +5

    I'm Highly recommended you bruh because u have an optimus skills to web developing that sidebar in small screens are fabulous to see in a video its oa unique many web developers make a simple sidebar in small screens that hard work which you did in past will reward you one day accomplishly all the best.....

  • @hackerprime9722
    @hackerprime9722 2 года назад +9

    Your power level is clearly *OVER 9000* !

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

      Super power thank you!

    • @a.k.m.azarulislam6273
      @a.k.m.azarulislam6273 2 месяца назад

      ​@@dotWebdesigns​ You're so talented guy ❤️❤️❤️ would you please share the next #part:2 link?

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

    Timestamps:
    00:00 - Intro
    05:18 - Project Setup
    05:39 - CSS Reset
    06:39 - Header
    20:57 - Mega Menu
    31:07 - All Departments Menu
    46:25 - Responsive / Mobile Menu
    58:30 - Responsive Menu Javascript
    01:03:45 - Slider
    01:10:30 - Brands
    01:12:10 - Trending Products
    01:33:30 - Featured Products
    01:41:09 - Banners
    01:45:17 - Product Categories
    01:48:47 - Footer - Newsletter
    01:51:40 - Footer - Widgets

  • @rubaiyatfoyez
    @rubaiyatfoyez 7 месяцев назад +1

    What a level of creativity, I wish I could Design like yours...

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

    Your creativity really shines through in this video, I love the unique ideas you came up with.

  • @albertgeorge1619
    @albertgeorge1619 2 года назад +20

    I've just found your channel and subscribed instantly. You are providing great contents on your channel. Please keep posting more videos like this. Thanks!!

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

    From watching this video in detail every second.
    I watched it and stopped and re-watched it many times.
    Thank you very much, finally I can 100% follow your prototype. Although it may take a very long time to write every line according to the example.
    Finally succeeded It took me about 20 hours to code, but it was well worth the learning. and have a beautiful prototype website for use and further development in the future.

    • @a.k.m.azarulislam6273
      @a.k.m.azarulislam6273 2 месяца назад

      @verawat Dear, would you please give me the next part:2 link?

    • @gabrielacamargo7446
      @gabrielacamargo7446 24 дня назад

      Hi, hey, what did you do at minute 45, in the image and menu section of the Home & kitchen category? I put in the code and it doesn't work, something doesn't work.

  • @huxkiriye
    @huxkiriye Год назад +13

    Great video but I wish remove the music background and talk so that it is interractive

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

    Hardwork and professionally
    Thank you bro it's great site

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

    Best youtube channel on weddesign. Thank you for sharing

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

    I will buy you a coffee brother.
    Thank you very much for the important videos, I'm recommending you to all my mates at campus.

  • @kashafiram7267
    @kashafiram7267 2 года назад +9

    Amazing sir your work is too good its help us in our projects plz make a video on dashboard or admin panel😇

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

      Noted

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

      @@dotWebdesignswhere can we get the admin panel

  • @alisilent85
    @alisilent85 6 месяцев назад

    the best web store i see ever

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

      Good morning everything is fine?
      Can you send me the source code?

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

    Thank you very much, finaaly i completed the 1st part...

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

      Hello bro send me source code please bro🥺

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

      Mohammad, I think all of us could use some help on the video between 45:35 and 45: 44..? The #4 image just doesn't want to move to the top. Is there a trick to this part of the video. I did this project twice and, at the same spot, there is a problem. 1st time I did it, I got it to work but there is an overlap on the other images for Kitchen/bath. Thanks

  • @alitsimulama2887
    @alitsimulama2887 7 месяцев назад +1

    hi this one of the best layout i have ever seen keep it up also i do have a challenge in the 45th min where the video appers to have cut kindly if you can address it i will be glad

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

    this project is so cool bro! nice job🤯🤯

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

    I really like your video, hope your channel grows more and more, I subscribed

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

    If you could speak and explain instead of using music it would have more than this appreciation sir 🙂

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

    Thank you very much once again, I hope to follow all of your Videos 🥰

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

    Hello! Can you give us the link for the base html and css link so I can keep up with your youtube tutorial? Thank you so much for your reply!

  • @2_MinutesVideos
    @2_MinutesVideos Месяц назад

    when i add women listitems my carrts move down i dont know why kindly help me BTW you are one of the best developer and doing fantastic job carry on

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

    finally you just hit 1 thousand subscriber!

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

    Great video. I just started following you.

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

    Please make a back-end video please 😍

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

    your tutorial very helpful.
    thanks

  • @7amzaofficial420
    @7amzaofficial420 Год назад +7

    your tutorial very helpful.
    thanks
    Please share with us source code

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

    What a mind yar....???

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

    thank you so much for the big help ,i wish you the best of luck

  • @NOTHING-en2ue
    @NOTHING-en2ue Год назад +24

    I was thinking I'm a good web developer before seeing this website 💀💀💀💀💀💀

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

      Always learn is a good thing. cheers.

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

      Iam same😂

    • @Muskan-mc7dv
      @Muskan-mc7dv Год назад

      😂😂😂😂😂😂 and now I just started watching it with the same thoughts

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

    Nice one pls keep it up. more video

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

    Hello Brother I really Appriciate Your Work but i have an Issue Kindly Help Me : in the Preview of my side The content is Showing Vertical And on Your side The Content Is Showing Horizontal What Sholud I DO To Change The Output : Help Me

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

    Amazing work sir. Please I tried the image slider but it doesn’t work for me, same with the blur..it doesn’t and I don’t know why…but all codes are correct.
    Please any suggestion?

  • @CesarQuispe-yf2if
    @CesarQuispe-yf2if Год назад +6

    Brother, could you share your source code? Thank you very much indeed. Blessings my brother.

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

    Cool design 👍

  • @seenuz1
    @seenuz1 6 месяцев назад

    Good functionalities!!

  • @almonober
    @almonober 5 месяцев назад +1

    Please could you help me with the codes at minute 45:40 especially the one for background: linear-gradient(), I cannot see the entire code.

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

    which file Explorer you have used in your pc in this video.....?????🤔🤔

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

    Watch your videos and just joined your channel, you’re awesome. But I tried looking up the source code for the CSS and couldn’t find it, is there a way I can get it?

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

    wow! wow! no comment..

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

    What themes do you use? The video is great

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

    Hi.
    I have a question: Why do you place some of the CSS styles in the @media section ? On the video I can see that it actually does has an impact on the page style, but I cannot understand why You do that instead of place those changes in the regular style.

    • @dotWebdesigns
      @dotWebdesigns  Год назад +4

      Hi, some of them are not consistently for all devices so we need to place in certain @media only. Thanks.

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

      bhai isne css starting mein kaha se dala bata sakta hai kya

  • @IbrahimHamoud-jp9ll
    @IbrahimHamoud-jp9ll Год назад

    Wonderful

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

    what a legend!

  • @Trileygamer
    @Trileygamer 2 года назад +7

    If I pay for 3 coffees, does that mean I will have access to the website codes and images? or I'll just pay for coffees without receiving anything in return
    and what does it mean to 'buy a coffee?'

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

      Hello, please answer my question

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

      Buy coffee to support him.
      Because he make amazing content and we can learn from it.

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

      @@habibthephantom7040 Thanks for resolved my question
      My Name is Triley, I from Angola
      i go support him

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

    awesome man. thank you

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

    Perfect

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

    Nice

  • @SuneelKumar-po1cp
    @SuneelKumar-po1cp 2 года назад

    Great work sir 👍👍

  • @ভোমরা
    @ভোমরা Год назад +1

    Nice Bro 2023:-)

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

    Hello, does shopping cart functionality work? Adding and removing items and price etc... thanks👏🏻

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

      It is for a design. You need another source code or cms to remove the items.

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

    what does css reset mean?
    why dont you do a tutorial on that?
    why do you just fly by it if its important for the site to function?

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

    I got to minute 1:41:18 but the products don't appear scattered on the page, they stay only to the left, where my mistake could be?

  • @حسینغفاری-ف6ز
    @حسینغفاری-ف6ز Год назад

    Perfect ❤

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

    thank you for help

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

    do you guys have background repeat y < in you css?

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

    awesome project
    Brother give more html css project

  • @MuhsinFaraj-ds9zy
    @MuhsinFaraj-ds9zy Год назад

    It seems that I have found what I am looking for. Can I communicate with you, brother, and on which platform do you prefer?

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

    why doesn't this part of the code work for me?
    --trans-background-color: background-color .3s, color .3s;
    --trans-background: background-color .3s;
    --trans-color: color .3s;

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

    Please I have tried connecting the swippers stysheet and js to my work and copied the neccessary js codes but still its not showing any effect, can you help me out??

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

    Hello, can't find source code in shared google drive. Pls share? Thanks

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

    Hey men, When you tipe .wrapper it seems like you give margin or padding in .wrapper class
    I got a question, Do you give a margin for .wrapper ?

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

    Awesome.. pls add some animation 🔥

  • @mister-med
    @mister-med 2 года назад

    Your font is awesome! What is it please ?

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

    Nice video, but real application should have login and sign up... And also u should have added a payment method

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

      Yes, you are right. But its a design tutorial only. Thanks

  • @christonero7729
    @christonero7729 5 месяцев назад +1

    i think some css code just missing in minute 39-40 . can someone give me the code please

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

    Do these filters work really that you showed us 5:16 ? Because you just click filters but there is no apply button and we don't see your clicks changes the content depend on those filters ? Secondly, you created login button but I cannot see login functionality in your project ? Do I miss something ?

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

      No. You need a backend to do that. Thanks

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

      @@dotWebdesigns I understood, thanks.

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

    Hi, can edit the content like image, copywriting and others after the complete responsive multipage u do?

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

    It would be nice if we could actually see the code, half the time the code is either cut off or you just skip parts.

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

    this too nice and best tutorial ever meet, sir is fine with u if u send me the source code, thnx so much for the lecture

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

    Brother i cant see the starting part of style css what is ut

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

    how come mine displays vertically instead of horizontally

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

    Thank You Very Much 😁

  • @melisazibeai-uc1qt
    @melisazibeai-uc1qt 10 месяцев назад

    have you uploaded the source code on github? bc i dont have enough time to check out the video and i just want to see the codes

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

    hola esta muy buena la pagina, lo que no puedo ver bien es el css que ya tenes hecho
    tendrías el codigo

  • @Dwayne-jhonson
    @Dwayne-jhonson Год назад

    Please come with voiceover instead of music😊

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

    how about CSS line 890 code?

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

    I want the link to this project, please.

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

    my css in the media is not working with the index html what to do.

  • @Shorts-creator40
    @Shorts-creator40 Год назад +2

    Good website ( i need this source code can i get it....)

  • @momentsthatmatter-h3c
    @momentsthatmatter-h3c 9 месяцев назад

    Can i know how to create the back end for this kind of website using php

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

    no me sale el 1:03:39, al momento de dar clic en el menú se desaparece rápido, no se queda pegado para cerrarlo con la x

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

    can we have the complete css of the project because in videos some parts are not visible please

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

    I wanna code because i want understand it more . I follow video and design site like it but wanna deep way to be able do it alone

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

    Hello everyone, I'm trying to start the site, but I've already started badly, I don't know, I'm in the "*Header* line 12/35" area at the beginning of the video, I did everything right, I don't know if it's because I'm using Portuguese, but the lines appear in the middle of the screen, what should I do?
    And someone explain this better: -
    Sorry for intercut clip:
    CSS line 37 to 42 code should be:
    *{
    margin:0;
    padding:0;
    }
    I'm not understanding

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

      Just write or paste them.

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

      @@dotWebdesigns Thanks! Now I have another concern!
      My icons in the "dpt-menu" area are smaller than the letters! I don't know if I downloaded the letters wrong, but they appear smaller! I've looked all over the site but nothing!

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

      You can set it as font-size to customize. In the tutorial, it has selector that set it up. Please make a recheck again.

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

      @@dotWebdesigns Thanks, I got it, now my submenu is not showing!

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

    Allah willing my friend..🤲

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

    Hello sir i need source code of this will you send me link of github please

  • @LuisMorales-oc9gz
    @LuisMorales-oc9gz 5 месяцев назад

    Y la función del carrito de compras?

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

    Nice pro, can you use vuejs to do something like this

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

    How i can buy this project? i need build my own website.

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

    Slider is not working....i have checked the code 10 times....

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

      You may make a recheck as the tutorial works. Thanks

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

    Hey,can you provide me the source code for this website. Please 🥺🥺

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

    The last code is not visible because of the youtube video suggestion. the code that starts with .showmenu .overlay

    • @Mahishara99
      @Mahishara99 9 месяцев назад +1

      bro right click on suggestion and go to inspect and delete the parent element. that's what i did

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

    Hey DotWebdesign Dear I got stuck in 890 Line in CSS. Where background: linear-gradient(90,deg rgba(255,255,255,1) 0%, and then you are showing half screen of code kindly tell me what should I write next.

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

      Hi, it should be linear-gradient(90,deg rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%)
      Thanks.

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

      @@dotWebdesigns Dear My code is working fine with background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0)); this completely, by the way thank you for replying

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

      Sorry for our mistake. Should be 0 not 1. Thanks.

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

      @@tanveerhakro4756 Hello, can you send the complete line? I don't understand where I'm going to put the 100%

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

      @@Trileygamer background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0));

  • @brevilgaming.5054
    @brevilgaming.5054 7 месяцев назад

    hello where can i find this template. is there a copyright? if yes how much for purchasing the theme

    • @MaxStudioCG2023
      @MaxStudioCG2023 6 месяцев назад

      folow the video and make it yourself :)))))

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

    i can not under stand fast css code i think sone thing csn be display

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

    what happened at 45:40 there is a quick switch and now ,i am confused and couldn't see the linear gradient as well. price write the code from line 871 to 898 ..I am just So confused!!!

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

      Hi, you may just continue. Sorry for the intercut clip.

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

      Please change.
      .dpt-menu .mega {
      display: none; //add this line
      }

  • @charlesadams-nn6kg
    @charlesadams-nn6kg Год назад

    Hello thanks for the video before proceeding i noticed you don't even reply anyone askin for help u just like the comment.... pls help us that do not know how to create an admin so we can add products

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

      Hi, creating an admin is not that simple. You need a framework to add products. Its for front end only. Thanks

    • @charlesadams-nn6kg
      @charlesadams-nn6kg Год назад

      @@dotWebdesigns thanks for replying

  • @НургалиШаншаров

    I have a menu panel located vertically. How do I put horizontally?

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

      You can simply set as display:flex Thanks

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

    How can I buy your layout?