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. :)
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.
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.
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 :)
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")) {....}
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.
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 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.
"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.
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 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 🙌
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
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?
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
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.
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!
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.
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!
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
