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.
RELATED 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
THANK YOU TO MY PATREON SUPPORTERS LIKE :
ckcoder.com
vsolutions.be
Original source
28 responses to “JavaScript Tutorial & Real JavaScript Projects”
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
Google one is the history of New generation of privacy policy…
Only tutorial that actually shows the application of javascript to html and css, unlike the codecademy courses:/
Live Server and Auto-Save….Nice..!
Excellent as always!!! Thanks!!!
You have, alongside very few YouTubers, created a generation of self-taught developers. I thank you on behalf of everyone. Thank you kind sir.
Thank you sir !
I had forgotten about that way of calculating pi. Thank you.
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 !
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.
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
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
arr.push(result)
}
document.getElementById("n13").value = arr;
}
inline onclicks looks horrible..
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)?
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?
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
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.
Console.log("hello world")
Doesn't show anything in the terminal
Does anyone else have this problem?
Awesome project video, please keep these coming! c++ next?! 🙂
Don't do this when your suppose to be sleeping, You will make mistakes.
This is awesome Derek Banas
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
cool, but everyone knows that notepad++is the superior text editor
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!
Can you use ES6? Thanks for video!
Tutorials on react please….
Always have a clean EGG with you!!!!
That last sentence kept me laughing 🤣
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.