Hi, This is the design and tutoring that I was looking for, but I have some issue with the styling so would you release me the style.css file so that I can compare my code with your stylesheet and find out where i did something wrong.
This stuff is such an inspiration man. In how many hours you can knock off similar ecommerce website and fully code it? And what's even more important, what kind of hourly rate u could charge for such a work? I'm startin my front end career (was Ui designer for 5 years) and I'm transitioning into it so yeah"! Thanks again for amazing videos man!!
Hi, I'm new to the industry, I'm learning and can you post the link to the css you incorporated if it's not too much to ask? I'm from Brazil, I don't understand your language very much and I use Google Translate
Hola buenos dias, un saludo desde Argentina, te felicito por este exelente trabajo, me inspira ver lo que se puede realizar con la progrmacion, te comento que recien estoy haciendo mis primeros pasos en desarrollo web, al ver este video me da mucha alegria saber lo todo que puedo aprender y lo que me falta para llegar a tu nivel , quiero hacerte una consulta, ¡ como se puede poner un efecto hover a las tarjetas ?, desde ya muy agradecido por compartir tus conocimiento, un abrazo.!!!!!
Hello- I hope you still read the comments here. I am at the beginning of the "style.css" file - ((out of no where)) you paste a chunk of code which falls under the heading "root" colour specifications. I typed this by hand and the computer doesn't like what I have typed. Please where can I copy and paste this from?
Just use why you need permission? He has created a video and he is fcking earning from youtube and you spend your time. Just Save the video !! for future reference.
Hello, first of all thank you very much for this video, I have a problem from the moment we have to duplicate the "items" for the "products" part (0:30:00), my images do not align, they have a strange behavior, the middle one is in the line below, I tried to review the code again and again, I can't find the error (probably mine :p) Have a good day!
Hi, please make a recheck again at video. We use display: grid for the products wrapper, the item should automatically align. Try googling display grid for more details knowledge. Thanks
Thank you so much for this amazing work. My only request is, if you can put a link with the code, because sometimes I have some mistakes and I go back and forth in the video. Apologize in advance if it is somehwere and I dont see it :)
hey, i need help with the animation in mega menu. I want the mega menu to stay opened a split second after hover off. kinda like a delay in closing the mega menu when cursor has left the menu
Question for the Carousel block. You used the following properties for the wrapper class: display: flex; grid-template-columns: unset; gap: unset; I have this question. Is it possible to use them for one element? It doesn't work for me and my browser says display: flex; hinders grid-template-columns: unset; What should I do in this case?
Hi, default .dotgrid .wrapper is styling for display: grid and for carousel we set it to flex. When it styles to flex, grid-template-columns: unset is not necessary due to it's grid's property and we just make sure.
why you did not show when you changed something suddenly ? in minutes 29:00 you added to line codes but what can not understand because you did and not whacted
Hello, it's super interesting but I can't follow it well, it's possible to have the source code, I'm available to anyone to improve my knowledge and follow training with you, thank you
How do you create the classes and divs with the "." and "#" hotkey?? I am tired of typing out each class and div and I want to be able to quickly create them like you did in this video!
at 1:10:00 how did you make price, title and button in the middle you did not show the css for that and object fit: cover is cutting the head of the image.?
Bro I need help in this part around 13:21. When I type this code: .inner-header :where(.wrap, .menu > ul), .list-inline > ul { display: flex; align-items: center; } .header-left, .header-right { flex-grow: 1; } the hamburger menu, the person, 7, and star when along and aligns in the center as well, resulting in overlaps and misalignment.
Hello, at 29:11 everything is going fine, at 29:19 the picture does not fit like you do. You have it with a large indent from the bottom, and with a shadow .... Why!? What do you change in this interval?
Hi, picture should be resized as we state .wrapper of each .item using grid-template-columns. You may want to make a recheck again at nav.menu :where(.sub-menu, .sub-mega) that it has box-shadow we previously stated. Thanks
so we can delete from here part of code and can write like this ?: const sorter = document.querySelector('.sort-list'); if(sorter) { const sortLi = sorter.querySelectorAll('li'); sorter.querySelector('.opt-trigger').addEventListener('click', function() { sorter.querySelector('ul').classList.toggle('show'); }) sortLi.forEach((item) => item.addEventListener('click', function() { sortLi.forEach((li) => li != this ? li.classList.remove('active') : null); this.classList.add('active'); sorter.querySelector('.opt-trigger span.value').textContent = this.textContent; sorter.querySelector('ul').classList.toggle('show'); })) } -------------- ? const sorter = document.querySelector('.sort-list'); if(sorter) { sorter.querySelector('.opt-trigger').addEventListener('click', function() { sorter.querySelector('ul').classList.toggle('show'); }) } Because on video in minutes 1:50:30 we also have to add ACTIVE class name for tag LI and delete by click: trigger.forEach((b) => b.parentNode.classList.remove('active')); content.forEach((s) => s.classList.remove('active')); this.parentNode.classList.add('active'); body.classList.add('active'); WRITE ???
hello. first of all thanks a lot for this video. its helping me a lot to learn front end development. now I'm facing a problem when styling 'new arrival'. .carousel .dotgrid .wrapper { ** display: flex;** grid-template-columns: unset; gap: unset; } after writing display flex its showing only one image. Please can you solve me the problem? thanks in advance
Hi, you might miss something there. .wrap should set to display:flex and .wrap child, header-left etc when set to flex-grow: 1 should has the same width. Thanks
Hi Bro. I get this error on line 7 when I write JS code. Can you know what it is? Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#${currentId}' is not a valid selector.
please provide a source code in zip file and please make tutorials in hindi and english language with your voice without any background music. i hated it ...
You're behaving very badly, I haven't seen anything good on any channel, if you post a tutorial, you should definitely include the code, because we all learn from here, and when it doesn't work, we want to fix the error. I am unsubscribing because of this;
hello bro, 1:50:36 Do you know why I have it, but it adds an active and it does not remove it? Every time I click on an option, it adds an active and it becomes 3 options active without removing any active this code: const trigger = document.querySelectorAll(".tabbed-trigger"), content = document.querySelectorAll(".tabbed > div"); trigger.forEach((btn) => { btn.addEventListener("click", function () { let dataTarget = this.dataset.id, body = document.querySelector(`#${dataTarget}`); trigger.forEach((b) => b.parentNode.classList.remove("active")); trigger.forEach((s) => s.classList.remove("active")); this.parentNode.classList.add("active"); body.classList.add("active"); }); });
Sorry this should be a mistake. Please change: trigger.forEach((s) => s.classList.remove("active")); to content.forEach((s) => s.classList.remove("active")); Hope it solve the problem. Thanks
Hi, This is the design and tutoring that I was looking for, but I have some issue with the styling so would you release me the style.css file so that I can compare my code with your stylesheet and find out where i did something wrong.
keep up the good work , awsome !
Thanks, will do!
The UI is dope. I love it. Can I redesign for a full stack project?
Yes you can. Please give us credit for the design. Thanks
Oh, l will, thanks
Hi. I don't quite understand where the --grid-col and --gutter tags came from. Where is the moment when you register them in root?
This stuff is such an inspiration man. In how many hours you can knock off similar ecommerce website and fully code it? And what's even more important, what kind of hourly rate u could charge for such a work? I'm startin my front end career (was Ui designer for 5 years) and I'm transitioning into it so yeah"! Thanks again for amazing videos man!!
Hi, thank you and we hope you enjoy our videos. For work related, you may reach us at dotwebdesigner@gmail.com
Thanks.
Hello can we connect?
Hi, I'm new to the industry, I'm learning and can you post the link to the css you incorporated if it's not too much to ask?
I'm from Brazil, I don't understand your language very much and I use Google Translate
What do you think if I used bootstrap to make the site responsive to all browsers? Is this good?
Yes it is.
perfectly done I'm speechless also I got goosebumps :D
Hola buenos dias, un saludo desde Argentina, te felicito por este exelente trabajo, me inspira ver lo que se puede realizar con la progrmacion, te comento que recien estoy haciendo mis primeros pasos en desarrollo web, al ver este video me da mucha alegria saber lo todo que puedo aprender y lo que me falta para llegar a tu nivel , quiero hacerte una consulta, ¡ como se puede poner un efecto hover a las tarjetas ?, desde ya muy agradecido por compartir tus conocimiento, un abrazo.!!!!!
do you have any advice for how/where I could learn to code the backend for this?
Hello- I hope you still read the comments here. I am at the beginning of the "style.css" file - ((out of no where)) you paste a chunk of code which falls under the heading "root" colour specifications. I typed this by hand and the computer doesn't like what I have typed. Please where can I copy and paste this from?
What operating system do you use?
what is the --gutter value?
its a good practis
Are we allowed to use this project in our personal portfolios, and do we need to attribute you?
thanks you for this video it helps a lot.. may i know where to search that script.js please..thanks
I really love your work. I would love to use some features of it to work on my site, hope I have your permission and you’ll definitely get a mention
Just use why you need permission? He has created a video and he is fcking earning from youtube and you spend your time. Just Save the video !! for future reference.
Hello, first of all thank you very much for this video,
I have a problem from the moment we have to duplicate the "items" for the "products" part (0:30:00),
my images do not align, they have a strange behavior, the middle one is in the line below,
I tried to review the code again and again, I can't find the error
(probably mine :p)
Have a good day!
Hi, please make a recheck again at video. We use display: grid for the products wrapper, the item should automatically align. Try googling display grid for more details knowledge. Thanks
Thank you so much for this amazing work.
My only request is, if you can put a link with the code, because sometimes I have some mistakes and I go back and forth in the video.
Apologize in advance if it is somehwere and I dont see it :)
hey, i need help with the animation in mega menu. I want the mega menu to stay opened a split second after hover off. kinda like a delay in closing the mega menu when cursor has left the menu
Question for the Carousel block. You used the following properties for the wrapper class:
display: flex;
grid-template-columns: unset;
gap: unset;
I have this question. Is it possible to use them for one element? It doesn't work for me and my browser says display: flex; hinders grid-template-columns: unset; What should I do in this case?
Hi, default .dotgrid .wrapper is styling for display: grid and for carousel we set it to flex. When it styles to flex, grid-template-columns: unset is not necessary due to it's grid's property and we just make sure.
attractive work
why you did not show when you changed something suddenly ? in minutes 29:00 you added to line codes but what can not understand because you did and not whacted
Hi, 3 seconds after we have already stated display: block so you can see the changed. Thanks
Hello, it's super interesting but I can't follow it well, it's possible to have the source code, I'm available to anyone to improve my knowledge and follow training with you, thank you
Need a code of this, I got stuck problems. Please help me out of this. Waiting for your positive response.
How do you create the classes and divs with the "." and "#" hotkey?? I am tired of typing out each class and div and I want to be able to quickly create them like you did in this video!
gonna leave a response incase someone answers you
".name-div" or ".name-div.second-name"
">" moving to the next element
example
.selection>.main-selector>.header.right>img
its
nice project bro ,, from bangladesh
Sir how many projects like e-commerce have done in real world.
at 1:10:00 how did you make price, title and button in the middle you did not show the css for that and object fit: cover is cutting the head of the image.?
did you find the fix?
Bro I need help in this part around 13:21. When I type this code:
.inner-header :where(.wrap, .menu > ul),
.list-inline > ul {
display: flex;
align-items: center;
}
.header-left, .header-right {
flex-grow: 1;
}
the hamburger menu, the person, 7, and star when along and aligns in the center as well, resulting in overlaps and misalignment.
You should continue as they style after.
Hello, at 29:11 everything is going fine, at 29:19 the picture does not fit like you do. You have it with a large indent from the bottom, and with a shadow .... Why!? What do you change in this interval?
Hi, picture should be resized as we state .wrapper of each .item using grid-template-columns.
You may want to make a recheck again at nav.menu :where(.sub-menu, .sub-mega) that it has box-shadow we previously stated. Thanks
@@dotWebdesigns It turned out ... Thank you!
Where did you find those pictures!?
In the description for details. Thanks.
20:20🎉
26:16 ❤
1:51:50🎉
Hey have you included the back end development parts in those videos? I mean connecting to a database?
No. Its frontend only. Thanks
TypeError: e.preventDefault is not a function in java scrip please help...
good bro nice to see this video
Hope you enjoy it. Thanks.
Can u plzz tell which theme are u used in vs code this is so amazing
Ayu. Thanks.
so we can delete from here part of code and can write like this ?:
const sorter = document.querySelector('.sort-list');
if(sorter) {
const sortLi = sorter.querySelectorAll('li');
sorter.querySelector('.opt-trigger').addEventListener('click', function() {
sorter.querySelector('ul').classList.toggle('show');
})
sortLi.forEach((item) => item.addEventListener('click', function() {
sortLi.forEach((li) => li != this ? li.classList.remove('active') : null);
this.classList.add('active');
sorter.querySelector('.opt-trigger span.value').textContent = this.textContent;
sorter.querySelector('ul').classList.toggle('show');
}))
}
-------------- ?
const sorter = document.querySelector('.sort-list');
if(sorter) {
sorter.querySelector('.opt-trigger').addEventListener('click', function() {
sorter.querySelector('ul').classList.toggle('show');
})
}
Because on video in minutes 1:50:30 we also have to add ACTIVE class name for tag LI and delete by click:
trigger.forEach((b) => b.parentNode.classList.remove('active'));
content.forEach((s) => s.classList.remove('active'));
this.parentNode.classList.add('active');
body.classList.add('active');
WRITE ???
hello. first of all thanks a lot for this video. its helping me a lot to learn front end development.
now I'm facing a problem when styling 'new arrival'.
.carousel .dotgrid .wrapper {
** display: flex;**
grid-template-columns: unset;
gap: unset;
}
after writing display flex its showing only one image.
Please can you solve me the problem?
thanks in advance
Where did you get the code you pasted into the css file at 10:27?
Same question
Amazing tutorial🎉
Thank you! 😊
did you finish part 4?
When I type this, the menu trigger just go to right, what's the error, I couldn't fix.
.header-left, .header-right{
flex-grow: 1;
}
Hi, you might miss something there. .wrap should set to display:flex and .wrap child, header-left etc when set to flex-grow: 1 should has the same width. Thanks
Great work. I wish you can teach me.
have any git link of this project ?
Hey at 10:26 where to get this copied code please share this.
Please share rhe URL link of Montserrat and Prata font , I'm unable to see the full link in the video.
You can find them at fonts.google.com
Thanks.
Thank!
You're welcome!
Hi Bro. I get this error on line 7 when I write JS code. Can you know what it is?
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#${currentId}' is not a valid selector.
Hi, did you use back quote to currentId?
@@dotWebdesigns Yeah, that doesn't help.
Hi, perhaps currentId variable is not a valid value for an HTML element id attribute.
Make sure that data-target value is #id name of the div.
Thanks.
@dotWebdesign You've been very helpful, thank you so much! Thank you so much for your videos! Very cool and very helpful!
copy this code in JS
const triggerOpen = document.querySelectorAll('[trigger-button]');
const triggerClose = document.querySelectorAll('[close-button]');
const overlay = document.querySelector('[data-overlay]');
for (let i = 0; i < triggerOpen.length; i++){
let currentId = triggerOpen[i].dataset.target,
targetEl = document.querySelector(`#${currentId}`)
const openData = function() {
targetEl.classList.remove('active');
overlay.classList.remove('active');
};
triggerOpen[i].addEventListener('click', function(){
targetEl.classList.add('active');
overlay.classList.add('active');
});
targetEl.querySelector('[close-button]').addEventListener('click', openData);
overlay.addEventListener('click', openData)
}
1:10:08 can you please help. why did the text move to the center? my text is not moving. I checked everything there.😞
Hi, you may continue follow the tutorial to make it work.
same here😪
did it ever work, im stuck here. he said to keep going and it will fix
Can you please send the //tabbed codes in the javascript file :)
Hi, in the video. thanks.
j'ai de souci au niveau de la ligne 169 en css..
Hello friend, my code is similar, but the product image is too large on the screen. How can I solve?
Hi, check the img {max-width: 100%}
Did you set it ?
@@dotWebdesigns Hello, I defined yes. The image shrinks after adding the
content in submenu & mega
@@dotWebdesigns what is your github?
@@equipepythonnatela7771 Hi, image should be automatically resize as we use grid-template-columns. Make a recheck again. Thanks.
why you dont add css file ?? :((
Hi, are this including login and register page?
No. Thanks.
@@dotWebdesigns ok :)
Y como lo conecto a una base de datos ?
I have issues with the search bar
Please provide code
How long did it take you to build this?
Couple days. Thanks
I am sorry, I can't find css for "wide" class :( Could you please help with telling second in video or the property itself :(
@media (min-width: 1200px) {
.container.wide {
--mx-width: 1720px;
--gutter: 40px;
}
}
@@dotWebdesigns Thank you very much :)
how to get all this kind of images for project
In the description. Thanks
وصلت لعند ال Mega Menu
please provide a source code in zip file and please make tutorials in hindi and english language with your voice without any background music. i hated it ...
Source Code Please❤
Isn't there your code here?
is this just frontend?
Yes it is. Thanks.
Can I ask you to source code?
Sir, Need a help? Please
Plz are you sure you want to help ?
You don't talk to explain us what you are doing, that's not fair
Sorry that we can't speak english :(
plz guide me what is import url
We use import Google Fonts through CSS for design tutorial only. You may use for best practice. Thanks
@@dotWebdesigns is it important to use this link?
it is better than use @import. Thanks
@@dotWebdesigns Hey !! From where we can find this import link ?? Can u please tell the website name ?
Bro please uplad full source code
can any one share the source code of this plz
source code
You're behaving very badly, I haven't seen anything good on any channel, if you post a tutorial, you should definitely include the code, because we all learn from here, and when it doesn't work, we want to fix the error. I am unsubscribing because of this;
We are sorry to hear that. thanks.
help
Help pleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeaaaaaaaase
hello bro, 1:50:36
Do you know why I have it, but it adds an active and it does not remove it? Every time I click on an option, it adds an active and it becomes 3 options active without removing any active
this code:
const trigger = document.querySelectorAll(".tabbed-trigger"),
content = document.querySelectorAll(".tabbed > div");
trigger.forEach((btn) => {
btn.addEventListener("click", function () {
let dataTarget = this.dataset.id,
body = document.querySelector(`#${dataTarget}`);
trigger.forEach((b) => b.parentNode.classList.remove("active"));
trigger.forEach((s) => s.classList.remove("active"));
this.parentNode.classList.add("active");
body.classList.add("active");
});
});
Sorry this should be a mistake. Please change:
trigger.forEach((s) => s.classList.remove("active"));
to
content.forEach((s) => s.classList.remove("active"));
Hope it solve the problem. Thanks
@@dotWebdesigns but on video how it works ?
THANK YOU SOOOO MUCH!!!!!!!!!!!!!!!@@dotWebdesigns
i made it this far, see you at the end!
Don't start for nothing, you will lose control at 13:50
Not all codes are presented in the video. There is a huge disconnect / gap.
🌟 'promosm'
Thank you! Cheers!
Where did you get the code you pasted into the css file at 10:27?
help
help
help
help
help
help
help
help
help
help
help
help