Build 15 JavaScript Projects - Vanilla JavaScript Course

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 1,4 тис.

  • @eugene9089
    @eugene9089 4 роки тому +1094

    thank you for this i got a job because of these projects

  • @kevinvikan3609
    @kevinvikan3609 Рік тому +376

    Great projects! Lеarning by practicing is so much better. Even if all you do is copying a few lines of code that you see in each lesson. Much more effective than just taking notes.
    I know this because I tried everything and the only way I could learn (and retain what I learned) was when I started doing that.
    Once a friend suggested me a few books with interactive content, that made me practice what I learned at each chapter.
    Edit: For those asking about the books I mentioned, these are the best ones:
    "Javascript In Less than 50 Pages"
    "Head First Javascript Programming"
    If you are into learning Python, "Smarter Way to Learn Python".

    • @iuseflare
      @iuseflare 3 місяці тому +4

      this is a bot for those of you who dont know its just promoting a book

  • @abdul-rehman-d
    @abdul-rehman-d 3 роки тому +79

    Was almost lost after learning programming concepts in Javascript, having no idea how to implement them in a project and this is exactly the kind of tutorial I needed.
    Thank you so much, man. Truly grateful.

    • @banda3003
      @banda3003 8 місяців тому

      hey Brother ! How you'r doing now

  • @ev721
    @ev721 4 роки тому +308

    I've been banging my head against the wall for days with similar projects and John types it out so casual in 20 minutes or less... Learning a lot here. Thank you!

    • @sethfrady9334
      @sethfrady9334 4 роки тому +40

      That's because he is looking at something while he is doing it, don't worry not everyone is as smart or fast as you think lol

    • @spirlo
      @spirlo 2 роки тому

      did u learn javascript and get a job after a year :D

    • @sookiezboly4502
      @sookiezboly4502 2 роки тому

      @@spirlo
      Unless you're very very very good and have a background in coding, i'll be hard.

    • @kaustubhmaladkar869
      @kaustubhmaladkar869 2 роки тому +2

      @@sethfrady9334 At least everybody is as jealous and arrogant as you think

    • @universecode1101
      @universecode1101 2 роки тому

      Learn and create projects is the best thing

  • @farahf.62
    @farahf.62 3 роки тому +520

    Dear John,
    I can't express how much you are helping my learning journey. I was feeling so frustrated not being able to grasp JavaScript concepts. This video is just amazing and can't thank you enough for sharing it. Thank you for your time and generosity. Sharing such quality courses for free... Once I complete the 15 projects, I will definitely enroll in your REACT udemy course.
    Cheers.

    • @kaczicskaczyk6798
      @kaczicskaczyk6798 2 роки тому +3

      Im feeling just the same :D So grateful

    • @universecode1101
      @universecode1101 2 роки тому +2

      I try to do the same by sharing my knowledge as a self-taught developer

    • @Mohammad.keramati
      @Mohammad.keramati 2 роки тому +2

      منم تازه کارم و این آموزش معرکست.توی ایران معمولا پایه ای آموزش میدن و نمیتونیم باهاشون کد بزنیم

    • @adilchoudhary7608
      @adilchoudhary7608 2 роки тому

      i am also learning today

    • @HayWhy_Pappy
      @HayWhy_Pappy 2 роки тому

      @Farah F. How did it go.

  • @gimbamanassehataknuanyidap9418
    @gimbamanassehataknuanyidap9418 2 роки тому +14

    this tutorial is 8hrs long but i've been on it for a week now and i will tell you one thing it is awesome and i'll recommend it to anyone who wants to get ahead with javascript, thanks for the great work. folks, recommend me great projects to take on, thanks.

  • @lonleybeer
    @lonleybeer 3 роки тому +62

    OMG THIS IS HUGE, thank you so much for posting this as someone who's new to coding and never had experience with it this is huge, thank you

    • @cyberdragon5074
      @cyberdragon5074 3 роки тому

      ua-cam.com/video/xMZEewNor6k/v-deo.html

    • @jacksonyusuf733
      @jacksonyusuf733 3 роки тому

      You all probably dont care but does someone know a trick to get back into an Instagram account?
      I was stupid forgot my login password. I appreciate any help you can offer me!

    • @theivanchen
      @theivanchen 3 роки тому +1

      @@jacksonyusuf733 yea, click the forgot password button when you try to login and it will send a link to the email that is connected to that Instagram. Then you will be able to reset your password

    • @gunnerdreem
      @gunnerdreem 3 роки тому

      @@theivanchen hes a bot dude

  • @eklavyasharma
    @eklavyasharma 4 роки тому +194

    I have created Color Flipper, Counter, Navbar, Modal and Questions so far. I swear I didn't look at the code. I just clicked on the timestamp, looked at the project and made it my own.
    Thank you for inspiring. :)

    • @mirzaaleem2764
      @mirzaaleem2764 4 роки тому +4

      Me too trying the same

    • @eklavyasharma
      @eklavyasharma 4 роки тому +4

      @@mirzaaleem2764 good luck

    • @connornuggets5450
      @connornuggets5450 4 роки тому +2

      That's great..may I know where did you learn all these JavaScript stuff?
      Thank You

    • @doobie6971
      @doobie6971 3 роки тому

      daum nice job dude, you must be pretty good at js

    • @dras227
      @dras227 3 роки тому +2

      how his css style automatically applying?? Is he wrote css earlier or he using some kind of framwork? i am newbie help pls

  • @SadDamniT
    @SadDamniT 3 роки тому +8

    I completely love Javascript, I tried learning it for continuous six months, I gave up and stopped for 2 weeks. And then suddenly I know most of the things I learned which I thought I don't remember.
    It's blessed Language!!

  • @dinaravaleeva7588
    @dinaravaleeva7588 2 роки тому +4

    There are many great developers on UA-cam, but not all can teach. John is def a born teacher who really cares about his listeners. Thank u!)

  • @cjwebdev
    @cjwebdev 4 роки тому +61

    I want to say Thank you for these projects and your teaching. I am comfortable with HTML and CSS but have been struggling with JS. This course is exactly what someone like me needs. I will be repeating this course over and over again.

    • @mohamedaslam3381
      @mohamedaslam3381 3 роки тому +3

      Hey, can we learn together please. A help.

    • @cjwebdev
      @cjwebdev 3 роки тому +1

      @@mohamedaslam3381 I subscribed to your channel. If you want to talk.

    • @cjwebdev
      @cjwebdev 3 роки тому +2

      @@mohamedaslam3381 Ya just let me know your email and I'll check tomorrow for it.

    • @mihirnatani4479
      @mihirnatani4479 3 роки тому +1

      @Mayank Singh yeah me too

    • @arunhembram1859
      @arunhembram1859 3 роки тому +2

      @Mayank Singh Anybody here?

  • @hitbits1918
    @hitbits1918 4 роки тому +44

    that scrolling project is my fav, it was awesome, learning so much. Thanks a lot for this course.

  • @brakeduster
    @brakeduster 3 роки тому +87

    Really versatile lessons here. Thanks for the resource and high praise to John Smilga for the clear and concise, yet well-paced tutorials. 5-star rating!

  • @chaoticthegod
    @chaoticthegod 4 роки тому +41

    Not just 1 but 15 projects, free no ads, wish I had money to donate you guys rock

    • @blasttrash
      @blasttrash 4 роки тому +1

      I actually looked at these projects. No offense, no one should pay money to learn how to build these. They are dead simple that anyone can learn for FREE online.

  • @lattesu_
    @lattesu_ 3 роки тому +32

    no words can express how thankful i am but still, thank you! i just started self studying javascript 2 days ago with 0 knowledge and was just going through random projects i can find on youtube till i stumbled on this vid, quite easy to understand and i can feel the sincerity of your teaching, while i struggled at first i was getting a headache trying to code the js for color flipper myself before i refer to your code haha, but when i got to the 4th project i was already able to think ahead for myself and understood the structure(?) of the functions that you use and being able to do the js myself before referring to yours for corrections felt really nice
    again, thank you! *hugs*
    i hope i can keep on learning more

  • @Bonny2035
    @Bonny2035 7 днів тому

    i stopped everything about hackings, awent to learn these programming laguaging, js,python and java. applying these project helped a lot. I was jobless for 6 months, I dedicated 3 months learning them, 8h/day diligently . thanks , without any effort got 2 remotes jobs as a cyber sec analyst. 5 figures monthly. i love you guys

  • @ninopotskhoraia5373
    @ninopotskhoraia5373 2 роки тому +26

    What you've done for us here is incredible. You've made me more confident to try writing some javascript on my own and helped me progress so much. I'm only half way through the projects but already feel so much more capable in my coding practice. Thank you so much!!!

  • @abdulsaabirhaaji9876
    @abdulsaabirhaaji9876 2 роки тому +1

    I just finished the 3rd project and I can't believe the amount of knowledge I am getting it's really ridiculous this is free,, and all for those who are watching this Be grateful for these guys , If you aren’t grateful this I donno what kind of person you're

    • @HayWhy_Pappy
      @HayWhy_Pappy 2 роки тому

      Ha ha. Sure man. How did it go for you man.

  • @haseebmohammed2670
    @haseebmohammed2670 4 роки тому +5

    I'm blown away with the clarity and quality put in this tutorial.Thanks for your EFFORT !!!

  • @xMoonlove
    @xMoonlove 2 роки тому +58

    This is really satisfying, I can see the progress as I go along with you. With the first 2 projects, I had to follow along with you step by step, then for the rest I basically did everything on my own without looking & compared my code to yours to learn from your solutions.

    • @WillSmith-qt7me
      @WillSmith-qt7me 2 роки тому +8

      Wow, maybe you are pro?

    • @amanikashema4621
      @amanikashema4621 2 роки тому +1

      Me too Basically you get to understand Dom Manipulation in depth something that i have been struggling to grasp

    • @anessheremeti3311
      @anessheremeti3311 2 роки тому +1

      Did u watch what he has done or just went all in your own? (basically i watch what he does and then do it on my own i understand the logic behind it btw)

  • @lk8883
    @lk8883 3 роки тому +22

    Exactly what I was looking for! Went through your lectures and then reviewed them on my own. It really helped A LOT to learn and practice many different type of web pages. You are an amazing teacher!! Appreciate your work♥️

  • @N1rOx
    @N1rOx Рік тому +1

    This is exactly what I've been looking for as a follow up once completing the Responsive Web Design and Javascript Algorithms and Data Structures Certification on FCC. I wanted to start creating a few projects to get some repetition in, so i don't forget a lot of things I've learned. I'm not a very creative person so this is great! I'm working my way through the project list, I'll skip to the finished project, explore it's design and functionality, take a few notes then code everything from scratch. Not just the JS, but the HTML and CSS too. I'll come back once I'm satisfied and watch your video on the project and I've been learning a lot! Thanks so much guys. If I ever get a job from this, I'll make a donation :)

  • @mirpeter
    @mirpeter 3 роки тому +16

    Great course. Very analytical in everything he does, which is perfect for beginners.
    I am halfway through the video and writing along. I've already learned tons of stuff.

    • @ofearfish6541
      @ofearfish6541 3 роки тому +1

      his voice tho, closes nose and speaks :"Ill just add this const here to make everything beautiful"

  • @kaustubhmaladkar869
    @kaustubhmaladkar869 2 роки тому +5

    This video had the first JavaScript challenge I was able to complete on my own! Lovely video! Filled with confidence for my journey

  • @awaraamin6850
    @awaraamin6850 3 роки тому +10

    Thank you man so much! Super useful projects. I did myself 13 out of 15 projects. However, after finishing each project, I watched your video to see and learn your way of doing the projects too.

  • @sachinnegi6357
    @sachinnegi6357 3 місяці тому +2

    They are really good projects, and what I like the most about this series is they are in a perfect order from basic to advanced I was able to create first 6 projects on my own without looking the tutorial, I even wrote the javascript by myselft too..and It felt really good after achieving the desired results.. really proud.
    but now I am on the questions webiste which is totally new for me so I have to watch the tutorial for this..
    will update my comment after completing the series....🚀🚀🔥🔥

  • @celeis100
    @celeis100 3 роки тому +82

    Great projects, and John is a wonderful instructor (got some of his Udemy courses as well) who actually explains how any code that he writes works.

    • @hrisdev950
      @hrisdev950 2 роки тому +6

      I'll be honest, I hate his voice no matter how well he teaches, he sounds to me like a google translate

    • @luispereira4495
      @luispereira4495 2 роки тому

      @@hrisdev950 yep

    • @present1021
      @present1021 2 роки тому

      @@hrisdev950 wow wow

    • @universecode1101
      @universecode1101 2 роки тому

      great projects

  • @nnekachukwuemeka950
    @nnekachukwuemeka950 4 роки тому +22

    this is beautiful. i have been struggling with Js but you have opened my eyes to some of my problems. Thank you for making it free

  • @ibuprofenPill
    @ibuprofenPill 4 місяці тому +4

    First of all, great video. Even though it's a javascript video, the toughest part in a lot of the sections is understanding the CSS.

  • @estemon
    @estemon 4 роки тому +28

    I want to share a small improvement for the 3rd challenge. On random button, if you select a random number between 0 and reviews.length you may notice sometimes this random number is the same as you got before, so for user it seems that button is not working, because the person doesn't changes. I've created an array to store values that are NOT the actual currentItem value:
    let arr = [];
    for (var i = 0; i < reviews.length ; i++) {
    if (i != currentItem) {
    arr.push(i);
    }
    }
    currentItem = arr[Math.floor(Math.random()*arr.length)];

    • @davepiland2826
      @davepiland2826 4 роки тому +3

      I also ran into that issue with the random button. I went about it a little differently by setting a new variable of the current reviews index, comparing the current state with the randomly generated number and then regenerating a new random number if the two values were equal.
      // show random review
      randomBtn.addEventListener('click', function() {
      // creating new variable to store current review state before generating a random index
      let currentReviewState = currentReviewIndex;
      // generating random number based on length of reviews array
      currentReviewIndex = Math.floor(Math.random() * reviews.length);
      // comparing if the randomly generated number is equal to the previous review index. If the variables equal each other
      a new random number will be generated
      if (currentReviewState === currentReviewIndex) {
      console.log("there is a match between the currentReviewState, " + currentReviewState + " and the currentReviewIndex, " + currentReviewIndex + ". Generating a new random number." )
      currentReviewIndex = Math.floor(Math.random() * reviews.length);
      console.log("The new currentReviewIndex is " + currentReviewIndex + ".");
      }
      setReviewProperties(currentReviewIndex);
      });

    • @gratiano_sig
      @gratiano_sig 4 роки тому +13

      I had that same consideration! I used a while loop:
      randomBtn.addEventListener('click', () => {
      let randomItem = currentItem;
      while (randomItem === currentItem) {
      randomItem = Math.floor(Math.random() * reviews.length);
      }
      currentItem = randomItem;
      showPerson(currentItem);
      });

    • @nightcode.
      @nightcode. 3 роки тому +1

      Could you plss explain me?

    • @prathmeshborse5221
      @prathmeshborse5221 3 роки тому

      got the same problem bro....thank you

    • @cbehen
      @cbehen 3 роки тому

      let previousRandonNumber = 0;
      randomBtn.addEventListener('click', function () {
      do {
      currentItem = Math.floor(Math.random() * reviews.length);
      } while (currentItem == previousRandonNumber);
      previousRandonNumber = currentItem;
      showPerson(currentItem);
      });
      Check this one

  • @miniMalisticUs
    @miniMalisticUs 2 роки тому +6

    Dear John,
    Even tho I'm not sure I'd be able to find time to complete the entire video, I'm dropping by to appreciate your effort in sharing your expertise which is helping so many build their own codes and projects eventually. In addition, your voice and lecture speed are so pleasant, relaxed and laid back, feels like hearing a mellifluous note.
    Thanks & Regards,

  • @christianhalaby832
    @christianhalaby832 2 роки тому +2

    Day 3 of following this course: each day i am doing one of the small projects, today on day 3 i did the reviews project, unlike the first 2 days where i was mainly just following, i did do most of the stuff alone! will update tomorrow.

  • @estemon
    @estemon 4 роки тому +24

    Hey! What a great projects! Thanks for sharing! One small idea on your video deploy: maybe you can change UA-cam options to allow automatic subtitles? I'm non native English speaker and, although I can follow your explanations I'm sure it will be more easy if I can listen and also read what are you talking about. I'm pretty confident that some of your audience will enjoy and be grateful if you allow automatic subtitles. Thanks again for sharing your work!

  • @tonyt_mp4744
    @tonyt_mp4744 11 місяців тому

    I just graduated college with a BS in Software Development and i see that a lot of the jobs around me are looking for backend people with knowledge of Javascript. Im starting here! Thanks for taking the time to make this homie

  • @pabhay235
    @pabhay235 3 роки тому +6

    Too good small projects to understand Javascript. Really helpful. Thanks a ton for making this available for prospective learners. God bless you.

  • @ramanarc
    @ramanarc Рік тому +13

    You sir, understand the challenges a beginner faces and address it step by step in each project. Great teacher hands down. thank you for your hard work

  • @swing-o-gram
    @swing-o-gram 4 роки тому +47

    Thank you for putting this together. It's been immensely helpful and really well done. Coming from having done the HTML/CSS/JavaScript course on FCC this has been a great next step to learn how one actually puts it all together and practise the same patterns over and over again to really make you remember the principles.

  • @ankitgupta9155
    @ankitgupta9155 4 роки тому +5

    I am connected from last year and I got such great things for my Learning. Great work for learners !

  • @TheProtagonist555
    @TheProtagonist555 4 роки тому

    This takes big heart to give knowledge for free. Unlike others, you're giving it for free. Of course, charging for courses is not a crime. Everyone has their hard-work behind them. But this is priceless. Even premium sites lack this level of clarity.. God bless you.

    • @cjwebdev
      @cjwebdev 4 роки тому

      I agree 100%. I've been watching courses and purchasing Udemy courses for the past six months and this has been the best lesson format and learning experience thus far.

  • @mohammadsadeghhosseini2125
    @mohammadsadeghhosseini2125 3 роки тому +36

    i keep watching this and i keep thinking why i dont have the option of liking this video for more than once

  • @ASMRcode
    @ASMRcode 6 місяців тому +1

    Completed 3 hours and the menu project was super helpful. Will revisit the remaining parrts of this video tomorrow. Thankyou!

  • @khalidanejjar4404
    @khalidanejjar4404 4 роки тому +4

    I am one of the student of John Smilga ❤️. Thanks for sharing this course 🌹🌹

  • @materialknight
    @materialknight 2 роки тому

    50:46 If your left & right icons don't work, use a tag instead of an tag. For your convenience:

  • @edsword9071
    @edsword9071 4 роки тому +80

    Perfect Time For Me
    I just finished Webdevelopment course.

    • @rambaburaj7333
      @rambaburaj7333 4 роки тому +2

      How to learn a js ?

    • @another_lazy_learner
      @another_lazy_learner 4 роки тому +3

      Is this good for beginners?

    • @aryan04jaiswal
      @aryan04jaiswal 4 роки тому +4

      Aye same here just completed HTML css bootstrap and js this course is perfect for hands on practice

    • @shuaibkhan8525
      @shuaibkhan8525 4 роки тому +1

      @@another_lazy_learner yup

    • @gilbertlopez
      @gilbertlopez 4 роки тому +2

      Aryan Jaiswal on the website or the video? asking cuz i wanna know if i should finish the freecodecamp curriculum or just learn from these vids

  • @nreginadesire9857
    @nreginadesire9857 2 роки тому +2

    This is exactly what i needed, with just one project done i feel so much moved thank you

  • @thesafaripictures3453
    @thesafaripictures3453 3 роки тому +7

    This course made me understand how to apply JS. Thank you so much.

  • @fariadworld446
    @fariadworld446 9 місяців тому +3

    Vanilla JS is incredible, I am just wondering how much should you learn, it never gets end especially when Node coming in the picture!

  • @FinArt119
    @FinArt119 8 місяців тому +3

    you need to go back and explain more about fixed-nav in css when talking about the scroll position modify. Because there is only 1 navBar, with 2 status: Top or Fixed. With Top, the navbar is in the flow, which adds the navheight into the total scroll. With Fixed, we move it out of the scroll flow, which makes the scroll slide up with a distance of navHeight. That's why we need to modify it 1 more time.
    in General, the navbar is taken out of the flow and go with the top screen. It's 1 thing. Not 2 like we thought, one nav is static, one nav is appeared and go with scroll screen.

  • @mozayanmoeed5539
    @mozayanmoeed5539 Рік тому +2

    Sir John's teaching method is top-notch and all UA-camrs who teach courses should follow it. I have immense respect for him and want to express my gratitude.❣❣❣

  • @jackaverill8788
    @jackaverill8788 2 роки тому +5

    Hi John, this is a great course and you explain things very clearly and with just the right amount of context and detail. As others have said, it's often confusing learning these techniques and methods without knowing anything about how they would be put into practice in the real world, and this course filled a giant missing piece of the puzzle for me. Thanks for putting this together - when I've finished this one, I'll be getting the paid one on udemy.

  • @innoxgraphics3269
    @innoxgraphics3269 4 роки тому +10

    I can't believe this is all free, You have a true Golden heart 🙏

  • @manodwipkundu3276
    @manodwipkundu3276 4 роки тому +21

    Awesome tutorials. I really loved it. Some days ago I wanted this type of project tutorials. Thank you❤

  • @daivinsoncoffi
    @daivinsoncoffi 2 роки тому +1

    Dear Mr. John.
    Excuse me, the subtitles are not synchronized, for those of us who speak little English, thank you very much for the projects and giving us the knowledge that many of us require.
    Best regards.

    • @diana101210
      @diana101210 2 роки тому +1

      Oh!... pensé que era la única loca que pensaba que lo que decían no tenia coherencia con los subtítulos. Y no tiene subtitulos completos

    • @daivinsoncoffi
      @daivinsoncoffi 2 роки тому +1

      @@diana101210 si no se puede hacer más nada simplemente tratar de entender lo que se pueda

    • @diana101210
      @diana101210 2 роки тому +1

      @@daivinsoncoffi si, eso me ha tocado hacer o buscar proyectos similares. Para entender mejor 🤣

    • @daivinsoncoffi
      @daivinsoncoffi 2 роки тому

      @@diana101210 Si hay que practicar mucho ahorita estudiando para ser Fullstack en eso estoy sabes como es hay que practicar full y buscar un mejor trabajo si se puede

  • @shanemcinally7092
    @shanemcinally7092 4 роки тому +11

    WOW! All of these look so good especially for beginners like me.
    Thank you!

    • @shareefulazadshourov859
      @shareefulazadshourov859 4 роки тому

      Is this tutorial really suitable for an absolute beginner if he is a quick learner? Actually It's more fun to learn something while working with it. That's why asking. Please, do response.

    • @napoleonbonaparte1260
      @napoleonbonaparte1260 4 роки тому +1

      @@shareefulazadshourov859 I might say you must have a basic knowledge of javascript before you jump to this projects. An absolute beginner will not survive by just looking at this projects.

    • @shareefulazadshourov859
      @shareefulazadshourov859 4 роки тому

      @@napoleonbonaparte1260 Thank you very much for your kind information. I really appreciate it. Best wishes!

  • @Zilla702Killa
    @Zilla702Killa 3 роки тому

    I've been doing 1-2 a day before my bootcamp starts next month. Thank you for this, its helping me learning javascript.

  • @idanoren23
    @idanoren23 2 роки тому +3

    Wow - so thankful for this content. By far the best JS tutorial online. So much better than other paid courses!

  • @aryaprima4698
    @aryaprima4698 Рік тому +3

    this tutorial makes my brain really work hard to understand the code, but it's very good for my brain, there's a lot of logic that I can understand even though it requires a fairly mature reset when I finish working on the existing tutorial, thank you very much !!!

  • @doutorgori327
    @doutorgori327 2 роки тому

    I'm just learning JavaScript and I think I've struck gold finding this video!
    Exactly what I needed!

  • @Excelseron
    @Excelseron 4 роки тому +31

    THANKS FOR THE BEST EDUCATION! ❤

  • @mahmoudhassen4463
    @mahmoudhassen4463 3 роки тому +2

    4:30:00 a better way to scroll to elements in the right position instead of calculating the element position from the top, subtracting the nav height, and dealing with different screen sizes is to just use scrollIntoView like so.. element.scrollIntoView({ block:"center", behavior: "smooth" }) .

  • @al-madaniomar3142
    @al-madaniomar3142 4 роки тому +10

    Thanks for teaching us as loyalty and honesty I learnt a lot of technology from you thanks again

  • @karimelamrani2174
    @karimelamrani2174 3 роки тому +1

    Thank you for this toturial
    I completed all the projects in 3 or 4 days and I am proud of myself

  • @davidencinas86
    @davidencinas86 4 роки тому +4

    Thank you very much for making all of this available to us. I been struggling with JS and you have cleared it up for me. You guys are all awesome and I for one can't thank you guys enough.

  • @Tom-gt8yv
    @Tom-gt8yv Рік тому +1

    Ironically, this video which im halfway through now has significantly improved my css skills, each time i write out the html setup along with him in this video but then i choose to attempt to recreate his already setup css. Was a pain to begin with but now i whip up one of these projects basically looks the same as urs and works responsively the same (i add my own theme though like cars over pancakes etc) quite quickly :D.

  • @chessgenius123
    @chessgenius123 Рік тому +3

    The menu video is the most beneficial so far compared to all the other ones because he goes over so many different concepts and he teaches us a little bit about the backend as well. Great video!
    P.S I didn't know that you could store an array inside of a parameter with reduce without any prior variable needed to store the array. That's very interesting! Also the "item" parameter is looping through all of the keys of the menu array of objects.

  • @ReviewsRandomslul
    @ReviewsRandomslul 4 місяці тому

    This has been a life saver, just what I needed after learning js basics, I think it's good practice to not download anything and just try to get the same result with my own html and css (which of course takes forever but it's good practice) and trying to get the js part on my own before watching how he does it, of course I get it done in a different and more inneficient way but looking back just 2 weeks ago I didn't have the confidence to do simple things like this, this is huge, thanks for all these free content.

  • @anshumanxda
    @anshumanxda 4 роки тому +454

    His voice is like ease out animation

  • @producermind9030
    @producermind9030 3 роки тому +2

    amazing.. I really needed to see some real world examples of what JS was used for. My brain was going nuts trying to figure out why it was so important to understand certain things. Now I know why! Well done. I'll be coming back around to do these projects for sure.

  • @haenleinjane9594
    @haenleinjane9594 4 роки тому +9

    Thanks for these great projects, very clear and easy to follow along. Bravo!

  • @opensourcerror
    @opensourcerror Рік тому

    LOVE the big font (makes it easy to watch on other screens) and the explaining

  • @filip23128
    @filip23128 3 роки тому +4

    Hi John, thank you very much for this wonderful tutorial, very clear and super easy to understand explanations - you are a very talented teacher. I will happily continue learning to code with your help and take other of your courses. Once again thank you!

  • @guillermomazzari4983
    @guillermomazzari4983 2 роки тому +1

    Thank you so much, I had only seen the theory of JS, luckily, understood all of it, but had no idea how to apply it to a project, I've only had time to see the first project, and already helped me so much, gonna watch them all, thank you!!!

  • @amds-fo5jw
    @amds-fo5jw 4 роки тому +14

    ⌨️ (00:00) Intro
    ⌨️ (07:01) Color Flipper
    ⌨️ (30:25) Counter
    ⌨️ (44:04) Reviews
    ⌨️ (1:11:29) Navbar
    ⌨️ (1:26:21) Sidebar
    ⌨️ (1:39:03) Modal
    ⌨️ (1:48:26) Questions
    ⌨️ (2:16:25) Menu
    ⌨️ (3:16:13) Video
    ⌨️ (3:32:45) Scroll
    ⌨️ (4:36:15) Tabs
    ⌨️ (4:58:53) Countdown
    ⌨️ (5:56:35) Lorem Ipsum
    ⌨️ (6:18:23) Grocery
    ⌨️ (8:01:14) Slider

  • @gauravsharma-lu4if
    @gauravsharma-lu4if 8 місяців тому +1

    thank you sooo much for these amazing projects and explaining all of them in deatils, helped me learned a lot of things

  • @MuhammadAdnan-gx6rd
    @MuhammadAdnan-gx6rd 4 роки тому +13

    He's already uploaded these projects on he's own channel coding addict

  • @mohammadkashif9006
    @mohammadkashif9006 Рік тому

    I can't express how much you are helping my learning journey. I was feeling so frustrated not being able to grasp JavaScript concepts. This video is just amazing and can't thank you enough for sharing it. Thank you for your time and generosity. Sharing such quality courses for free... Once I complete the 15 projects, I will definitely enroll in your REACT udemy course.
    Cheers.

  • @iamjahuni
    @iamjahuni 4 роки тому +3

    Thanks very much for putting out this info. You guys Rock!

  • @efrainflores1721
    @efrainflores1721 4 роки тому +1

    This is totally awesome...Im learning more in this video than I have in over a year. What is especially great is your explanations. I just play, code, stop, and so on...like a loop, ha. Thanks again!!!

  • @niamreg_dev
    @niamreg_dev 4 роки тому +3

    That's an awesome work! An amazing job, thank you very much

  • @study_with_thor
    @study_with_thor 3 роки тому +1

    You are a life saver at all

  • @80Vikram
    @80Vikram 4 роки тому +4

    Thanks a ton for your efforts, god bless you

  • @e.s298
    @e.s298 Рік тому +1

    You really know how to teach!! Thank you! Really worth listening to the whole course guys, do not miss this one.

  • @Aokiyoa
    @Aokiyoa 4 роки тому +38

    This is what I'm looking for, i just to learn JS while building projects.

  • @efrainflores1721
    @efrainflores1721 4 роки тому

    the explanation at 2:15 more or less is awesome. the fact that using the dom to scan the whole document vs the querySelector. Great

  • @fake-chemistry
    @fake-chemistry 3 роки тому +45

    he sounds like one of my friend who is smarter than my whole friend circle

    • @Rohit_patel230
      @Rohit_patel230 3 роки тому +2

      😂😂

    • @kohinoor2004
      @kohinoor2004 3 роки тому +4

      maybe he is your friend and he had not informed you
      bcoz he is smarter

    • @simranverma5530
      @simranverma5530 2 роки тому

      @@kohinoor2004 hey Kohinoor give us your Kohinoor

    • @kohinoor2004
      @kohinoor2004 2 роки тому

      @@simranverma5530 it's undetachable

    • @simranverma5530
      @simranverma5530 2 роки тому

      @@kohinoor2004 then detach it with your sharpness, lusture and after doing that plz kindly give to it me

  • @johnkucharsky6927
    @johnkucharsky6927 2 роки тому

    5:35:10
    const sec = Math.floor(t/1000),min=Math.floor(sec/60),
    hr=Math.floor(min/60);d=Math.floor(hr/24);
    console.log(sec,min,hr,d)

  • @dariogeorge8680
    @dariogeorge8680 4 роки тому +5

    Yaay, John is back!

  • @chapristi4116
    @chapristi4116 2 роки тому +1

    i have started 3 days ago and i'm in the the grocery project i have soon finish all of projects, tanks you a lot . You think i can start learn react after have finish all projects

  • @ColinsTonfack
    @ColinsTonfack Рік тому +3

    for the 1rst project : color flipper you didn't share the css code

    • @RedZambala
      @RedZambala Рік тому +1

      I just now downloaded the source code from github, CSS is there;

  • @MrMohfeez
    @MrMohfeez 3 роки тому

    This is what, i am looking for... i am still amazed that how did you put this for free, God bless you man.

  • @chrisblock1619
    @chrisblock1619 4 роки тому +8

    The 'Menu'-project made me order food twice....

  • @KatherineOrho
    @KatherineOrho Рік тому

    This is the best way to teach it to me. This makes sense in my head. Excellent tutorial.

  • @alexdominguess
    @alexdominguess 3 роки тому +4

    I know this voice, he is the Saul Goodman. Nice class by the way

  • @ManoRusso
    @ManoRusso 3 роки тому

    Woow the Menu was awesome!! So much knowledge! Just finished the menu and I already feel so confortable with vanilla JS now!

  • @kabeerlatane7423
    @kabeerlatane7423 Рік тому +3

    i cant find the part of the css explanation of the reviews project.

  • @blue_berry_pie64
    @blue_berry_pie64 2 роки тому

    from Zero knowing of JS , just by reading carefully your guiding and previous example through out, at project 06-modal, I can write myself the whole JS :O I can't believe myself.
    Thank you so so much!!!! really!

  • @zdarofMERGAITES
    @zdarofMERGAITES 4 роки тому +5

    In the count down project... How do i calculate one month from miliseconds?

    • @chiraggupta2472
      @chiraggupta2472 4 роки тому

      Bro think wisely, you will get the answer chill :)

  • @tomasmatusek6292
    @tomasmatusek6292 3 роки тому

    Hello guys and girls, I recognise all ppl who watch the tutorial, STOP and PLAY, STOP and PLAY, STOP and PLAY. And look what he doing, use google and search what is map and how it works, and many more. He share with us many informations what ur brain will not understand from first time. So use this material what he doing for us. Its not that we just watch the tutprial, copied that from him and we are finish, and we are pro. Learn from that like in school :)
    TschuSS Tomy :)

  • @ernestofavio6735
    @ernestofavio6735 4 роки тому +3

    Hi i need a previous experience o level to do this course ? I mean, must I know at least the basis of JavaScript or it doesn't matter at all?

    • @prakash_77
      @prakash_77 4 роки тому

      Helpful but not required.