it's been a while since i've coded and I just wanted to refresh my fundamentals at the same time build a project so I feel productive. And I must say this is the perfect tempo for me to slowly take on more advanced projects. Thank you for this!
This was great!!!! I’m so nervous learning JS, but watching you make these dope stuff makes me so happy to be learning. I’m currently learning to very very basics, operators, comparison operators… can’t wait to get to functions
Good to know you are a newbie to Javascript like me. It's never too late to start and good enough their are so many experienced programmers that are willing to drop their knowledge out there. Coding is fun, I'm wishing you the best in your journey. :)
Thank you for uploading this! I'm still a newbie and it feels good to finally find a tutorial where I understand whats happening. Its also a nice feeling to upload two repos to my github in one day.
Great video! Btw, in the first project you don't need any if statements at all. They are both always true and therefore redundant. You can just remove them and it won't affect the code at all.
Cool beginner projects! Although, in the first one we don't need to check if the classList contains the "open" or "closed" classes. We are never removing them so they will ALWAYS be there. So it's safe to remove these lines: if(openFace.classList.contains("open")) {....} if(closedFace.classList.contains("closed")) {....}
This tutorial is awesome!!! For the second project, We could use return ` ${item.name} is ${item.age} years old `; I think it's the easiest way to concatenate with ES6 :)
I just finish basic html,css, javascript via youtube and self learning now Im looking for basic projects. I need to understand whats going on in your code, why that happen,...etc. Thanks to this.
25:43 I added a hover to those boxes the hover color been rgb(92, 169, 118) and my primary box color was rgb(90,60,228) after adding this hover with 1s of transition, the squad project looks so cool.
Thanks! Enjoying these projects to get a better idea of how people code and just see it visually in my studies. Did all 3 projects. Basic projects which is fine but still helpful. If you are a new to front end this video is helpful.
great video. Question? in CSS why it is a lot of developers put at the very top of the file. * { box-sizing: border-box; margin: 0; padding: 0; } What is this used for?
Thank you for the helpful and very easy to understand video! This helped me a lot see my own mistakes in my own personal projects after trying these 3 out. Great content.
Thank you so much for these projects, it's help me gain my confidence back. Thank you so much.... Please do more projects like these for people like me how are trying to learn JS.
Thank you very much for these videos, they are really inspiring. I can't believe we are getting all of this for free, you are like a cool profesor i never had. Keep it up. On a side note since i recently started learning js and i was wondering is const similar to var because you can assign var's value to target html's document. Aslo can you make a tutorial for some simple game in js like that dinosaur game in chrome. Best regards 🙌
"Trebuchet" In my experience, I've mostly heard it pronounced like: TRE: "treh," like in the musical word treble. TRE-ble. BU: "boo" like a ghost CHET: "shay" like....shay...? Treh.boo.shay I've heard some people say the BU part with more of a YOU sound. Like "view" but with a b -- "biew" ? The only reason I know is because one of my friends was big into weapons. Trebuchet's basically a huge catapult for boulders.
For project 1, why do we need to use the if statement? Something like: closedFace.addEventListener("click", () => { openFace.classList.add("active"); closedFace.classList.remove("active"); }); openFace.addEventListener("click", () => { closedFace.classList.add("active"); openFace.classList.remove("active"); }); Without the If statement, this also works. Would be much appreciated if you can explain the logic to me, I'm a complete noob, thanks!
In the final Project, instead of writing java script logic Why cant we just do this in Style.css #circle : hover { Transform : scale(2) Transition = cubic bezier } Why the hard route? Sorry if i am being annoying, i m a beginner.
I did the third project without the conditional and it still worked... is it maybe because there definitely wasn't a hover class before it was added with javascript?
Man, a suggestion! I really appreciate you content, but please, don't write on screen and after delete it, we lose time, Type just the code!! You teach very well, my suggestion is to improve you channel! #thanks
Noob question (1 month in programming), do we really need that if statement in the arrow function instead of just .toggle('active') on both emojis? If yes, why so? :)
there's much shorter ways to write that same code, but I specifically wrote it out like that so people who are brand new can see what is going on. Once you see the other methods you'll see why I showed it like this because if not, most people would get confused seeing : and ?
@@briandesign I definitely learned some new stuff from this video, thanks! However, the IF statement actually makes it harder for new people to understand because someone learning would ask why it's there (I'm very new and that's what I asked) and it makes the code longer than it needs to be. Great video!
if anyone is having same issue like me .......go to div1 he have added the class closed thats why its not working go and change it to the open class and it will work
For some reason I don't get the grid in the 2nd project! I'm not sure what I'm doing wrong, but I don't get a grid. The code looks exactly like this one. :(
If i'm not mistaken, MAP is a For loop, so it loops through each of the elements of the array (called Data), and then returns something. In this case, then we added the elements of the array to the HTML class.
there's a lot of commands in the projects that i didn't knew, should i watch more lessons before doing this? because i feel like it's not good practice to write commands if i dont know what they do!
If there is something you have not learnd previously, you should learn it. then you review the project again. It starts to make sense. That's what i did. I did not know what was classList. I had to learn it to understand how the project should run
Anyone having issues with the images not showing after typing the .active { display: block } class in the styles.css for some reason my images disappear and I can no longer click on the images.
I did this project (Monkey one) in notepad++ and had an issue with image insertion. It's showing both the images at once and not taking any click. What should I do?
I would be very grateful if anyone could explain why are if statements necessary in the first project, because it works perfectly fine without them. Obviously the if statements are true in both cases so why bother writing them?
Hi Brian, I always watch your tutorial about ReactJs, and now I'm looking for "how to make navigation when the mobile position is like a menu in mobile phone mode", will you make it later? I think it's popular now
@@briandesign Sorry, I mean it looks like the menu on the mobile app, with the icon below, like this when viewing the mobile www.sketchappsources.com/free-source/2084-material-bottom-navigation-sketch-freebie-resource.html
it's the concept of using that as an event listener. Of course that specific example could be a css hover, but that's not the point of showing you that. If you're just using stying, then yes CSS is enough. If you need more than styling, then you'd have to use JS. In my example, I showed how you can add a class by essentially hovering over an element. You can't add/remove classes in CSS by hovering over elements, so it all depends on your use case
it's been a while since i've coded and I just wanted to refresh my fundamentals at the same time build a project so I feel productive. And I must say this is the perfect tempo for me to slowly take on more advanced projects. Thank you for this!
This was great!!!! I’m so nervous learning JS, but watching you make these dope stuff makes me so happy to be learning. I’m currently learning to very very basics, operators, comparison operators… can’t wait to get to functions
Good to know you are a newbie to Javascript like me. It's never too late to start and good enough their are so many experienced programmers that are willing to drop their knowledge out there. Coding is fun, I'm wishing you the best in your journey. :)
@@chigozieobialor1245 oh thank you, and you as well. Im taking javascript very slowly.
Thank you for uploading this! I'm still a newbie and it feels good to finally find a tutorial where I understand whats happening. Its also a nice feeling to upload two repos to my github in one day.
Great video! Btw, in the first project you don't need any if statements at all. They are both always true and therefore redundant. You can just remove them and it won't affect the code at all.
I thought the same way... but maybe is a good practice to do as he says
i'm aways happy to see creators like me who make HTML content with GREAT videos !!! Happy I wotch it !!!
Cool beginner projects! Although, in the first one we don't need to check if the classList contains the "open" or "closed" classes. We are never removing them so they will ALWAYS be there.
So it's safe to remove these lines:
if(openFace.classList.contains("open")) {....}
if(closedFace.classList.contains("closed")) {....}
very helpful comment thank you, I was wondering what the point of those lines were
@@TushAI glad it helped!
This tutorial is awesome!!!
For the second project, We could use
return ` ${item.name} is ${item.age} years old `;
I think it's the easiest way to concatenate with ES6
:)
I love you Arosh:))))
you explained it very well and truly one can understand even without a background knowledge.
Thanks for sharing your knowledge! Very helpful video and you get straight to the point 🙏
Im such a fan of your channel and all the amazing content you produce for us novices. I always learn something great - thanks heaps.
Thanks Yolande!
I just finish basic html,css, javascript via youtube and self learning now Im looking for basic projects. I need to understand whats going on in your code, why that happen,...etc. Thanks to this.
Thanks man! It couldn't be more clear and easy. I have no background with coding, I just started learning by myself and this helped me a Lot👍🏽🔥
how so
indeed you have made my migration from Network engineer to a programmer easy. now i can go and see the backend side.
quick tip concering the first project: you can also type emoji's on windows using windows key + .
👍
This is great, helped me more then i thought i needed.
25:43 I added a hover to those boxes the hover color been rgb(92, 169, 118) and my primary box color was rgb(90,60,228) after adding this hover with 1s of transition, the squad project looks so cool.
Awesome video! Really helpful. I only have one question. Is it possible to add pictures into the cards? How do you do then?
Great Projects ideas, Thank You So much for making this video !
I'm a beginner, this is just what I needed , thank you so much!!
Thanks! Enjoying these projects to get a better idea of how people code and just see it visually in my studies. Did all 3 projects. Basic projects which is fine but still helpful. If you are a new to front end this video is helpful.
Very nice way to practice my limited knowledge in JS,CSS and HTML, Thank you !!!
great video. Question? in CSS why it is a lot of developers put at the very top of the file.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
What is this used for?
Thank you for the helpful and very easy to understand video! This helped me a lot see my own mistakes in my own personal projects after trying these 3 out. Great content.
I would love for you to explain what everything does and like what each line of code actually does!
Amazing! Thank you very much for your help!
BEST video ever for beginners!! 🙏🏼🙏🏼🙏🏼
thanks for super easy tutoria now i understand what js do,and how it will help in my website,im still newbie
Brian I so much enjoy this tutorial so sweet
Thanks for this video man, really helping me dip my toes into webdev and do some cool stuff without getting too complicated.
Thank you so much for these projects, it's help me gain my confidence back.
Thank you so much....
Please do more projects like these for people like me how are trying to learn JS.
This was really great. It really helped my understanding 🤯. Thank you so much.
Glad it helped!
Thank you very much for these videos, they are really inspiring. I can't believe we are getting all of this for free, you are like a cool profesor i never had. Keep it up.
On a side note since i recently started learning js and i was wondering is const similar to var because you can assign var's value to target html's document.
Aslo can you make a tutorial for some simple game in js like that dinosaur game in chrome.
Best regards 🙌
Thanks! and for most people today they almost never use var anymore. It's mainly const or let.
u r the best for noobs bcoz the rest of the people just do projects and u explain everything
Thank you for this GREAT video!!! helped me a lot!
"Trebuchet"
In my experience, I've mostly heard it pronounced like:
TRE: "treh," like in the musical word treble. TRE-ble.
BU: "boo" like a ghost
CHET: "shay" like....shay...?
Treh.boo.shay
I've heard some people say the BU part with more of a YOU sound. Like "view" but with a b -- "biew" ?
The only reason I know is because one of my friends was big into weapons. Trebuchet's basically a huge catapult for boulders.
Incredible video thank you
Fantastic vid, thanks for making it!!!
Quick question.
For project 2, how do you make it so only 1 card is displayed at a time as a slideshow?
Nice , these are really good for beginners like me , thanks :)
thanks Brian , these are really good for beginners like me
Thanks, I think this has helped me learn JS better!
For project 1, why do we need to use the if statement?
Something like:
closedFace.addEventListener("click", () => {
openFace.classList.add("active");
closedFace.classList.remove("active");
});
openFace.addEventListener("click", () => {
closedFace.classList.add("active");
openFace.classList.remove("active");
});
Without the If statement, this also works. Would be much appreciated if you can explain the logic to me, I'm a complete noob, thanks!
Very informative video, 👍!
am in love with your videos. I have learnt alot
Thanks for sharing your knowledge and it was very helpful for me🙂👍
Cool Tutorial. Thanks
Are you able to do the "hover" with images? cant seem to find anything on the internet.
Great video!
super tutorial for beginners!
In the final Project, instead of writing java script logic
Why cant we just do this in Style.css
#circle : hover {
Transform : scale(2)
Transition = cubic bezier
}
Why the hard route?
Sorry if i am being annoying, i m a beginner.
I did the third project without the conditional and it still worked... is it maybe because there definitely wasn't a hover class before it was added with javascript?
Thanks man i learned alot
Awesome!!
for the second project i did it like that :
const container = document.querySelector(".container");
const students = [
{
name: "Mateo",
age: 30,
},
{
name: "Sarah",
age: 32,
},
{
name: "John",
age: 20,
},
{
name: "Tim",
age: 27,
},
{
name: "Sam",
age: 22,
},
{
name: "Joey",
age: 34,
},
];
const displayStudents = arr => {
container.innerHTML = "";
arr.forEach(student => {
const html = `${student.name} is ${student.age} years old`;
container.insertAdjacentHTML("beforeend", html);
});
};
displayStudents(students);
Man, a suggestion! I really appreciate you content, but please, don't write on screen and after delete it, we lose time, Type just the code!! You teach very well, my suggestion is to improve you channel! #thanks
awesome Project Bro for everyone
@Brian Design all of this projects I can put on my resume? is it allowed?
i love ur CSS solos in this long ass videos
great projects!!!!
Great tutorial
How do you know or learn as a beginner what HTML, CSS or Javascript code you'll need to use in order for these projects to work?
Definitely useful for beginners.
Thanks!
thank you bro
Why if() added in first project i think that's not necessary is that coding standard or something?
Thank you so much sir ❤️
Nice tutorial. For the second, you could've used template literal easily instead of concatenation.
Love template literals. Makes the code look so much tidier.
What app is used to write the code and then show it at the side? I'm new in Javascript and only used it trough courses
How are you indenting the entire ?
I hear a keyboard shortcut.
Noob question (1 month in programming), do we really need that if statement in the arrow function instead of just .toggle('active') on both emojis? If yes, why so? :)
I mean something like this:
closedFace.addEventListener('click', () => {
openFace.classList.toggle('active');
closedFace.classList.toggle('active');
})
openFace.addEventListener('click', () => {
openFace.classList.toggle('active');
closedFace.classList.toggle('active');
})
there's much shorter ways to write that same code, but I specifically wrote it out like that so people who are brand new can see what is going on. Once you see the other methods you'll see why I showed it like this because if not, most people would get confused seeing : and ?
@@briandesign Thanks Brian :D It's still a great video for someone who is stuck on practical use of JavaScript, like me :P Cheers!
@@michamarkowski8375 why does both uses 'active' i didnt understand the flow
@@briandesign I definitely learned some new stuff from this video, thanks! However, the IF statement actually makes it harder for new people to understand because someone learning would ask why it's there (I'm very new and that's what I asked) and it makes the code longer than it needs to be. Great video!
if anyone is having same issue like me .......go to div1 he have added the class closed thats why its not working go and change it to the open class and it will work
my css is not working
For some reason I don't get the grid in the 2nd project! I'm not sure what I'm doing wrong, but I don't get a grid. The code looks exactly like this one. :(
Oops, just in case someone is as silly as me: I missed the word DIV, after the #info in the last block of the CSS...
me too
more of this plz
Hi im a little lost, I have everything the same as you but I cannot get the 2nd monkey to not be active.
Nice 👌👌👌 and please make a video of financial business using Reactjs or Vue.js
Thanks Kiran!
why we used map in second project. I didnt understand.
This created a a new array copy with the results of running a function on the data array(containing the values)
If i'm not mistaken, MAP is a For loop, so it loops through each of the elements of the array (called Data), and then returns something. In this case, then we added the elements of the array to the HTML class.
@@sv-hermes thank you!
there's a lot of commands in the projects that i didn't knew, should i watch more lessons before doing this? because i feel like it's not good practice to write commands if i dont know what they do!
If there is something you have not learnd previously, you should learn it. then you review the project again. It starts to make sense. That's what i did. I did not know what was classList. I had to learn it to understand how the project should run
i try to that but the code won't work
that grid isn't working for me , any ideas why?
Thank you! Sub 👍🏾
How would you add a third emoji
Anyone having issues with the images not showing after typing the .active { display: block } class in the styles.css for some reason my images disappear and I can no longer click on the images.
I am not understanding why my projects are not workig, js is not rendering.
id does not work for me, i pasted your code too
nice
I did this project (Monkey one) in notepad++ and had an issue with image insertion. It's showing both the images at once and not taking any click. What should I do?
same
i just solved that issue....he actually put closed class in div 1 change to open class and problem solved
@@crystalclear178 thanks man I will surely try this one
What's the code editor?
visual studio (vs code)
No need for "if statements" in circle project, works the same without it hehe
Letss gooo
where we going? lol
@@briandesign hahahaha nice one
they got travel bans cause of quarantine, so there's only a few places I can go
I would be very grateful if anyone could explain why are if statements necessary in the first project, because it works perfectly fine without them. Obviously the if statements are true in both cases so why bother writing them?
It tried it and it does not work, your code is most likely different.
next E-commerce shop complete,,,,,,,,,, only Js
Hi Brian, I always watch your tutorial about ReactJs, and now I'm looking for "how to make navigation when the mobile position is like a menu in mobile phone mode", will you make it later? I think it's popular now
I'm not sure what you're asking? I've already made multiple react sites with a mobile dropdown menu
@@briandesign Sorry, I mean it looks like the menu on the mobile app, with the icon below, like this when viewing the mobile www.sketchappsources.com/free-source/2084-material-bottom-navigation-sketch-freebie-resource.html
oh that's for like mobile apps, but not general websites
🙏🙏
Trebuchet is pronounced [tre-boo-shay]
26
queryyyselectooor
Very happy 😍💋 💝💖♥️❤️
Hi Guys 😍💋 💝💖
Too much yapping
The last one is actually useless. What's the point of using JS there, when it simply can be completed with CSS? :thinking_face:
it's the concept of using that as an event listener. Of course that specific example could be a css hover, but that's not the point of showing you that. If you're just using stying, then yes CSS is enough. If you need more than styling, then you'd have to use JS. In my example, I showed how you can add a class by essentially hovering over an element. You can't add/remove classes in CSS by hovering over elements, so it all depends on your use case
@@briandesign Got you mate. Doing good job then :)
Which code editor is that?
kinda stoked... i addes the monkey covering the mouth as well so if shuffles through 3 instead of 2 emojis....😁
const closedFace = document.querySelector ('.closed');
const openFace = document.querySelector ('.open');
const mouthFace = document.querySelector ('.mouth');
closedFace.addEventListener('click', () => {
if(openFace.classList.contains('open')) {
openFace.classList.add('active');
closedFace.classList.remove('active');
}
})
openFace.addEventListener('click', () => {
if(closedFace.classList.contains('closed')){
mouthFace.classList.add('active');
openFace.classList.remove('active');
}
})
mouthFace.addEventListener('click', () => {
if(mouthFace.classList.contains('mouth')){
closedFace.classList.add('active');
mouthFace.classList.remove('active');
}
})