HTML CSS JavaScript projects for beginners 2024 - 12 js projects with source code

[@JavaScriptKing]

Check the projects live demo and source codes here: www.100jsprojects.com

[@Bobo011]

this is the 3rd projects video i finished from you, and i've learned way more from them then from watching 2 full courses, i can't ever thank you enough sir.

[@JavaScriptKing]

Nice work, thank you mate

[@JavaScriptKing]

timestamp: 0:00 - Intro 1:31 - Dad Jokes Generator (Preview) 2:55 - Dad Jokes Generator (HTML) 14:52 - Dad Jokes Generator (CSS) 34:24 - Dad Jokes Generator (JavaScript) 1:05:33 - Feedback UI (Preview) 1:07:39 - Feedback UI (HTML) 1:23:50 - Feedback UI (CSS) 1:46:53 - Feedback UI (JavaScript) 2:11:26 - English Dictionary (Preview) 2:13:10 - English Dictionary (HTML) 2:27:58 - English Dictionary (CSS) 2:40:54 - English Dictionary (JavaScript) 3:21:02 - Random Quote Generator (Preview) 3:22:17 - Random Quote Generator (HTML) 3:38:46 - Random Quote Generator (CSS) 3:57:47 - Random Quote Generator (JavaScript) 4:22:57 - Anime Pics Generator (Preview) 4:24:16 - Anime Pics Generator (HTML) 4:37:52 - Anime Pics Generator (CSS) 4:57:15 - Anime Pics Generator (JavaScript) 5:25:38 - Random Emoji (Preview) 5:26:56 - Random Emoji (HTML) 5:35:20 - Random Emoji (CSS) 5:49:40 - Random Emoji (JavaScript) 6:17:04 - Temperature Converter (Preview) 6:18:41 - Temperature Converter (CSS) 6:34:20 - Temperature Converter (HTML) 6:47:58 - Temperature Converter (JavaScript) 7:08:36 - BMI Calculator (Preview) 7:10:47 - BMI Calculator (HTML) 7:25:51 - BMI Calculator (CSS) 7:41:21 - BMI Calculator (JavaScript) 8:00:08 - Note App (Preview) 8:01:58 - Note App (HTML) 8:12:14 - Note App (CSS) 8:33:19 - Note App (JavaScript) 9:19:55 - Currency Converter (Preview) 9:21:45 - Currency Converter (HTML) 9:38:04 - Currency Converter (CSS) 9:52:33 - Currency Converter (JavaScript) 10:21:56 - Loan Calculator (Preview) 10:23:39 - Loan Calculator (HTML) 10:38:00 - Loan Calculator (CSS) 10:47:46 - Loan Calculator (JavaScript) 11:03:18 - Weight Converter (Preview) 11:04:57 - Weight Converter (HTML) 11:18:41 - Weight Converter (CSS) 11:35:57 - Weight Converter (JavaScript)

[@JavaScriptKing]

sure mate

[@riteshgaihre6277]

Sir i want to learn from you react project

[@JavaScriptKing]

@@riteshgaihre6277 check my react channel @reactproject it is called react and next js projects with sahand

[@kunalchauhan5294]

your channel name is already defining you A KING!!!!

[@JavaScriptKing]

Thank you

[@edgarmkrtchyan9607]

​@@JavaScriptKing Thank you for video👍

[@JavaScriptKing]

@@edgarmkrtchyan9607 thank you mate

[@Childrenworldfunny]

Sir pls tell me that I did bca in 2013. And now I learning web developing .. will I get any job pls tell me

[@muratdurmaz4241]

I absolutly love it . I prefer this kind of short projects instead of watching hours long videos that I lost track of it at some point. Here you never get bored. It is simply explained and easy to practice. Many many thanks....

[@JavaScriptKing]

Awesome, thank you!

[@tonygomez4085]

I love your passion, dedication and delivery to teaching other people, (which I'm assure are all strangers), and your knowledge. I just start learning html for the sole purpose of keeping my mind active, while learning something new at the same time. I will soon be reaching my 70s and over the past 20 years I have learned a LOT about Android technology and currently set my mind on Programming. I do not intend, under any circumstances, to monetize what I have learned because I do not have the need, but the impetus to learn has always followed me... and still continues. I have bought several courses and in just one (1) hour I have learned much more than in the months of practice that I have been doing. Thank you very much again and many, many blessings. A big hug from Puerto Rico: "La Isla Del Encanto".🙏

[@JavaScriptKing]

Thanks very much for your nice comment. Appreciate it :)

[@Knards]

I am 72 and do the same as you. Keeping my mind going. I have wrote PHP and CSS for years, b8uit never learned Javascript. I make project after project on localhost and love doing it

[@JavaScriptKing]

@@Knards wow, I cant imagine, this is my dream. I am 35, but I want to this till the end of my life

[@thisaruwithanapathirana4885]

You have saved my time alot. I have wasted hours and money on JS courses at Udemey. You have taught everything with active projects for $0. You are a greet teacher for beginner programmers. Thanks alot

[@siamakut]

I am an Iranian software developer, I can just say I am proud of you ❤️ you did such an awesome job, keep up the good work bro🌟 ❤️

[@JavaScriptKing]

Thank you! Will do! ❤️🙏

[@lilianamilano3707]

I just finished the last project in the series

[@JavaScriptKing]

Thanks for your review and feedback on the course.

[@richochet]

I've only just started and _already_ imo this is proving to be the best taught project tutorial I've ever seen.

[@TheCat-jc6yy]

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

[@biswajitmuduli7333]

1.05.00 h , i realy compete my 1st project.i like your 1.smooth speaking,2,detailed explanation. thanks bro.

[@tonytodd7011]

Finally found the best organized and explained tutorial? Thank you JavaScript King, I think you are the tutorial king!

[@JavaScriptKing]

thnaks

[@BojanaKostovic]

what a wonderful explanation...I want more videos about javascript project...best regards

[@taofeektunji5605]

Hello teacher an from Nigeria I love programming More with the way you explain things I really love your teaching I wish i could see you one day😍

[@JavaScriptKing]

You are very welcome

[@jkscout]

You are the best. I feel so relaxed watching your videos. Most others stress me out. Such thorough explanations of literally everything you type and click are hard to find. Very much obliged for your channel.

[@aurelionsoul9125]

after memorizing syntax, your projects helped me put the puzzle together thank you!.

[@richardsinclair7661]

Great video! Doing a few of these really helped me get used working with HTML, CSS, and JavaScript. It was fun going off of your preview and then seeing how our approaches differed. I do wish the projects had more variety though. Most of the projects are styled very similarly and they're programmatically similar too.

[@Ibrahim_webdeveloper]

You have no idea of how much you really help me with this projects …. I felt like crying 😭 ❤. You really make me happy 😊 I have no words to describe how much I love the effort you put for this amazing best videos❤ Thank you sir

[@dumitrulucianbalasoiu1237]

This is the best course from KZbin for sure I can understand and learn very easy everything it’s slowly nice job Keep this uppp❤

[@PeriklesPeriklesoglu]

i really appreciated for your teaching style and mini-project selected by you. these are really helping me to embrace javascript programming logic.

[@JavaScriptKing]

Glad I could help!

[@Leomos2024]

really like to work on all of these projects, thank you for your time ❤

[@kartikkaran9282]

Very must video for beginner's learner

[@JavaScriptKing]

Yes, thanks

[@Shriram279-1]

Hi ,sahandghavidel thanks a lot for the efforts and content from you. I have watched and some 8 to 9 videos of yours and tried the project on my own. Iam able to do it and understood the concepts from the video. It would be really nice and helpful if you do upload the project tutorial of 100+ projects using react js, typescript and tailwind css. Lot of thanks to you once again.

[@Hunterjeet-pq6fv]

one of the best tutorial.. you channel gonna ALL WAY UP ....keep it up.......

[@JavaScriptKing]

Thanks a ton

[@earlninoalajid8105]

Shortcuts 2:26:13 6:31:56 6:56:12 8:11:21 8:13:16 9:35:14 10:38:48 10:40:38

[@brahimmakhloufi]

i love you as a teacher mor than as a programmer thank you for your tutorial

[@aafiastr]

Really u r teaching is very great...

[@veryslon5104]

Thanks you wonderful teacher

[@JavaScriptKing]

You are very welcome

[@sagarjh6737]

As a beginner i learned lots of things here thanks a lot

[@jubersonjulesoriol1440]

Hello, I really like this series of videos that you make, I would like you to do a course on 12 projects with React js for beginners using react hooks, I'm sure you would help many people

[@JavaScriptKing]

Noted

[@sahiraahamed]

Thank you so much.. This is most latest newest js videos.. Waited so far

[@JavaScriptKing]

Welcome 😊

[@sudharanirajasekar3409]

Awesome vedio to learn js

[@JavaScriptKing]

Thank you 🤗

[@antonella6818]

Thank u very much for this! its helping me a lot and its super fun! . Greetings from Argentina!

[@JavaScriptKing]

thanks for watching and glad you found the video useful

[@antonella6818]

@@JavaScriptKing ❤️🤗

[@niteshprajapat.d3v]

One of the best project video! Thank you Sir ❤❤

[@JavaScriptKing]

So nice of you

[@cyruszand221]

I sincerely appreciate your informative and comprehensive job. I am profoundly driven into html& CSS by watching this series of projects. Million thanks .

[@JavaScriptKing]

You're very welcome!

[@Mohammadreza-Dolati]

Thanks a lot for your useful contents, I appreciate you because of these valuable information , ❤️ from Iran

[@JavaScriptKing]

thanks mate, love you :)

[@dnyaneshwarinare8759]

Thanku so much 😀 🙏 . you are amazing , wonderful teaching 👍.

[@JavaScriptKing]

Thank you

[@Amanकुमार-y4m]

Thankyou so much sir ❤😊😊❤❤

[@hirutassefagebrekidan41]

Thankyou, very clear and easy to understand. 🤗

[@JavaScriptKing]

You’re welcome 😊

[@InfoWarsDixie]

So fat so good! I've made it through 25 minutes and am not lost yet. Thank you. This looks like a great resource. Maybe I can do this:) One question I have is that I don't believe my Visual Studio shows a description of the class (if the term is correct) and what it does. On your video when you encounter the blue text I believe your site shows a description of what that means at the bottom of the page, like for example this is a combo of these colors. I don't think my VS provides thst description. Thanks if you can elaborate. :)

[@shubhamhooda202]

hello sir... your project is very helpful for beginners

[@JavaScriptKing]

Thanks and welcome

[@daviddelgado5358]

Thank you very much for the time dedicated to these interesting and useful projects for those of us who are learning. Your way of explaining is excellent and enjoyable, and what is learned is very practical.

[@আরজানি]

Wow,,sir,,your are Super.. Please give More advance video.. I am From Bangladesh.. I am learning with you codding and English.. Love you 💓

[@JavaScriptKing]

Thank you, I will

[@আরজানি]

@@JavaScriptKing thanks.. I am waiting for your advance courses..

[@kevinthomas2406]

Learned a lot from this , I am coding along with the video..! thank you for this video .. Next can you please make a video on some advanced projects for those who have comlpeted this video.

[@JavaScriptKing]

Sure I will

[@GeekLab]

Your explanations are so clear ❤️. Can you kindly teach about GIT HUB please? 🖤

[@JavaScriptKing]

Yes, sure

[@GeekLab]

@@JavaScriptKing ❤️

[@quentinMezatio]

great video

[@ZeshanMukhtar1]

Great video greet concepts, love from Pakistan ❤️

[@JavaScriptKing]

🙏

[@dillipkumarmishra7549]

Great lecture. All the best Dr. Sahand

[@JavaScriptKing]

Same to you

[@Raj_Vishwa1]

Ur Real King👑 JavaScript Forever 👐

[@JavaScriptKing]

🙏😅

[@sainathgadde433]

you need more recognization tq u youtube for showing this amazing channel

[@JavaScriptKing]

So nice of you

[@Joy-rn1ux]

Awesome help

[@mohammadmirzaeirafsanjani4326]

Great

[@The.creativity]

جميييييل

[@CGBORG-0502]

Thank you for this wonderful video. 🙏

[@JavaScriptKing]

So nice of you

[@gauravtrivedi2754]

Thanks for giving us this type of knowledge

[@JavaScriptKing]

thanks for your comment mate

[@habibasajid2656]

Your content is next level.

[@subramanianchenniappan4059]

Wow . I am an experienced fullstack java developer . I will ask my nephew to go thru this course to get handson knowledge and apply for jobs

[@JavaScriptKing]

thanks

[@JencyOza]

You are amazing 💞 thank you so much

[@vojislavstefanovic3806]

completed. It was awesome!

[@griffer695]

Thanks for the great lesson 👍 My only concern is the part where you add json and the other objects for api. I wish it was better explained...🙏

[@jaikumar3775]

Thanks Sir HeLP FULL Video

[@webprogrammingtutorials-alo69]

Excellent. Very useful. Thanks

[@JavaScriptKing]

So nice of you

[@RolanArjan]

Keep updating, sir. You made my day

[@JavaScriptKing]

Thank you, I will

[@criptoplanktoninvestidor]

I loved this channel!!!!!!!

[@younghunnidofficial867]

I love all of your work

[@shabbirali8471]

Amazing Thank you for sharing your best happening

[@JavaScriptKing]

You're welcome! I'm glad you enjoyed the content on my KZbin channel. If you have any questions or suggestions for future videos, feel free to let me know. Thanks for watching!

[@arsunny100]

Awesome explaining method.. watched just this video and fell in love with u sir...😂

[@JavaScriptKing]

So nice of you

[@Sam_Gaming4]

lovely explanation

[@JavaScriptKing]

Thanks for liking

[@AbdulHafeez-ov4fw]

very interesting projects especially for beginners to make their interest in this field

[@JavaScriptKing]

thanks

[@KUKUFM457]

really super do more videos

[@Imran_kpk]

Sir this is very informative thanks from core of my heart ❤️

[@JavaScriptKing]

So nice of you

[@Ahoura_edits]

Thank you for good videos

[@myinspirationzone]

Very educative project. Please check on the English Dictionary project, not all audo urls fall under the phonetics[0]. Try words like woman or girl. The audos are there in the API but they are far inside the dictionary.

[@JavaScriptKing]

Thank you for your feedback on my English Dictionary project. I appreciate you bringing this issue to my attention. I will definitely check the API for the pronunciation audios of words like "woman" and "girl" and make any necessary adjustments to ensure that they are accessible to users. Thanks again for your input, it helps me improve the project and provide a better user experience.

[@madawakolla1251]

Thanks for this immense effort❤️❤️❤️

[@JavaScriptKing]

Thank you

[@chandralokesh]

Loved the video, Lots of knowledge 👍

[@JavaScriptKing]

Thank you

[@kedarvyas9066]

thank u so much sir for an amazing teaching a learning a lot

[@JavaScriptKing]

It's my pleasure

[@Royal-1992]

Awesome.. Thank you so much 😊

[@JavaScriptKing]

Most welcome 😊

[@tripleaproductions4581]

Hi sir, I'm your new subscriber from the Philippines🇵🇭, your explanation are so clear, can you please upload weekly? Teach us more about coding🤍 Thankyou in advance

[@JavaScriptKing]

I will try my best

[@informationpoint3318]

I love this video content sir. carry on sir please make a video on php.

[@JavaScriptKing]

sure mate

[@valmirarozalino]

Que aula maneira, parabéns 😁😃😃

[@JavaScriptKing]

thanks

[@mfaiz6]

Bless You!

[@JavaScriptKing]

thank you

[@raunaksingh5779]

Thanks for making video for API

[@JavaScriptKing]

You are most welcome

[@raunaksingh5779]

@@JavaScriptKing sir plz make a profile update video like Facebook

[@JavaScriptKing]

👍

[@dmac93065]

Superb content!!!

[@JavaScriptKing]

Thank you 🙌

[@kevinrajgor8754]

I do not know if anyone noticed,but in the Temperature Converter Project CSS styling is done before HTML has been written.

[@harrinsonA]

33:31 I think here is a mistake because you have to put transition inside the .btn not .btn:hover, additionally I suggest you utilize the transition with properties separated each other because when You use the property "all" the browser is in Alert and it is considered bad practice. .btn { transition: background-color 300ms ease, text-shadow 300ms ease; } Nice Tutorial!👍

[@JavaScriptKing]

sure mate

[@mohammedsadhik3649]

Thanks 👍👍 check the temperature section CSS part comes first then html come

[@JavaScriptKing]

Yes, you are right

[@edgarmkrtchyan9607]

Thank you for this video✋

[@JavaScriptKing]

You're welcome 😊

[@BrokenHeart-ly8zc]

Thank you sir for the video 😊

[@JavaScriptKing]

Most welcome 😊

[@Lima-yd3cm]

Adoro seu canal, abraços aqui do Brasil 🇧🇷

[@JavaScriptKing]

❤️🙏

[@G_Ismaıl]

Waiting!

[@birendrayadav3089]

Waiting

[@JavaScriptKing]

❤️👍

[@-BC--AbhishekSingh]

amazing contents

[@JavaScriptKing]

Thank you

[@arshad1781]

Thanks for sharing free knowledge ☺️

[@JavaScriptKing]

Thank you

[@md.moijeuddinmolla1328]

We really need you . Thanks

[@JavaScriptKing]

Thank you

[@umeshtharu4745]

Hello dear sahand...your work is amazing and I learnt a lot and coded alongwith your videos & developed many projects from your true and deep efforts...thanks a lot and lots of love❤️ from India...actually I want also know that...may I use your projects references in my resume for job applications...thank you so much for your work again sir

[@JavaScriptKing]

no problem mate :)

[@umeshtharu4745]

@@JavaScriptKing Thanks a lot sir...deeply obliged for you kind help❤️🙏👍🇮🇳🙂

[@realankitsinghal]

Thank you for this, actually i am looking for projects that i mentioned in my resume. These projects are really good 😍

[@JavaScriptKing]

Thank you

[@taarun8565]

hi bro can u give ur insta id

[@JavaScriptKing]

ghavidelsahand

[@raghadhamed4613]

this video is good and i understand a lot from it but if there was a little bit of animation in the website (examole: a loading effecr) it would be really useful

[@JavaScriptKing]

sure mate

[@everforexcanada5663]

awesome job! thank you!

[@JavaScriptKing]

Thank you :)

[@ziaullahshah1209]

thanks sir love u u r great what a work

[@JavaScriptKing]

Thanks a ton