3 Javascript Projects Every Beginner Should Build

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 มิ.ย. 2024
  • JavaScript projects for beginners and those who want to refresh their memory.
    Get Hostinger Discount: hostinger.com/lamadev
    Coupon Code: LAMADEV
    If it is valuable to you, you can support Lama Dev.
    Join: / @lamadev
    Buy me a coffee: www.buymeacoffee.com/lamadev
    Source Codes:
    Slider Project
    github.com/safak/youtube2022/...
    Quiz App
    github.com/safak/youtube2022/...
    Javascript Filter Example
    github.com/safak/youtube2022/...
    Join Lama Dev groups
    Facebook: / lamadev
    Instagram: / lamawebdev
    Discord: / discord
    Twitter: / lamawebdev
    0:00 Introduction
    02:34 Javascript Slider Project
    30:08 Javascript Quiz Project
    56:26 Javascript Product Filter Project
    01:25:00 How to Deploy Javascript Projects
    01:29:05 Outro
  • วิทยาศาสตร์และเทคโนโลยี

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

  • @amaurimdsantos
    @amaurimdsantos ปีที่แล้ว +152

    Lama, I got the job as react front end developer. I'd like to say THANK YOU for your projects and dedication. I was losing my interest in programming but then you came up with great, well designed real world projects and it helped me keep going. When I get my first salary I'll become a member and buy you some coffees. Cheers man!

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

      Same situation man! Cheers.

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

      Congratulations both of you

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

      @@tusharshrivastava7184 thanks mate.

    • @cevdet-gt3uu
      @cevdet-gt3uu ปีที่แล้ว +1

      @@MrSemiramizz tebrik ederim hocam

    • @MrSemiramizz
      @MrSemiramizz ปีที่แล้ว

      @@cevdet-gt3uu Teşekkür ederim

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

    I usually suffer from headache after watching tutorials and end up with incomplete project but your way of explaining things is so calm and easy-going. It did not make me anxious like other tutorials do. Thanks a lot.

  • @LamaDev
    @LamaDev  ปีที่แล้ว +13

    Hi friends thanks for watching :) Don't forget to check Hostinger Black Friday Deal: hostinger.com/lamadev

  • @PonnaiyaSwami
    @PonnaiyaSwami 10 หลายเดือนก่อน +10

    Those who confused at why the element has not centered as instructed (Timestamp 4:09), that's because you need to explicitly define the height to 100vh to center the flex element horizontally and vertically. ;)

    • @memesakhie5016
      @memesakhie5016 4 หลายเดือนก่อน

      thank youuuuuu!

    • @farazk9729
      @farazk9729 2 หลายเดือนก่อน

      thanks

  • @aureliomartin9119
    @aureliomartin9119 ปีที่แล้ว

    Thank you very much for this tutorial. I was not familiar on how to create subdomains in hostinger, and that part was very useful.

  • @lambo-ca
    @lambo-ca 9 หลายเดือนก่อน

    FANTASTIC PROJECTS. DO MORE OF THESE SIMPLE YET VERY USEFUL.

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

    Wow....Back to Back awesome tutorials...LAMA DEV u d best 🤗🤗🤗😍😍😍 with love from Nigeria 🎊🎊🎊🎊

  • @adebisisheriff159
    @adebisisheriff159 ปีที่แล้ว

    Thnaks so much Lamadev.I really appreciate this

  • @RobiulIslam-dn9mm
    @RobiulIslam-dn9mm ปีที่แล้ว

    yes, done.
    And you are the best programming tutor in youtube.
    Thanks Lama.

  • @vinaypatil8009
    @vinaypatil8009 ปีที่แล้ว +17

    This what beginners needs, thanks for the video.
    Same kind of video with Reactjs please 🙏🏽

  • @developingwithmajdi1031
    @developingwithmajdi1031 ปีที่แล้ว

    I think when you create videos of projects beginning with backend and after frontend it more clear to understand and thanks Lama

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

    Your videos are too helpful. Thanks

  • @shankargurung1335
    @shankargurung1335 21 วันที่ผ่านมา

    Lovely👍👍 thank you so much for uploading such a valuable tutorial can't wait pure javascript project more

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

    You always give the best projects. not basic calculator and other nonsense examples. Thank you so much Lamadev you are the best!

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

      Sadly a lot of people wouldn't know how to make a calculator, makes for a great starting project.

    • @tektektuktuk4086
      @tektektuktuk4086 ปีที่แล้ว

      @@tomasburian6550 what should they know todo app?

  • @ibragimdodov4816
    @ibragimdodov4816 ปีที่แล้ว

    Great job. Thank you!

  • @dimasnytin
    @dimasnytin ปีที่แล้ว

    Thank you very match. This great lesson JS 🤩💪

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

    Would definitely do this!!

  • @BMikel
    @BMikel 9 หลายเดือนก่อน +1

    Wow great content, i like it sooooo much. Please do more this kind of Vanilla JavaScript project. Fetching data from mockup api and processing data.

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

    Whenever i get time, i come to lama channel and start coding along with him. It is like a long and peaceful train journey. Lama has onboarded the train for forever😅.

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

    Good Day, LamaDev I'm Suleiman from Nigeria 🇳🇬 your tutorials are the best and we're learning more from you , we will really appreciate if we can get another tutorial on SCHEDULED TRIGGER in Mongo DB & ExpressJs.

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

    Dear Mr Awesome Lama now this is amazing. If you add an intermediate js and then an advanced concepts tutorial with real examples it would be super helpful. thank you so much

  • @synt-x6458
    @synt-x6458 ปีที่แล้ว

    Bro keep dropping absolute gems!!

  • @sigfigronath
    @sigfigronath ปีที่แล้ว

    need more like these Lama :)

  • @macrooooo__
    @macrooooo__ ปีที่แล้ว

    Lama, thank you for this. Now, I'm more confident to code.

  • @donmenya2761
    @donmenya2761 ปีที่แล้ว

    Great tutorial! Thx

  • @mathis-meth4229
    @mathis-meth4229 ปีที่แล้ว

    love your projects!

  • @manikandanmk2959
    @manikandanmk2959 ปีที่แล้ว

    really helpful Mr>Lama.. thank you
    we are lucky to have yue as our master ( Love from india

  • @H7forReal
    @H7forReal ปีที่แล้ว

    cidden çok yararlı bi video olmuş teşekkürler

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

    Que legal, muito obrigado Lama 👊

    • @viniciusm.m.7822
      @viniciusm.m.7822 ปีที่แล้ว

      O cara é um mito! Fera demais para explicar!

  • @dieglopviana
    @dieglopviana ปีที่แล้ว

    First of all, thank you!
    One question, how do you control your repositories in the branches of a repository? This is really cool and great for study repositories.

  • @silvistani814
    @silvistani814 ปีที่แล้ว

    Hi Lama!!! Love all yours projects. I practice a lot with them :) Most of all, the ones with Next.Js. Can I ask some projects with C#? Do you have some of them? I appreciate it a lot :) Greetings from Argentina

  • @avecesar
    @avecesar ปีที่แล้ว

    Thank you so much!

  • @althafabbas5385
    @althafabbas5385 ปีที่แล้ว

    Super usefull.. 🥳 please create more like this 🙂

  • @HrissW
    @HrissW ปีที่แล้ว

    These are SUPER HELPFUL make more of these!

  • @artemkorenuk
    @artemkorenuk ปีที่แล้ว

    Lama, thank you!

  • @abhishekraut1
    @abhishekraut1 ปีที่แล้ว

    Seems Helpful

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

    Very helpful😊

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

    Great ! I can also feel familiar accent :D Ellerine saglik kardesim !

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

    The Images are not showing in the repository. I would really love to download them

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

    Hlo... Lama..! you and your projects are amazing..thank you sooo much..... Requesting to complete the MERNsocial media app.. Waiting for more videos..

  • @ryutube1945
    @ryutube1945 11 หลายเดือนก่อน

    Watching your video is the easiest way to learn html, css, JS!!!! Thank you so much~!!!!!
    please give me more haha

  • @RobbieCat
    @RobbieCat ปีที่แล้ว

    amazing content!!!

  • @prashlovessamosa
    @prashlovessamosa ปีที่แล้ว

    Your channel is heaven

  • @Jrizy.
    @Jrizy. 9 หลายเดือนก่อน

    @12:15 how come you used back ticks for the `translateX` instead of regular single or double quotes?

  • @viniciusm.m.7822
    @viniciusm.m.7822 ปีที่แล้ว

    Thanks, Lama! Love u, man!
    Abraço do Brasil!!!

  • @BrajBliss
    @BrajBliss ปีที่แล้ว

    Awesome!

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

    Thanks sir

  • @vivekanandareddymaddela
    @vivekanandareddymaddela ปีที่แล้ว

    Dear @LamaDev, How to create mobile App from the already written React code built on Material UI?

  • @wisdomelue
    @wisdomelue ปีที่แล้ว

    great stuff

  • @aaaudio2115
    @aaaudio2115 ปีที่แล้ว

    Funny fact: in Canada Hostinger is flagged by the loss prevention sector of TD Bank.

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

    how can i get,please upload the image sources

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

    Please make a video on how much CSS should every Intermediate Developer know...

  • @bakaleisanich
    @bakaleisanich ปีที่แล้ว

    thank you

  • @kevin-xr1wf
    @kevin-xr1wf ปีที่แล้ว

    A great knowledge

  • @bloom7220
    @bloom7220 ปีที่แล้ว

    Lama Dev for PRESIDENT

  • @piuspolocha7948
    @piuspolocha7948 ปีที่แล้ว

    Make a video building a website with admin and user dashboard using js and nodejs
    Thanks you are the best

  • @joydeepp6521
    @joydeepp6521 ปีที่แล้ว

    Please make one video using classes objects

  • @prinzadamz
    @prinzadamz ปีที่แล้ว

    You are AWESOME 🤟

  • @alejandromartinezramirez3312
    @alejandromartinezramirez3312 ปีที่แล้ว

    Could we have a mui datagrid tutorial?

  • @ramborb8795
    @ramborb8795 ปีที่แล้ว

    4:34 mine does not center until I give the body a height. I wonder why ?

  • @saptarshidechaudhury9573
    @saptarshidechaudhury9573 ปีที่แล้ว

    46:06 Why did u remove the curly braces? I am new to Javascript so I didn't understand.

  • @yamillayicov7256
    @yamillayicov7256 ปีที่แล้ว

    firstly thanks and then there is a little problem when you click between category empty "cat" nothing happening so this version best
    let cat = document.querySelectorAll(".cat")
    for (const i of cat) {
    i.addEventListener("click",e=>{
    const selectedCat = e.target.textContent

    selectedCat == "All" ? displayProducts(data) : displayProducts(data.filter(item => item.cat == selectedCat))
    })
    }

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

    sorry for a question, I'm going crazy because using your same css properties and EXACT html, I never get the main container VERTICALLY centered, but only horizontally, is there a reason for this?

    • @majster4044
      @majster4044 ปีที่แล้ว

      try this in css . body : width: 100vw; height: 100vh; .. that helped me

    • @MikixIT
      @MikixIT ปีที่แล้ว

      @@majster4044 this works for me, thank you

  • @rajubenbharwad-rn6cc
    @rajubenbharwad-rn6cc 15 วันที่ผ่านมา

    Smooooke FX тащит)

  • @ryutube1945
    @ryutube1945 10 หลายเดือนก่อน

    Please help me somebody!
    47:54 I think i made the code exactly same what he did. But my console return true/, false/. I don't know why it says true/ instead of true. Problem is this///////// :(

  • @afrazhussain3778
    @afrazhussain3778 ปีที่แล้ว

    Sir please make a video on CSS how to use arrows in background
    And please sir tell us how to make shape divider like curve in footer background

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

    well done man you are best teacher and you need to create udemy courses for full stack development...

  • @dharmeshgohil9375
    @dharmeshgohil9375 ปีที่แล้ว

    You are just awesome👌👌👌

  • @digitalcitizn1537
    @digitalcitizn1537 ปีที่แล้ว

    I'm having trouble with the slider, when I switch to display: flex for the .slider class, all the images get squished into the .frame div. I love your videos!!

    • @Ed-gd5ec
      @Ed-gd5ec 10 หลายเดือนก่อน

      Did you find any solution for this?
      I too got the same error

  • @shivamkumartripathi3052
    @shivamkumartripathi3052 ปีที่แล้ว

    Sir please make a video on Graphql with react because its on demand

  • @mohammadghasempour8743
    @mohammadghasempour8743 ปีที่แล้ว

    Perfect

  • @SolodYuriy
    @SolodYuriy 11 หลายเดือนก่อน

    thanks;)

  • @riyadtalukder536
    @riyadtalukder536 ปีที่แล้ว

    How to sign up without auto login in firebase authentication using reactjs? Kindly give a video on this topic sir.

  • @bhirajk9450
    @bhirajk9450 ปีที่แล้ว

    Lama fan

  • @rajibdas699
    @rajibdas699 ปีที่แล้ว

    please create a full project using next js 13

  • @raghavendrachaubey7026
    @raghavendrachaubey7026 ปีที่แล้ว

    Sir in react price range code

  • @nocturno7887
    @nocturno7887 ปีที่แล้ว

    29:18 Thanks for the tutorial. However I could not make the styles work for firefox. Regards

    • @imonw3b
      @imonw3b ปีที่แล้ว

      The reason is that firefox is sensitive for missing fields in your css. Chrome will (sometimes) auto complete missing field, thus the issue appears on your firefox browser.
      Please add on image:
      object-fit: cover;
      display: block;
      background-repeat: no-repeat;
      background-position: center center;
      min-width: 100%;

    • @manolitouan1656
      @manolitouan1656 5 หลายเดือนก่อน

      @@imonw3b this did the trick for me. Thank you very much 👍

  • @yevhenfodorov121
    @yevhenfodorov121 ปีที่แล้ว

    why body {
    align-items: center;
    } work without height?

  • @GarfieLD-Mami
    @GarfieLD-Mami ปีที่แล้ว

    Abi ağzına sağlık.

  • @Metovski
    @Metovski ปีที่แล้ว

    You're king..

  • @thedevnoteyt
    @thedevnoteyt ปีที่แล้ว

    Love watching your tutorials, can u please build something like Image editors (Eg. Canva) or something AI powered as your next project or in any of your next projects. Thanks for these awesome tutorials...

  • @saribjawadd
    @saribjawadd 7 หลายเดือนก่อน

    function setCat() {
    const allCats = data.map((item) => item.cat);
    allCats.filter((item, i) => {

    return allCats.indexOf(item) === i;
    })
    );
    }
    Can anyone please explain me this Like how is this working i m getting confuse on this , THHNAKS IN ADVANCE

  • @spielville5087
    @spielville5087 ปีที่แล้ว

    Maybe switch to Typescript for tutorials? Seems to be like a standard nowadays everywhere commercial.

  • @hoomanfarzaneh
    @hoomanfarzaneh ปีที่แล้ว

    please cretae a project with nextJs 13

  • @abenetbeyene3398
    @abenetbeyene3398 ปีที่แล้ว

    love the video but please add a comment to your functions

  • @jamjam3337
    @jamjam3337 ปีที่แล้ว

    👍

  • @darshmostafa6044
    @darshmostafa6044 ปีที่แล้ว

    We want Videos about React Native 💣🤯🔥....

  • @forinda
    @forinda ปีที่แล้ว

    The coupon link is not working

    • @LamaDev
      @LamaDev  ปีที่แล้ว

      Hi Felix, the description link is fixed.

  • @trongnhanle7658
    @trongnhanle7658 ปีที่แล้ว

    why you don't make shopping cart by using javascript ?

  • @ankitshah1655
    @ankitshah1655 ปีที่แล้ว

    Make blog on PHP mysql

  • @kabasoftcomtr
    @kabasoftcomtr ปีที่แล้ว

    Merhaba, iletişime geçebilir miyiz ?

  • @twincam_gti
    @twincam_gti ปีที่แล้ว

    First comment! I'll do them

  • @casobrino1
    @casobrino1 11 หลายเดือนก่อน

    not work on firefox

  • @developing_pain
    @developing_pain ปีที่แล้ว

    Started 04/04/2023 Completed 16/04/23

  • @tomasburian6550
    @tomasburian6550 ปีที่แล้ว

    I'd let everyone program a simple calculator, you'd be surprised how many people struggle with that.

  • @akshaynagarwal
    @akshaynagarwal ปีที่แล้ว

    1st viewer. ...

  • @riverhammond
    @riverhammond 3 หลายเดือนก่อน

    You don't explain things very well

    • @riverhammond
      @riverhammond 3 หลายเดือนก่อน

      I'm sorry I love you