3 Javascript Projects Every Beginner Should Build

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

[@amaurimdsantos]

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]

Same situation man! Cheers.

[@tusharshrivastava7184]

Congratulations both of you

[@MrSemiramizz]

@@tusharshrivastava7184 thanks mate.

[@cevdet-gt3uu]

@@MrSemiramizz tebrik ederim hocam

[@MrSemiramizz]

@@cevdet-gt3uu Teşekkür ederim

[@LamaDev]

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

[@priyanka_aggarwal]

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.

[@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.

[@vinaypatil8009]

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

[@developingwithmajdi1031]

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

[@adebisisheriff159]

Thnaks so much Lamadev.I really appreciate this

[@PonnaiyaSwami]

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]

thank youuuuuu!

[@farazk9729]

thanks

[@hasmak92]

I was there😅

[@lambo-ca]

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

[@RobiulIslam-dn9mm]

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

[@rockbelleh6237]

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

[@shankargurung1335]

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

[@coder5336]

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

[@tomasburian6550]

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

[@tektektuktuk4086]

@@tomasburian6550 what should they know todo app?

[@unknownman1]

Your videos are too helpful. Thanks

[@ibragimdodov4816]

Great job. Thank you!

[@BMikel]

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.

[@biniteshome1403]

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

[@suleimaniliyas9825]

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.

[@coder0015]

Would definitely do this!!

[@sigfigronath]

need more like these Lama :)

[@dimasnytin]

Thank you very match. This great lesson JS 🤩💪

[@MathaGaram]

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😅.

[@synt-x6458]

Bro keep dropping absolute gems!!

[@mathis-meth4229]

love your projects!

[@eusebiojoveth4136]

Que legal, muito obrigado Lama 👊

[@viniciusm.m.7822]

O cara é um mito! Fera demais para explicar!

[@donmenya2761]

Great tutorial! Thx

[@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.

[@H7forReal]

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

[@manikandanmk2959]

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

[@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

[@macrooooo__]

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

[@avecesar]

Thank you so much!

[@artemkorenuk]

Lama, thank you!

[@althafabbas5385]

Super usefull.. 🥳 please create more like this 🙂

[@ibstudiosHD]

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

[@abhishekraut1]

Seems Helpful

[@denzel420]

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

[@Jrizy.]

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

[@nileshnilu7902]

Very helpful😊

[@HrissW]

These are SUPER HELPFUL make more of these!

[@swapnapogula]

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

[@vivekanandareddymaddela]

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

[@ryutube1945]

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

[@RobbieCat]

amazing content!!!

[@viniciusm.m.7822]

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

[@prashlovessamosa]

Your channel is heaven

[@rajatttiwa8382]

how can i get,please upload the image sources

[@BrajBliss]

Awesome!

[@Mohammad_Arafat_03]

Can someone help me? In the beginning of the slider section, the "Hello" text was centered without the mention of any height properties. I did the same thing as the tutorial and my text is being centered only by the horizontal. The vertical center is not working. How do I resolve this issue such that it remains as close as possible to the tutorial steps? Please and thank you.

[@wisdomelue]

great stuff

[@ramborb8795]

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

[@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)) }) }

[@hadeedtmgggg5837]

Thanks sir

[@alejandromartinezramirez3312]

Could we have a mui datagrid tutorial?

[@jay8118]

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

[@piuspolocha7948]

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

[@5Nkolo]

very very good i love it very much

[@bakaleisanich]

thank you

[@aaaudio2115]

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

[@MikixIT]

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]

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

[@MikixIT]

@@majster4044 this works for me, thank you

[@kevin-xr1wf]

A great knowledge

[@joydeepp6521]

Please make one video using classes objects

[@bloom7220]

Lama Dev for PRESIDENT

[@saptarshidechaudhury9573]

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

[@dharmeshgohil9375]

You are just awesome👌👌👌

[@prinzadamz]

You are AWESOME 🤟

[@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

[@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]

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

[@riyadtalukder536]

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

[@CamaguNcoso]

Where do we get the starter files?

[@shivamkumartripathi3052]

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

[@rajubenbharwad-rn6cc]

Smooooke FX тащит)

[@ryutube1945]

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///////// :(

[@cartoonfeed3383]

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

[@rajibdas699]

please create a full project using next js 13

[@SolodYuriy]

thanks;)

[@raghavendrachaubey7026]

Sir in react price range code

[@mohammadghasempour8743]

Perfect

[@yevhenfodorov121]

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

[@adeolaganiu1144]

It does

[@nocturno7887]

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

[@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]

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

[@bhirajk9450]

Lama fan

[@hoomanfarzaneh]

please cretae a project with nextJs 13

[@spielville5087]

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

[@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]

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

[@kabasoftcomtr]

Merhaba, iletişime geçebilir miyiz ?

[@trongnhanle7658]

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

[@forinda]

The coupon link is not working

[@LamaDev]

Hi Felix, the description link is fixed.

[@Metovski]

You're king..

[@GarfieLD-Mami]

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

[@ankitshah1655]

Make blog on PHP mysql

[@newabyuser]

love the video but please add a comment to your functions

[@casobrino1]

not work on firefox

[@darshmostafa6044]

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

[@developing_pain]

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

[@tomasburian6550]

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

[@jamjam3337]

👍

[@antoniocld]

First comment! I'll do them

[@akshaynagarwal]

1st viewer. ...

[@riverhammond]

You don't explain things very well

[@riverhammond]

I'm sorry I love you