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

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

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

[@aminpatra-qv1gz]

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

[@MindManipulationHub]

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

[@JavaScriptKing]

Welcome 😊

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

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

[@baanuaali2818]

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

[@Noble0001jr]

Hi

[@БуджавБилэгтбаатар]

I appreciate it, Thank you Day 1 - first project - Heart trail Animation 12/18 - Heart trail Animation ✅ Auto Text Effect Animation ✅ Mini Calendar ✅ Button Ripple Effect ✅ Random Photos ✅ Dark Mode Toggle ✅

[@JavaScriptKing]

You're welcome, enjoy the journey!

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

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 😀

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

[@SravanKumar0417]

This is much better than learning theory and grinding it.

[@thelowfer1016]

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

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

[@iowatheother4986]

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

[@DevAos35]

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

[@indugupta1627]

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

[@AcademiaCS1]

Very good job Sahand Ghavidel

[@rahulsonawane2564]

you're my first foreign teacher. love from india

[@fullstackspiderman]

You're indeed JavaScript King..

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

[@Yamisensei2]

😂😂😂😂😂 LMAO

[@moussa14230]

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

[@JavaScriptKing]

Have fun!

[@mr.kaushalkumarvines8847]

Golden Video for Web development projects❤❤

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

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

[@siamakut]

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

[@JavaScriptKing]

❤️❤️❤️🙏

[@nour-eddineoumakhlouf5296]

Good job man! Thank you for all your efforts.

[@kalinangfarming7935]

Thanks to this video I learned a lot...new subscribers here.❤❤❤

[@mrs7537]

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

[@CodeXtream]

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

[@JavaScriptKing]

Sure 👍

[@DevGarden98]

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

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

[@pujithasurapureddy5446]

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

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

[@Economicseasy-z2w]

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

[@keerthichembayil2760]

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

[@MaxDynamo-c7k]

Hey King, your awesome and actually a true javascript king.Thanks for your video😍😍😍

[@JavaScriptKing]

No problem 😊

[@ramup7513]

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

[@JavaScriptKing]

sure mate

[@predators-pov]

huge respect for you brother😊🙏

[@nabi011]

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

[@JavaScriptKing]

Thank you so much 😀

[@VandanaKerketta]

Thank you for the video. I learnt a lot!

[@Website_TV_1]

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

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

[@harikeshchandraganesh1935]

thank you man keep going, you saved my moment!

[@calle90]

The King is back. better is not possible

[@JavaScriptKing]

😊😊❤️❤️🙏

[@romeogallardojr.813]

Love this tutorial. Easy to follow !

[@hahu-s1m]

an amazing tutorial, I have watched project 1.

[@renatooliveirareis1863]

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

[@AdebayoImmanuel]

This is really helpful, thanks

[@holeinsingularity03]

ThankYou Sir, I learned so much , thankyou for providing us valuable content.

[@JavaScriptKing]

It's my pleasure

[@gozieprince9530]

You are the best ❤

[@airmedia996]

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

[@LofiCoding11]

Nice Video Brother.

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

[@VikkiKumar001]

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

[@hacknmode]

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

[@sohaibzafar3083]

Love ❤u and love JavaScript

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

👎

[@boysandra266]

Excellent as always

[@AcademiaCS1]

Thank you Sahand Ghavidel

[@AncientWonders-g5q]

please also bring python and c++ 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.

[@mdzakaria8586]

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

[@kartikchauhan5209]

hi sahandghavidel Thanks u for this video , i hv started from project 1 and its been nice i will be posting some doubts if i hv any in same comment regarding these projects if u happen to read this u can answer them , anyway its fine , thank u for providing these projects 1. project 1 : After animation starts to work and hv to delete heart at the middle , span element deleted in html , then how does css on span works if element is deleted

[@AbdulHakim-b5h]

very very importent video

[@masumborkar441]

😊its awesome

[@obinnajude470]

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

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

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

[@tz2014]

Awesome

[@JavaScriptKing]

thank you

[@abdirisaaqjamachussein3273]

Thank you teacher I am understand very good well ❤🎉

[@Doomski1]

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

[@Iamizart]

Awesome 🤩 could u do something similar for advanced?

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

[@afriend8961]

Could you also use the statement: newSpan.style.width = Math.random() * 100;? This would work, too?

[@ДмитрийА-э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!

[@GraphicHacker]

Hi, for the 'Heart Trail Animation', console shows an error "appendChild on Node". How can I proceed further? Please help me.

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

[@bhargavkumar]

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

[@JavaScriptKing]

Yes, soon

[@askurrahman9882]

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

[@JavaScriptKing]

You are welcome!

[@haylemikaelnegusse6847]

thank you for your kindness we all appreciate keep up

[@JavaScriptKing]

You are so welcome :)

[@MohAmuza]

those projects amazing to practice and learn more

[@bikashpaswan6718]

Thanks sir ❤❤❤

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

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!

[@masterjiraya623]

yoooo new drop lessgooo

[@JavaScriptKing]

❤️❤️

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

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

[@OTRYHARDD]

Very useful video.

[@JavaScriptKing]

Thanks a lot

[@marginiszero]

Good job 🔥🔥

[@JavaScriptKing]

Thanks 🔥

[@AlixD-g3y]

[@printfiamd5254]

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

[@erff5564]

wow. 1st comment. do you plan to make JS projects (intermediate) ?

[@JavaScriptKing]

sure mate

[@AlixD-g3y]

[@divyanshuyaduvanshii]

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

[@JavaScriptKing]

So nice of you

[@SoundarG-w3d]

It's really cool 😎

[@JavaScriptKing]

thank you :)

[@s.bbrother6755]

Finally completed this project after 1 month.

[@ayanboseag-7020]

Sir bolchilam 1st "I" r jonno to an holo, kintu tarpore jodi vowel r kono letter example "E" thake tahole kivabe setar ageo akisathe an korbo, jodi bolen plz plz🙏🏼🙏🏼🙏🏼🙏🏼

[@JonathanKabayu]

Thanks teacher good jobs

[@JavaScriptKing]

You are welcome

[@rhmpetlover6326]

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

[@ranatariq8638]

So amazing

[@ManuelSerrano-g4m]

What stack You use ?

[@hamudxd9497]

Top class❤❤❤

[@JavaScriptKing]

Thank you :)

[@AlixD-g3y]

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