HTML CSS JS projects (Beginner): 30 projects using HTML CSS and JavaScript

[@TusharBirole]

I started learning JavaScript using your videos thank you so much.

[@JavaScriptKing]

You're very welcome!

[@CamaguNcoso]

Why is JavaScript a struggle when I learn even through projects? ​@@JavaScriptKing

[@rewilyntamina2914]

Timestamps 00:00 - Introduction 01:25 - Heart Trail Animation 21:39 - Auto Text Effect Animation 39:12 - Mini Calendar 57:23 - Button Ripple Effect 01:15:44 - Random Photos 01:35:26 - Dark Mode Toggle 01:55:37 - Testimonial Slider 02:17:46 - Real-Time Character Counter 02:40:09 - Digital Clock 03:02:57 - Double Landing Page 03:25:48 - Random Color Generator 03:49:26 - Rotating Image Gallery 04:14:09 - Animated Search Bar 04:39:04 - Loan Calculator 05:03:25 - New Year Countdown 05:28:57 - Pomodoro Timer 05:55:46 - Age Calculator 06:23:06 - Profile Statistics 06:50:19 - Video Trailer Pop-up 07:18:30 - Drum Kits 07:48:24 - Clock 08:19:12 - Temperature Converter 08:50:01 - BMI Calculator 09:21:38 - Sticky Navbar 09:53:33 - Random Emoji 10:25:39 - Tip Calculator 10:45:58 - Loading Bar 11:00:27 - Background Image Scroll Effect 11:16:38 - Mouse Event 11:33:51 - Dice Roll Simulator

[@avathaalam]

❤

[@onlyonwed526]

You are not just a JavaScript king but you are JavaScript lion🦁. Well done 🎉

[@JavaScriptKing]

Thanks 😅

[@michaelagyekum8829]

@@JavaScriptKinghi boss plz can I have ur contact number I have some projects plz

[@whatsappstatus6522]

​@@JavaScriptKingi need your help i have to create a software

[@MindManipulationHub]

this is the type of channel I have been searching for...thanks for your tutorial.

[@JavaScriptKing]

Welcome 😊

[@Meow_1023meow]

Thank you so much!! I've recently started to learn JavaScript and your tutorials are super helpful! Sometimes i struggle a lot after theory or with challenges that are not so visual, especially loops. I learn some theory and doing your projects along, thank you again for the opportunity!

[@JavaScriptKing]

Happy to help :)

[@charlesokorobo508]

I finished my JavaScript course in July 2024. Now, the course is linear-- where we learn straight line concepts like Variables, Functions, Constructors, Operators, Arrays, Strings, Template Literals, and so on. But we can't really build anything with such knowledge. So I searched for a JavaScript Project course, and found yours-- which is very exciting. There are three(3) things I will like to suggest: 1.) In your Timestamp, you named them as Project 1, Project 2, Project 3, and so on. Unfortunately, if we need to jump to a particular project, we can't because we don't know where it is, we don't know which one is which. But if you name it as: 01:25 -Project 1: Heart Trail Animation. 21:39 -Project 2: Auto Text Effect Animation. 21:39 -Project 3: Mini Calendar, and so on, it then becomes easy to find a specific project, when we need to jump to a specific Project. Can you Please rename, or add Project Titles to the Timeline? Please 🙏🏽 2.)If you go to Vuetify Website, you will see Web Components --vuetifyjs.com/en/components/all/#containment Can you do a course where we can build Web Components like: -- Photo Galleries. -- Multiple Testimonial Slider (3 testimonials) -- which slides by one, and infinitely repeats. -- Accordion. -- FAQ -- User Dashboard. -- Alert Dialog. -- Fliterable Gallery. -- Quiz App. -- Toast Notifications. -- Collapsibe and Expandable Right Side Menu. -- Popover ( ui.shadcn.com/docs/components/popover ) -- Sonner ( ui.shadcn.com/docs/components/sonner ) -- ToolTip ( ui.shadcn.com/docs/components/tooltip ) 3.) create Clone Projects-- where we build Facebook clone, Instagram clone, NetFlix clone, Amazon clone, Udemy clone, and many other popular website clones. Make this a Clone Series, that will form a Playlist. Regards.

[@aminpatra-qv1gz]

After 30days, I created these 30 project following this video, big thanks for you brother, have learnt a lot.

[@oneeritrea]

Imagine this video will make him a millionaire in Udemy but choose to give us for free. Thank you and God bless you and your offsprings.

[@Drjdev]

Eventually YT will make him millionaire! I hope so!!!

[@timothydavis1885]

It might make him a millionaire! In month 73000 views!

[@shonuff3384]

YT also pays good just don't skip the ADS. ❤

[@baanuaali2818]

I just finished the first project, it was awesome, دمت گرم👍🏻

[@Noble0001jr]

Hi

[@حسابالمنصة]

I cannot express my thanks and appreciation for all this wonderful effort. I see a bright future for this channel because of the content it offers more than wonderful.

[@JavaScriptKing]

Thank you so much 😀

[@SravanKumar0417]

This is much better than learning theory and grinding it.

[@thelowfer1016]

why bro? Here you are simply repeating someone else's code

[@indugupta1627]

U are the real king of java script sir mind blowing projects

[@moussa14230]

thank you so much really cool projects. I'm on third project so far.

[@JavaScriptKing]

Have fun!

[@rahulsonawane2564]

you're my first foreign teacher. love from india

[@mrs7537]

Please do react projects too. It’s very helpful for students like me

[@SF__JS]

Wow just wow you are a great teacher and indeed a JavaScript King, lessons are well put and organized I can't thank you enough.

[@hasansiddiqui7633]

Dear Teacher, I have seen many people teach *HTML, CSS, JavaScript* but your teaching method is *awesome* ❤. Please make videos react Js project. Thanks

[@JavaScriptKing]

Thank you, I will

[@ahmad98282]

For Project 1, you could also clear timeouts of the hearts that are faded away, good thing to teach for beginners who are watching your video

[@JavaScriptKing]

Great suggestion!

[@DevAos35]

Meu amigo seu vídeo é só o ouro! Obrigado por compartilhar 🇧🇷 🇧🇷 🇧🇷 🇧🇷

[@fullstackspiderman]

You're indeed JavaScript King..

[@VikkiKumar001]

20:54 Completed First project 🎉💥💯 Date :- 13 - 9 - 24 Time :- 10.30 AM

[@ramup7513]

Sir , please make 2 or 3 project for experienced people (which helps clear experience interview)

[@JavaScriptKing]

sure mate

[@nabi011]

I m totaly impress learning skill love it very very♥️♥️♥️♥️

[@Yardss]

Brother, in this this video every project is useful and I have learnt so many thing from your project and now I can implement the idea (not exactly same) this in my project. THANKS VERY MUCH ❤❤❤

[@mr.kaushalkumarvines8847]

Golden Video for Web development projects❤❤

[@AcademiaCS1]

Project 3, 7, 10, 12, 13, 15, 16, 17, 18, 21, 22, 23, 25, 27, 30 are different from the last project compilation. There are some similar each other.

[@pujithasurapureddy5446]

Finally I got best KZbin video on html css and js 😊❤

[@siamakut]

درود بر تو مهندس، ایشالله هر جا هستی سالم و موفق باشی، ضمنا سال نو مبارک 🌸 🌻

[@JavaScriptKing]

❤️❤️❤️🙏

[@DevGarden98]

I can use so many of these ideas on my upcoming apps! Thanks 🎉

[@CodeXtream]

Tq sir❤❤ after a long time you uploaded a video Pls continue.....

[@JavaScriptKing]

Sure 👍

[@nour-eddineoumakhlouf5296]

Good job man! Thank you for all your efforts.

[@keerthichembayil2760]

Thanks for this tutorial best projects to understand javascript concepts more clearly.thank you so much..

[@Nasiha815]

Great channel. This is real dedication. This channel is real tutor for common people who want to learn free web development and earn money bcoz they have not enough money for buying courses. Thanks Again bro❤❤

[@Economicseasy-z2w]

First of all, I am really greatful to you sir ❤❤❤

[@parineethapradyumnavanaras283]

This video is amazing! Your approach to teaching coding is so clear and friendly, making it accessible even for beginners. The step-by-step explanations and real-life examples really help demystify the concepts. Thanks for making coding fun and approachable! Keep up the great work! 🌟

[@Website_TV_1]

Wow really love your tutorial, I have learnt a lots ❤

[@hacknmode]

These one is very Amazing all projects , Please make video on React js like this. ❤❤

[@AcademiaCS1]

Very good job Sahand Ghavidel

[@AncientWonders-g5q]

please also bring python and c++ projects

[@huzaifahanjra2925]

Sir please make a portfolio project for front end to take the job for new in this field . Please a humble request

[@JavaScriptKing]

sure mate

[@EtampiCollete]

Wow... It's really amazing. But please the video is kind of too long, making shorter videos from each project but in thesame album will be better... What do you think?

[@Sanjeev-ms4jb]

👎

[@Doomski1]

the fact that this guy is persian. خیلی ممنون

[@calle90]

The King is back. better is not possible

[@JavaScriptKing]

😊😊❤️❤️🙏

[@aiko_here.0_0]

Sir , white background in 2024 is a crime , please change it on dark❤

[@antwarior]

facts 😂

[@bluestar3639]

Exactly ❤

[@windowsxp1991]

Agreed 👍🏾

[@Pablowatch]

Wtf is this

[@suryanshpundir6179]

Are you Indian

[@vishalpatil9462]

very nice tut! thank you very much. please upload some COMPLEX PROJECTS so that we can learn from it &&& APPLY DIRECTLY FOR JOBS

[@Bhuvan.Shetty]

Khud banale Bhai agar base strong h to start creating your own stuffs and upload it online

[@startx3861]

Bro said beginner friendly then started with heart animation by detecting mouse location using JavaScript 💀

[@zdwlf3934]

Fr i was like damnn im not that guy after all 😂😂💀

[@zosted3538]

i mean, it's a very basic thing to do, nothing complicated for a "beginner", but i guess for him "beginner" is someone who already started using JS, for someone who wants to start learning JS, good luck lmao, bro skipped 150 steps

[@riadahmed8870]

First of all thanks a lot for this kind of wonderful project to teaching us.I'm from Bangladesh it’s been couple of years i didn’t find this kind valuable content ❤❤❤

[@JavaScriptKing]

So nice of you

[@airmedia996]

Wait let me subscribe first, I think I have gotten the right video ✔️

[@AdebayoImmanuel]

This is really helpful, thanks

[@mdzakaria8586]

When you will create react playlist sir?we are waiting for that

[@harikeshchandraganesh1935]

thank you man keep going, you saved my moment!

[@hahu-s1m]

an amazing tutorial, I have watched project 1.

[@Iamizart]

Awesome 🤩 could u do something similar for advanced?

[@VandanaKerketta]

Thank you for the video. I learnt a lot!

[@s.bbrother6755]

Finally completed this project after 1 month.

[@desipinkman4962]

Loved your video 🥰 Had one question - You get amazing suggestions when you type in VS Code which can be autocompleted. How should I do that for me?

[@renatooliveirareis1863]

Great! Thank you very much! I will certainly learn a lot from this video!😃🙏

[@AcademiaCS1]

Thank you Sahand Ghavidel

[@abdirisaaqjamachussein3273]

Thank you teacher I am understand very good well ❤🎉

[@haylemikaelnegusse6847]

thank you for your kindness we all appreciate keep up

[@JavaScriptKing]

You are so welcome :)

[@romeogallardojr.813]

Love this tutorial. Easy to follow !

[@gozieprince9530]

You are the best ❤

[@bhargavkumar]

Hi, Just wanted to ask is there any MERN with Typescript project video coming? Love your teaching style ❤

[@JavaScriptKing]

Yes, soon

[@obinnajude470]

thank you so much i enjoyed every step of it..

[@tz2014]

Awesome

[@JavaScriptKing]

thank you

[@AbdulHakim-b5h]

very very importent video

[@marufjonmansurov8881]

Good day bro Could you make some tutorial videos about html CSS JavaScript, reactjs, and nodejs for beginners Thanks a lot🙏

[@JavaScriptKing]

Will do soon

[@cabdiraxmaankhaliiftahliil9217]

Hello bro thanks for this amazing course Please could make us React js or Next js ? Your explanation skill os very high . Thanks alot 👍🏿

[@askurrahman9882]

Many Thank you so much i enjoyed every step of it..

[@JavaScriptKing]

You are welcome!

[@MohAmuza]

those projects amazing to practice and learn more

[@abdulmusawir2441]

I am following your this video without prior knowlwdge please tell I am directly learning through projects Is this good or first i watch html css js videos

[@JavaScriptKing]

the projects are enough to learn these techs, I recommend to watch all of the projects first without coding, then build them in the second try

[@printfiamd5254]

In project 1, Can we Decrease the speed of creating each span so that hearts are created a bit slow

[@boysandra266]

Excellent as always

[@masterjiraya623]

yoooo new drop lessgooo

[@JavaScriptKing]

❤️❤️

[@michaelagyekum8829]

May u be bless u change my life

[@divyanshuyaduvanshii]

Thank you so much sir , this video is very helpful for me

[@JavaScriptKing]

So nice of you

[@chaitanyashimpi6212]

Sir I know html css javascript + I know spring boot for back-end. Please check one full stack project on react + spring boot

[@GauravSingh-id2mf]

Please make small react project like this

[@JavaScriptKing]

sure mate will upload more soon

[@GauravSingh-id2mf]

@@JavaScriptKing thanks for giving reply ....i am fan of your teaching style ...so please make small react project just like javascript project...it will help build and more confident in react js ...so please do this .. Thanks

[@Adrealise]

3:02:32 / Line 24: ampmEL, (innerText = ampm); should be: ampmEl.innerText = ampm;

[@yousratahirijotey]

Thanks for sharing !

[@GeroinychZmey]

That heart trail does not work. The heart picture does not show. If I add span background-color: red; then it is like a red square, but not a heart or any other icon (I tried several)

[@sportsknowledge92]

Please make more logical project like that

[@chaitanyashimpi6212]

Sir do you have any paid course for React Html css javascript project

[@LofiCoding11]

Nice Video Brother.

[@SoundarG-w3d]

It's really cool 😎

[@JavaScriptKing]

thank you :)

[@OTRYHARDD]

Very useful video.

[@JavaScriptKing]

Thanks a lot

[@ranatariq8638]

So amazing

[@hamudxd9497]

Top class❤❤❤

[@JavaScriptKing]

Thank you :)

[@AlixD-g3y]

[@МяхриджемалАннаовезова]

Thank you very much! You made great jobe and help to me! I am junior in it. Thank you

[@МяхриджемалАннаовезова]

I learn Js from your video, thank you!

[@S-Lomar]

Thank you for sharing 😍🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩

[@JavaScriptKing]

Thank you too

[@JonathanKabayu]

Thanks teacher good jobs

[@JavaScriptKing]

You are welcome

[@alexandresaca]

chegando por aqui!

[@criptoplanktoninvestidor]

TMJ meu camarada!

[@HallOfHonor-z9r]

project 2,5,19 is too good

[@SadiaSadia-i3q]

sir please design websites course uploade

[@ДмитрийА-э6н]

1:34:20 why we can make "imageNum" without use "let" or "const"?

[@surajbapmare4785]

Because when you use let or const it's scope only inside the function (it also call local scope) and when you not use let or const it's scope are global means you can access that variable your all code inside the function and outside the function

[@ДмитрийА-э6н]

@@surajbapmare4785 thanks a lot!

[@rhmpetlover6326]

Hi sir can you please share the your visual studio link please

[@TechnoTraderz]

❤❤❤

[@JavaScriptKing]

❤️❤️❤️

[@AlixD-g3y]

[@marginiszero]

Good job 🔥🔥

[@JavaScriptKing]

Thanks 🔥

[@AlixD-g3y]

[@nurawario1235]

Thumbs up!

[@GoliYardan]

سال نو‌مبارک

[@JavaScriptKing]

❤️❤️

[@GoliYardan]

@@JavaScriptKing اگر فرصتی شد ، میتونین تو یه ویدیو شورت ، از وضعیت شغل برنامه نویسی ‌در استرالیا بنویسین ، من خیلی از کمبود فرصت شغلی توی کانادا شنیدیم ، اونجا چطوره ؟ ممنون🌸

[@AlixD-g3y]