Deprecated: Function create_function() is deprecated in /var/www/vhosts/ on line 70
JavaScript Tutorial & Real JavaScript Projects |
  • Tuesday , 27 October 2020

JavaScript Tutorial & Real JavaScript Projects

Code Canyon

Get the Code :
Subscribe to Me:
Best JavaScript Book :

►► Get my Python Programming Bootcamp Series for $9.99 ( Expires Jan 5th ) :

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 :
►► Bootstrap Tut :
►► MongoDB Tut :
►► JQuery Tut :
►► Express / Node Tut :

Like the channel? Consider becoming a Patreon! Check it out here:


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:
    C++ :
    Python :
    Java :
    PHP :
    MySQL :
    JavaScript :
    C# :
    HTML5 :
    CSS3 :
    JQuery :
    TypeScript :
    ECMAScript :
    Swift :
    R :
    Haskell :
    Handlebars :
    Bootstrap :
    Rust :
    Matlab :
    Arduino :
    Crystal :
    Emacs :
    Clojure :
    Shell :
    Perl :
    Perl6 :
    Elixir :
    D :
    Fortran :
    LaTeX :
    F# :
    Kotlin :
    Erlang :
    Groovy :
    Scala :
    Lua :
    Ruby :
    Go :
    Objective C :
    Prolog :
    LISP :
    Express :
    Jade :
    Sass :

  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="

    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.