• Wednesday , 27 May 2020

JavaScript Tutorial & Real JavaScript Projects

Code Canyon

Get the Code : http://bit.ly/JSTut1
Subscribe to Me: http://bit.ly/2FWQZTx
Best JavaScript Book : https://amzn.to/2GcKzQk

►► Get my Python Programming Bootcamp Series for $9.99 ( Expires Jan 5th ) : http://bit.ly/SaveOnPython7

I get asked to make a JavaScript tutorial with real projects so here it is. We’ll make real apps of increasing complexity using JavaScript. While doing so I’ll also teach Bootstrap, Node, Express, MongoDB, JQuery, React, Vue, HTML Canvas and much more!

It is one thing to see a long list of JavaScript functions. It is more beneficial to see those functions put into action and used to solve real world problems. Eventually we’ll be accessing databases, creating complex interfaces, making games, charts, mobile apps and much more. All of the code follows below.

This 45 minute tutorial only has one 5 second skippable ad. Please consider not Ad Blocking it so that I can continue making free tutorials.


►► JavaScript in 1 Video : https://youtu.be/fju9ii8YsGs
►► Bootstrap Tut : https://youtu.be/gqOEoUR5RHg
►► MongoDB Tut : https://youtu.be/-0X8mr6Q8Ew
►► JQuery Tut : https://youtu.be/BWXggB-T1jQ
►► Express / Node Tut : https://youtu.be/xDCKcNBFsuI

Like the channel? Consider becoming a Patreon! Check it out here:
►► https://www.patreon.com/derekbanas



Original source

3d Ocean

Related Posts


  1. Derek Banas
    January 4, 2020 at 20:47

    Learn in One Videos for Every Programming Language
    Subscribe to Bookmark them: http://bit.ly/2FWQZTx
    C++ : https://youtu.be/Rub-JsjMhWY
    Python : https://youtu.be/N4mEzFDjqtA
    Java : https://youtu.be/n-xAqcBCws4
    PHP : https://youtu.be/7TF00hJI78Y
    MySQL : https://youtu.be/yPu6qV5byu4
    JavaScript : https://youtu.be/fju9ii8YsGs
    C# : https://youtu.be/lisiwUZJXqQ
    HTML5 : https://youtu.be/kDyJN7qQETA
    CSS3 : https://youtu.be/CUxH_rWSI1k
    JQuery : https://youtu.be/BWXggB-T1jQ
    TypeScript : https://youtu.be/-PR_XqW9JJU
    ECMAScript : https://youtu.be/Jakoi0G8lBg
    Swift : https://youtu.be/dKaojOZ-az8
    R : https://youtu.be/s3FozVfd7q4
    Haskell : https://youtu.be/02_H3LjqMr8
    Handlebars : https://youtu.be/4HuAnM6b2d8
    Bootstrap : https://youtu.be/gqOEoUR5RHg
    Rust : https://youtu.be/U1EFgCNLDB8
    Matlab : https://youtu.be/NSSTkkKRabI
    Arduino : https://youtu.be/QO_Jlz1qpDw
    Crystal : https://youtu.be/DxFP-Wjqtsc
    Emacs : https://youtu.be/Iagbv974GlQ
    Clojure : https://youtu.be/ciGyHkDuPAE
    Shell : https://youtu.be/hwrnmQumtPw
    Perl : https://youtu.be/WEghIXs8F6c
    Perl6 : https://youtu.be/l0zPwhgWTgM
    Elixir : https://youtu.be/pBNOavRoNL0
    D : https://youtu.be/rwZFTnf9bDU
    Fortran : https://youtu.be/__2UgFNYgf8
    LaTeX : https://youtu.be/VhmkLrOjLsw
    F# : https://youtu.be/c7eNDJN758U
    Kotlin : https://youtu.be/H_oGi8uuDpA
    Erlang : https://youtu.be/IEhwc2q1zG4
    Groovy : https://youtu.be/B98jc8hdu9g
    Scala : https://youtu.be/DzFt0YkZo8M
    Lua : https://youtu.be/iMacxZQMPXs
    Ruby : https://youtu.be/Dji9ALCgfpM
    Go : https://youtu.be/CF9S4QZuV30
    Objective C : https://youtu.be/5esQqZIJ83g
    Prolog : https://youtu.be/SykxWpFwMGs
    LISP : https://youtu.be/ymSq4wHrqyU
    Express : https://youtu.be/xDCKcNBFsuI
    Jade : https://youtu.be/l5AXcXAP4r8
    Sass : https://youtu.be/wz3kElLbEHE

  2. Ghouse khan
    January 4, 2020 at 20:47

    Google one is the history of New generation of privacy policy…

  3. Yatin Vij
    January 4, 2020 at 20:47

    Only tutorial that actually shows the application of javascript to html and css, unlike the codecademy courses:/

  4. Francis Lambert
    January 4, 2020 at 20:47

    Live Server and Auto-Save….Nice..!

  5. Temirkhan Amanbaev
    January 4, 2020 at 20:47

    Excellent as always!!! Thanks!!!

  6. Krešimir Ćosić
    January 4, 2020 at 20:47

    You have, alongside very few YouTubers, created a generation of self-taught developers. I thank you on behalf of everyone. Thank you kind sir.

  7. Azim Lit.
    January 4, 2020 at 20:47

    Thank you sir !

  8. bagok701
    January 4, 2020 at 20:47

    I had forgotten about that way of calculating pi. Thank you.

  9. Valentin Nortier
    January 4, 2020 at 20:47

    Does the stylesheet append via the bootstrap link avoid the use of a custom CSS file ? I can't get my CSS file to work, unless I delete the link to bootstrap ( <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/)

    Thanks for the quality of your explanations !

  10. DarkChocolate33
    January 4, 2020 at 20:47

    Hmmm, didn't work for me. Wrote everything you did, made sure to check everything(Like I named my own files something else but that's about it) and I get the same page but the buttons do nothing, the color scheme is different(even though I tried playing around with it) and IDK what else to do. Using Google Chrome too so IDK if I should use another browser.

  11. One person
    January 4, 2020 at 20:47

    Hey it won't work for me. Downloaded the extensions, copied your code straight up, reloaded everything and nothing happens when I Press Get PI or Get Fib

  12. Abdullahi Mahmud
    January 4, 2020 at 20:47

    const getFibList = range =>{

    let num1 = 1

    let num2 = 1

    let arr = [1,1]

    let result = 0

    for(i=2; i<range; i++){

    result = num1 + num2

    num1 = num2

    num2 = result



    document.getElementById("n13").value = arr;


  13. Sunny Khan
    January 4, 2020 at 20:47

    inline onclicks looks horrible..

  14. Landysh
    January 4, 2020 at 20:47

    Is it possible to code in Notepad++ only? Or have you any thoughts about other simpler programs that could support HTML, CSS, PHP, SQL, JS (plus Node, Angular, React….) at the same time? Or… are you strongly recommend Visual Studio (and not because it gives an opportunity to code on other languages)?

  15. Zach Zimmermann
    January 4, 2020 at 20:47

    When I first made a function to calculate pi, I only added one fraction at a time and multiplied it by either a 1 or -1 to add or subtract the number, but this was far slower than Derek's seemingly similar implementation. My implementation worked an got the correct answer, which I could test with lower numbers of iterations, but it just took far longer. 100000000 iterations would take so long that my browser would stop responding with my solution but with Derek's it only took a few seconds. Any idea why this is?

  16. Antony Allocious
    January 4, 2020 at 20:47

    You Explained very nicely as well very clearly. I really thank you for this type of video tutorial for us. Can you create Form Validation as well error display in HTML itself? We want to know how to populate error message in dynamically when user clicks SUBMIT Button.

    Thanks Advance

  17. Mike
    January 4, 2020 at 20:47

    Would you make a tutorial on using the NodeJS framework and making something that use it? like for example, an discordbot, or a backend for a website using node or something that require it basically.

  18. FafA mnzm
    January 4, 2020 at 20:47

    Console.log("hello world")
    Doesn't show anything in the terminal
    Does anyone else have this problem?

  19. the traveler
    January 4, 2020 at 20:47

    Awesome project video, please keep these coming! c++ next?! 🙂

  20. Kura'lin Alisasarel
    January 4, 2020 at 20:47

    Don't do this when your suppose to be sleeping, You will make mistakes.

  21. Bongomin Daniel
    January 4, 2020 at 20:47

    This is awesome Derek Banas

  22. Panagiotis P
    January 4, 2020 at 20:47

    As someone said in the comments i would like to see more real world projects.I can say that you help me very very veryyyyy much to learn something.I love your work man i support you <3

  23. Abdul Alhazred
    January 4, 2020 at 20:47

    cool, but everyone knows that notepad++is the superior text editor

  24. Michael Cheverie
    January 4, 2020 at 20:47

    15:05 By the way, Derek, this is awesome! Thank you for all of these tutorials. I have learned a great deal from you. Keep it up, please!

  25. Primo
    January 4, 2020 at 20:47

    Can you use ES6? Thanks for video!

  26. Natesh M Bhat
    January 4, 2020 at 20:47

    Tutorials on react please….

  27. Ashraful Ferdous
    January 4, 2020 at 20:47

    Always have a clean EGG with you!!!!
    That last sentence kept me laughing 🤣

  28. Kyle Thomas
    January 4, 2020 at 20:47

    Watching you code is soothing. You exemplify fine practices for coding a straw-man. The logic behind naming howMany was humorous and helpful. Thank you for a good one.

Leave A Comment

You must be logged in to post a comment.