JavaScript in Half an Hour (Without jQuery!)

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 พ.ย. 2024
  • Join my premium 2024 bootcamp here learnwebcode.t...
    This is how to get started with JavaScript if you're a beginner!
    Follow me for updates on new videos or projects:
    Instagram: / javaschiff
    Twitter: / learnwebcode
    Facebook: / brad-schiff-1542576316...
    Twitch: / learnwebcode

ความคิดเห็น • 765

  • @sanjaybhatikar
    @sanjaybhatikar 4 ปีที่แล้ว +5

    This is one of the most elegant tutorials on Javascript on the web. Thank you for the cat.

  • @Clifton100
    @Clifton100 6 ปีที่แล้ว +1

    I've never seen a javascript tutorial so easy to understand. This guy is a teaching genius.

  • @mrchedda
    @mrchedda 5 ปีที่แล้ว +1

    Finally. A no frills tutorial where the dude doesn't feel the need to put his face on the screen! You show the 'dumb' way and then the 'smarter' way. Teaching the basic rudimentary syntax, then prudently refactor. I think that's a great way for people to learn. Keep it up! You've gained a sub!

  • @Douglaswebdesigns
    @Douglaswebdesigns 8 ปีที่แล้ว +4

    Cannot iterate how well your tutorials are. Exactly the right amount of information, placed at the exact time needed without any bloated nonsense or self-hype. Great work, you are constantly refining your obvious gift for teaching.

  • @michaelolz
    @michaelolz 7 ปีที่แล้ว +1

    I'm a bit blown away because you really did explain all the basic JavaScript elements in about half an hour. Thanks for doing this! Really helpful.

  • @PSGirl23
    @PSGirl23 6 ปีที่แล้ว +14

    You’re a phenomenally concise and friendly teacher! Thank you!

  • @cosyspot
    @cosyspot 5 ปีที่แล้ว

    This is the kind of video I would mark as 100% , very clean , bright, and easy to follow . WELL DONE.

  • @edwardjelliffe1154
    @edwardjelliffe1154 7 ปีที่แล้ว

    You're the first person who's been able to explain this in a way that makes sense to a total beginner, good work, and thanks!

  • @clozeone
    @clozeone 6 ปีที่แล้ว

    I had studied js, html and css before coming to this video and I just couldnt't quite connect how they worked together. This was explained from exactly the right angle. Thank you very much.

  • @kavon9748
    @kavon9748 3 ปีที่แล้ว

    Just paused the video to tell you that you are really good. The way you explain is so easy to follow. And this particular tutorial teaching how javascript works by showing us on the console is huge. This is the first tutorail i have seen doing this parallel with the console, making it so cristal clear, even the console make sens now :D
    For 7 minutes I have learned more than I did for 3 months. THANK YOU!!!
    Please, do more videos - SQLite, PHP, I saw you don't have those; if you can of course.

  • @CanadianPenny
    @CanadianPenny 2 ปีที่แล้ว +1

    What I really like about this tutorial is that it shows how JS interacts with HTML/CSS. Some tutorials have you just writing JS and it's hard to imagine how it applies to an actual website; you end up feeling like you're just learning party tricks.

  • @inthetube9682
    @inthetube9682 5 ปีที่แล้ว +7

    this was the best JS beginner tutorial I seen so far, you make it interesting since you show what can be done with JS. Keep up the good work.

  • @scudmcfox9415
    @scudmcfox9415 5 ปีที่แล้ว +3

    one of the best tutorials if ever seen 👍 really good description and step by step with all necessary hints 👍

  • @Jaydeeofficial
    @Jaydeeofficial 7 ปีที่แล้ว

    i never understood coding and always avoided it. but after watching this video, i feel like maybe i can code too. thank you so much. you're a great teacher.

  • @ga7853
    @ga7853 7 ปีที่แล้ว +27

    Your tutorial was great, you have a unique way of explaining JavaScript, you should mention your name, because it will be remembered and people will really be mentioning it.
    Thanks for great tutorial, and wish you produce more.

  • @nishad3445
    @nishad3445 8 ปีที่แล้ว +45

    excellent video man. kept everything consice and to the point. We need more tutors like you!

  • @EvaRadio
    @EvaRadio 7 ปีที่แล้ว +1

    You did such a great job. I took Java last year but that was horrible so going towards webdev has been more fun. Thank you for having a mini project and not just endless information. More please

  • @philipeleanya9244
    @philipeleanya9244 5 ปีที่แล้ว

    Very clear, clean and precise teaching. Just wow. If you don't understand his teaching then coding is not for you.

  • @techtipsuk
    @techtipsuk 8 ปีที่แล้ว +43

    Really love your tutorials. Not just saying this but they're some if the best I've watched. You just make everything super easy to understand.
    Perfect pacing for me.

  • @warrenmoore135
    @warrenmoore135 7 ปีที่แล้ว +1

    "whatever...let's get it...*click* another one...*click* another one" lol idk why this was so funny to me. subscribing. suuuuper simple in how this is explained. he has a gift

  • @danielsantucci1494
    @danielsantucci1494 4 ปีที่แล้ว +1

    finally i found a Js. Tutorial that is easy to watch and friendly to my ears. good job. Hello from Venezuela

  • @grahambrown7073
    @grahambrown7073 7 ปีที่แล้ว

    Nicely explained, without being expecting the viewer to be either an expert or an idiot. Thank you!

  • @angeliquefm
    @angeliquefm 2 ปีที่แล้ว

    As a new student of web dev, I WISH I had found this before starting Javascript a few weeks ago! You make it so clear. Thank you.

  • @DanielKhoe
    @DanielKhoe 7 ปีที่แล้ว +1

    Here's the css:
    .active {
    background-color: beige;
    }
    #our-button {
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    }
    h1 {
    font-family: sans-serif;
    }
    li {
    width: 420px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid lightgrey;
    }

  • @cristianmiranda4938
    @cristianmiranda4938 6 ปีที่แล้ว +2

    I'm not really a cat person but that cat in the intro was the cutest thing i've seen in all day. Sorry for my english. Hi from Chile.

    • @cristianmiranda4938
      @cristianmiranda4938 6 ปีที่แล้ว

      BTW thanx so much for this video. You're great !!

  • @selenewaide8994
    @selenewaide8994 7 ปีที่แล้ว +7

    Brilliant tutorial, I love the style, really thorough and well planned lesson.

  • @ClayAsbury122
    @ClayAsbury122 6 ปีที่แล้ว

    You are really gifted at explaining this. Never seen a practical JS tutorial presented so clearly. Thank you!

  • @alevanpa1
    @alevanpa1 8 ปีที่แล้ว

    I second Fernando Goya's emotion. Great stuff. I have used JavaScript in the past, and this refreshed some forgotten things. Thanks for posting.

  • @General_Aladeen
    @General_Aladeen 7 ปีที่แล้ว +1

    Thank you, this is what beginners need to learn first instead of bulky frameworks. Native JS is awesome.

  • @robertb7362
    @robertb7362 7 ปีที่แล้ว +2

    Hey Sir. Just would like to drop a note here for you to let you know that you have been helping me a lot with your videos. Please keep it up this channel. I really appreciate the time and effort you put it in. I believe teaching others is not always about the money but the feeling of doing something good for others.

  • @vexmd1112
    @vexmd1112 4 ปีที่แล้ว +1

    3 and a half years later and this tutorial is still amazing

  • @masterkrpto
    @masterkrpto 8 ปีที่แล้ว +2

    Subscribed and bought your Udemy course! Your explanations are so amazingly easily explained, even my toddler would understand (lol) Thanks Brad!

  • @yogeshjjr
    @yogeshjjr 3 ปีที่แล้ว

    You're one of the best instructors I've ever been taught by

  • @d.brilliant5092
    @d.brilliant5092 7 ปีที่แล้ว +1

    I like your simple and clear language, and most of all, I REALLY LOVE YOUR CREATIVITY!!!!!!!

  • @nonchalant8473
    @nonchalant8473 8 ปีที่แล้ว +27

    Awesome tutorial. Your explanation was really easy to understand. Please make some more vanilla JavaScript tutorials. Thanks

    • @droidguy1571
      @droidguy1571 7 ปีที่แล้ว

      im using sublime text

  • @heatherp1410
    @heatherp1410 7 ปีที่แล้ว

    This was the best JS tutorial I have come across so far. Thanks for taking the time to share this with us all - really appreciate the clear details and the cat clips!

  • @claudiustefan8831
    @claudiustefan8831 2 ปีที่แล้ว

    One of the best tutorials on beginers JavaScript. Loved it!

  • @fvgoya
    @fvgoya 8 ปีที่แล้ว +137

    Very simple, clear and helpful explanation! Really well done!
    Indeed, knowing the basis will be easier to make things more complex.
    Thank you!

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว +7

      Thanks so much Fernando!

    • @amrfoda7619
      @amrfoda7619 7 ปีที่แล้ว +4

      hello there LearnWebCode thank you a lot for your support but i need your help someway i want to achieve a double function or a function to do two act change background color to black and when so the text will be invisible iwant to change its color to yellow

    • @CuongNguyen-xw8qu
      @CuongNguyen-xw8qu 7 ปีที่แล้ว

      agreed, thanks you, teacher

    • @MrDadcard
      @MrDadcard 7 ปีที่แล้ว

      You should be able to find that on the net but it should be one function add a click listener or onMouseOver listener and something like this
      function myFunction() {
      document.body.style.backgroundColor = "black";
      document.body.style.color="yellow";
      }

    • @lanoparaisofamilia8036
      @lanoparaisofamilia8036 7 ปีที่แล้ว

      Agora é eu sei porá

  • @block_chain
    @block_chain 4 ปีที่แล้ว

    The way you explain makes it so easy to understand. I watched a couple of JS videos, some of them are great as well, but it is just that yours is the easiest one for me to follow along. Thanks!

  • @PhilipHarperGraphicDesign
    @PhilipHarperGraphicDesign 7 ปีที่แล้ว +11

    …started to get a bit lost around 28:13 with the e.target bit, but a really good JS tut overall. I've been putting JS off for a while but this is a really nicely explained vid 🎉

    • @keplerpierre7783
      @keplerpierre7783 5 ปีที่แล้ว +1

      The "e" is to show more info about the event. It can tell you what someone submit in an input tag and what-not

  • @artham20
    @artham20 5 ปีที่แล้ว +2

    I purchased a bunch of courses but your tutorial cleared so many questions I had, excellent way to explain the principles thank you very much.

  • @octavianc.2569
    @octavianc.2569 6 ปีที่แล้ว

    Absolutely well done. I like the fact that you anticipated the problems a person will encounter and how to refactor the code so that they can mitigate them in the future.

  • @jwyzio
    @jwyzio 7 ปีที่แล้ว

    Even having knowledge about what you were teaching on the video, i couldn't stop watching till the end 'cause of the amazing way that you explain every single step.
    Thanks!

  • @essammustafa9761
    @essammustafa9761 8 ปีที่แล้ว +2

    !Your voice is so friendly, Brad
    !You've a big fan here

  • @BoogWeed
    @BoogWeed 4 ปีที่แล้ว

    I was doing everything I can to avoid JS.... but this brilliant video has changed my mind! Subscribed!

  • @rahulghatkar5748
    @rahulghatkar5748 5 ปีที่แล้ว

    Hands down..... the best tutorial for JS....

  • @stonemassiman
    @stonemassiman 4 ปีที่แล้ว

    You might be the best teacher, I have listened so far, you got a very good method of explaining or teaching and I will be very happy to subscribe to your channel, thanks.

  • @MrPonchovie
    @MrPonchovie 6 ปีที่แล้ว

    omg, so im working on a game and i needed a description given when you select a gamemode, and then i find this, haha very happy

  • @randawg8712
    @randawg8712 5 ปีที่แล้ว

    This was super helpful, because I'm a visual learner. Watching you do it instead of reading about Javascript, makes it much easier! Thanks man! 😎

  • @thegeek8079
    @thegeek8079 7 ปีที่แล้ว

    Awesome tutorials. I had seen countless sources teaching JavaScript and I found yours the best so far. Thanks for your time and efforts to share this with people.

  • @VatsalChauhan12
    @VatsalChauhan12 7 ปีที่แล้ว

    Nice Video Man!!.....Easy to Learn ... I always thought that JavaScript is very hard and i didn't understood it till now...but now i clearly understood how it works!!!......
    Very Nice and Clear Explanation...Keep up the good work!!!

  • @jayconnelly4664
    @jayconnelly4664 7 ปีที่แล้ว

    Very nice ! I am new to javascript but have programmed in many different languages. Just the right pace and right amount of examples to get me to a point where I can be dangerous :)
    Thanks a bunch!

  • @alfonzomckinzee8906
    @alfonzomckinzee8906 7 ปีที่แล้ว

    Awesome! I have watched many javascript video tutorials. This one is the best. So much easier to understand by example than just learning the individual parts and trying to figure out how the hell to use them. Thanks.

  • @RockstahRolln
    @RockstahRolln 7 ปีที่แล้ว

    This was absolutely Fun and Brilliant! Well taught! I believe this is the BEST Javascript tutorial on the TH-cam! More of such tutorials please!

  • @benzflynn
    @benzflynn 5 ปีที่แล้ว +1

    Good idea to teach by useful example. Keeps learners interested and shows them how to (as you put it so well) recycle code elements for their own later examples. Video pace is about right for beginners and the vox is very clear. A good production.

  • @Prash1c
    @Prash1c 5 ปีที่แล้ว

    One of the best teachers for web development on youtube! :) Thank you! :)

  • @practiquemos
    @practiquemos 3 ปีที่แล้ว +9

    Excellent! Thank you 👏

  • @BabyRevealParty
    @BabyRevealParty 6 ปีที่แล้ว

    This is brilliant !! there are so few videos that show JavaScript being practically used with HTML/CSS it helps make sense of it. Thank You.

  • @Zwwiter
    @Zwwiter 7 ปีที่แล้ว

    Super awesome quality content! I started coding a few months ago with python which took me a lot time doing the basics, till now still got a lot to learn, I just want to know how JS works , your video is a great intro, with python knowledge, I find JS is not so difficult to understand. Thank you, my friend!

  • @n_fan329
    @n_fan329 7 ปีที่แล้ว

    ohhh man that was amazingly helpful for my project, I know that Thanks a lot doesn't cover the whole things but dude, you are ROCK !!!

  • @bach5369
    @bach5369 6 ปีที่แล้ว +1

    every single thing in your code is explained perfectly, thank you and subbed :)

  • @MsMelanie117
    @MsMelanie117 3 ปีที่แล้ว

    😲 wooww!! I found the perfect instructor!!. Thank you so much!! I enjoy your video. I was having issues learning JavaScript and after watching your video everything seems a little clear. I can see the horizon of opportunities. Thank you!!!

  • @desert6120
    @desert6120 7 ปีที่แล้ว

    Bro you have explained it so perfectly that even a baby can understand. Your Awesomeee.......

  • @johnny_pilot
    @johnny_pilot 7 ปีที่แล้ว

    Awesome teacher! I struggled to keep up for the last 7 minutes or so - when you said you were "stepping up a gear" - but I've learned a lot and now need to practice with this until I store these new capabilities in my memory. Thank you for an awesome video on JS. I subscribed immediately and now looking forward to learning more from you. :-)

  • @akibsaifi7890
    @akibsaifi7890 7 ปีที่แล้ว

    probably the best js tutorial on youtube..
    gonna share your channel on my facebook group..

  • @gouthamanvlog5376
    @gouthamanvlog5376 5 ปีที่แล้ว +1

    Wow! Really your way of explanation is quite easy to understand. Way of teaching also different. one of my best tutorial video I ever seen before. Thanks a lot...

  • @thomashuntsman9566
    @thomashuntsman9566 7 ปีที่แล้ว

    Brad - Thank you! Wrote my first for loop. You should keep teaching vanilla JS. Very useful fundamentals.

  • @MelindaElaine
    @MelindaElaine 7 ปีที่แล้ว

    Thank you, finally a video about code where every action is explained step by step. So easy to listen to and understand.

  • @svvramprasad
    @svvramprasad 5 ปีที่แล้ว

    This is the most interesting way to explain fundamentals of JavaScript that I have ever come across. Just awesome!!!

  • @007jayy
    @007jayy 3 ปีที่แล้ว

    This video taught me a lot... Even after 4 years I still find it useful!

  • @slavi3d
    @slavi3d 6 ปีที่แล้ว

    Really that's the best JS tutorial for beginners. Well done.

  • @GokuHindustani
    @GokuHindustani 3 ปีที่แล้ว

    Your way of teaching is best I was tired of the java tutorials you made my mind very clear
    Thank you very much😊

  • @volatilityclustering5706
    @volatilityclustering5706 4 ปีที่แล้ว +1

    That's the most concise JS introductory video I've watched! One question though:
    When activateItem is passed as an argument to addEventListener, no argument seems to be passed to activateItem. How does it actually work under the hood? also can one write activateItem() inside addEventListener method?

  • @zubairzafar480
    @zubairzafar480 3 ปีที่แล้ว

    You are just an Excellent Teacher. Thank you for clearly explaining everything.

  • @gamestv4875
    @gamestv4875 7 ปีที่แล้ว

    Your forgot your closing bracket for this lesson...
    Excellent video , learned something,thanks.

  • @dwmaldonado
    @dwmaldonado 8 ปีที่แล้ว

    Wow! Really enjoyed this. Hope to see more like this in the future... TIL how querySelector and querySelector all "actually" work and will definitely be using this moving forward! Ty!

  • @dwaynerobare1153
    @dwaynerobare1153 4 ปีที่แล้ว

    Great video... I'm a beginner, however I do appreciate and like your approach to learning this... I am learning Python right now, but JavaScript is next and on to the next. Lost about 28 minutes, but I'm determined to continue to learn by solving real-world problems.
    Thanks again.

  • @MAA86.
    @MAA86. 7 ปีที่แล้ว

    I am a beginner and i learnt more with this JS tuto thanks for the effort

  • @TimKariuki
    @TimKariuki 7 ปีที่แล้ว

    This was my first Javascript class and I learnt a lot. Thanks a lot.

  • @SelmaDelgado
    @SelmaDelgado 8 ปีที่แล้ว +19

    Great video!! It would be very helpful to post the css mentioned at 23:33 to follow along.

    • @justinweigle7220
      @justinweigle7220 7 ปีที่แล้ว +9

      The css code for those just now coming across this tutorial:
      .active { /* This is the name of the class */
      background-color:beige; /* This is just saying if something is part of the "active" class that it will have a background color of beige */
      }
      You can also use your own choice of color such as red, green, blue or a hexadecimal color by putting "background-color:#xxxxxx" where the 6 x's are hex numbers of a color which you can pick out by googling "hex color selector" and clicking the first link.
      Happy coding!

    • @claychester3228
      @claychester3228 7 ปีที่แล้ว

      its not doing anything. my list items are not changing color

    • @justinweigle7220
      @justinweigle7220 7 ปีที่แล้ว +4

      If you copied and pasted my code into a .css file and linked it properly, it should work as long as you have the html correct. This is done using a line in head like this:
      Alternatively, you can put the code I commented into your head section with tags. Such as:
      .active {
      background-color:beige;
      }
      I also posted the entire .css file of the code that I used in the comment section of the video here if you'd like your entire page to look like his, or at least very similar.

    • @droidguy1571
      @droidguy1571 7 ปีที่แล้ว

      i did the same and does not work. Which element do we give the class to?

    • @justinweigle7220
      @justinweigle7220 7 ปีที่แล้ว +2

      If you post your activateItem class I can maybe help you, but I know it isn't a problem with the css if you copied what I posted

  • @MrBenjjj6
    @MrBenjjj6 8 ปีที่แล้ว

    JS is something I have been putting off for ages, glad to see you teaching it :)

  • @SL-ey2wl
    @SL-ey2wl 5 ปีที่แล้ว

    This bloody rocks...This is awesome to remind yourself about basics of JavaScript!!!This is awesome down to a detail JavaScript tutorial!!!

  • @kadiroelemo7585
    @kadiroelemo7585 6 ปีที่แล้ว

    Very educational. Your presentation is simple and engaging. Only from this video I learned a lot. Keep it up, bro.

  • @delphimore
    @delphimore 4 ปีที่แล้ว

    Nice one ,excellent video man. kept everything consice and to the point. We need more tutors like you!

  • @rajucherian
    @rajucherian 7 ปีที่แล้ว

    Clear & Simplest of all tutorials. It would have been even better if you explained the css used a little bit.

  • @rainmakerguy
    @rainmakerguy 4 ปีที่แล้ว

    Best JavaScript lesson for beginners

  • @rujalacharya6789
    @rujalacharya6789 5 ปีที่แล้ว

    Thanks a lot. That was the great intro of Javascript to me.
    Just a small comment. In the if statement ie. e.target.nodeName you wrote LI in uppercase and didn't say it was mandatory. So I carelessly wrote it in lowercase and the code didn't work. So I spent about 30 minutes finding out the error. Finally the code worked. (What I basically did was shared my experience :) ).
    Thanks a lot for this great tutorial. Now I am eager to learn more JavaScript. Cheers

  • @omarelmohri
    @omarelmohri 7 ปีที่แล้ว

    Finally what I needed to start using JavaScript

  • @syedaanna7858
    @syedaanna7858 5 ปีที่แล้ว +8

    Me : watching it ,Oh I got this
    Also me : While applying, what did I watch 🤔

  • @semco72057
    @semco72057 5 ปีที่แล้ว

    I like the description you gave here in this video and will be trying it out myself to see how much I have learned.

  • @antonioguiotto529
    @antonioguiotto529 6 ปีที่แล้ว

    very important lesson on how to deal with the console, very nicely explained

  • @riffaxelerator7299
    @riffaxelerator7299 8 ปีที่แล้ว

    Amazing tutorial! I have been trying to learn Javascript for longer than I care to say. This lesson made a lot of pieces fit.

  • @enginejhammer
    @enginejhammer 8 ปีที่แล้ว +273

    i'm here for the cat

    • @legal6877
      @legal6877 7 ปีที่แล้ว +1

      lmao

    • @radiclelife
      @radiclelife 5 ปีที่แล้ว +2

      Didn’t even know their was a cat when I arrived. Staying for the cat now.

    • @vaninwebsolutions9994
      @vaninwebsolutions9994 5 ปีที่แล้ว +1

      I'm at 25 minutes into the video... I hope he shows the cat again before the video is over...

    • @vaninwebsolutions9994
      @vaninwebsolutions9994 5 ปีที่แล้ว

      No such luck :(

    • @sabbasachisaha
      @sabbasachisaha 5 ปีที่แล้ว

      thanks a lot for precise and resourceful tutorial

  • @vinobajohn2393
    @vinobajohn2393 4 ปีที่แล้ว

    You gave new perception on JS.. love you man

  • @goodness776
    @goodness776 2 ปีที่แล้ว

    You are an amazing gifted teacher!!! Subscribed.

  • @dressesdesign110
    @dressesdesign110 7 ปีที่แล้ว

    very simple coding and very clean language that a person like me can understand, great tutorial

  • @doctorpauk
    @doctorpauk 3 ปีที่แล้ว

    Dude, I just subscribed to your channel. You're great, thank you!

  • @kolby9655
    @kolby9655 8 ปีที่แล้ว

    i really enjoyed this a lot. it helped me to understand javascript a lot more. I am only 12 years old and i've been working with HTML, CSS ,and JAVASCRIPT for about 10 months i've gotten a lot down so far but this video made me understand even more about javascript. thank you

  • @MrDadcard
    @MrDadcard 7 ปีที่แล้ว +11

    I love the way you explained things and the fact that you showed the new way of selecting stuff at the end. However, I did not like the fact I couldn't see your css files

  • @Two_Buck
    @Two_Buck 6 ปีที่แล้ว

    Great video. I am still learning JavaScript and find it difficult. I like your teaching style. I do have to say I was following along pretty well but started getting lost towards the end.