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

[@JavaScriptKing]

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

[@AideenQaragozlu]

This tutorial is absolutely worth going through if you're a beginner, as it gives you a fair bit of actual coding experience.

[@JavaScriptKing]

thanks for your comment

[@andylovec8403]

Just finished the heart trail project, and as a beginner, I agree. I have learned a lot.

[@Atharv123]

I wish i can personally greet you sir Thank you ❤ ​@@JavaScriptKing

[@heysourin]

I'm currently on the 3rd project and I want to say you are an awesome teacher sir. Thank you so very much!!

[@JavaScriptKing]

thanks. I am very happy to hear that you are enjoying the course. I am adding more projects to the channel soon 😉

[@readbhagwatgeeta3810]

Can you tell me the prerequisite for this course please ? Can I directly jump to this course with only basic programming skill ?

[@heysourin]

@@readbhagwatgeeta3810 It will be plus if you have basic understandings of HTML, CSS and JS. Otherwise you can learn it on the go buddy. It is an amazing tutorial.

[@UDff07]

Hey mate I'm also in 3rd project and I'm getting error in totalcharacter.value.length property. Can you help me help me please.

[@lincolnsimms2780]

Perfect. Starting University in July and one of the courses is HTML, CSS and Javascript. Never coded before so quite nervous. Found your you-tube channel and have done the first project. It has improved my confidence level! Your pace in explaining everything was spot on. Simple programs that look amazing. I will now attempt to create a countdown timer with this basic knowledge then move onto your second project. Big thanks.

[@JavaScriptKing]

Thanks for your comment. I am very happy to hear that you have enjoyed my video 😉

[@HenryBassey-fp5uh]

Amazing. I just started my Tech career two months ago. i hope this career path favours me.

[@vlogsdiaries4250]

at 40:18 My heart actually clapped. The tutorial is so awesome. I was scared about writing javascript before watching this awesome tutorial but now I'm surprised about the result. Thank you so much.

[@JohnnyBoy-uz4tq]

I loved the incorporation of everything in a single project. Instead of just uploading a setup with the css and html already done, you do everything alongside us from scratch. I love your approach, I've learned a ton! Thank you!

[@莊博錩]

Hello I am from Taiwan , and I saw your video really helpful and easy to follow. I could not thank you enough, you are the genius teacher, I saw so many lesson but I just give up in the middle of lesson, but yours lesson I just go through from the begging to the End and still want to watching again...... I am really thanks you.

[@atnguyen5240]

00:00 Introduction 1:48 Project 1 - Digital Clock 43:17 Project 2 - Multiplication App 1:35:58 Project 3 - Button Ripple Effect 2:07:18 Project 4 - Real-time Character Counter 2:46:54 Project 5 - Sticky Navbar 3:38:39 Project 6 - Random Color Generator 4:19:39 Project 7 - Heart Trail Animation 4:53:02 Project 8 - Video Trailer Popup 5:42:58 Project 9 - Blurred Background Popup 6:42:03 Project 10 - Background Image Scroll Effect 7:11:17 Project 11 - Drum Kits 8:02:15 Project 12 - Random Photos 8:35:20 Project 13 - Image Slider 9:28:41 Project 14 - Dark Mode Toggle 10:04:10 Project 15 - Auto Text Effect Animation 10:34:24 Project 16 - Tabs Section

[@tonytodd7011]

You have nothing to do man? How fool you are man!

[@AcademiaCS1]

Excellent job, good man. Success for your site and this channel. Thanks for all helping tutorials. You did it great.

[@victorzhang5639]

Great projects! It took me 3 weekends to go through this course. I am very new to learning web development, these projects really helped to demystify HTML, CSS, Javascript, and the developer tools. Look forward to more content from you!

[@JavaScriptKing]

no problem, good luck with your work

[@Ankitsharma-yh6hh]

From where you are learning web development? Please reply sir

[@victorzhang5639]

@@Ankitsharma-yh6hh I have been following the Odín Project for a year, highly recommended!

[@dimitmoto1716]

Big thanks for providing us this content and the code for free! Nice, simple and functional mini-projects from start to finish, showing how to create all the needed parts ( html, css, javascript), how to use vscode and tricks on it!

[@JavaScriptKing]

thanks for your inspiring comments, I really appreciate it. I am happy to see you enjoyed the projects

[@dimitmoto1716]

@@JavaScriptKing I am enjoying them, thanks! When I have time, I go to the timestamps of the video and I choose whatever project I like !

[@chansocheatsok5902]

Your projects are really helpful for increasing html, css, and Javascript knowledge. Thank you for your amazing projects.

[@JavaScriptKing]

thank you for your comment

[@wisdomjordan]

I have been in web development for only 2 months, I can do good html/CSS code, and learnt JavaScript as well. you have made me appreciate the use of JavaScript and thanks so much for that.

[@waqarahmad9094]

i have started learning JavaScript and you have boosted my confidence 10 times. you made it looked so simple and it was a fun as well. quality content

[@JavaScriptKing]

Glad I could help!

[@Ankitsharma-yh6hh]

Bhai konse course refer kar rhe ho aap

[@Ankitsharma-yh6hh]

Which courses you are referring to learn web developement

[@찌햄-p5r]

1:57 Thank you from S.Korea. I can't stop shivering about starting this project

[@JavaScriptKing]

amazing, good luck with your learning journey

[@alimiabeebadebola7164]

You channel deserves 5m+ subscribers. Your really understand what you teach more than some paid courses

[@JavaScriptKing]

thankkkkkkkkkkk you

[@ElinaAli-o4q]

Great work it's useful information. Thanks

[@studentsh8707]

Better than most online courses. You should have millions of subscribers.Thank you so very much sir.

[@JavaScriptKing]

You are most welcome

[@RolanArjan]

OMG sir you've opened my mind to how amazing you are. You explain it very clearly and slowly. Love it so much

[@JavaScriptKing]

So nice of you

[@piyushtyagi4143]

I Just completed Tabs Project. Sir you are doing really amazing job.

[@JavaScriptKing]

Great man, I am happy to see you enjoyed the course. You can ask me any questions you may have 😉

[@piyushtyagi4143]

@@JavaScriptKing Sir I am really confused that how much practice of js do I need. I am from India, can you guide how can I start freelancing and manage my personal finance.

[@JavaScriptKing]

@@piyushtyagi4143 You just need to start with small projects and get familiar with javascript, then you can do bigger projects like an e-commerce or social media websites. Then, you are ready to start searching for a job, and start doing projects as a freelancer.

[@piyushtyagi4143]

@@JavaScriptKing love and respect for you sir ❤️

[@codingacumen4536]

Very nice tutorial I made all the projects. Please upload more videos like this. Keep it up. The way you explain is very amazing. Well Done!

[@JavaScriptKing]

thanks for your comment, I am adding more projects to the channel soon

[@codingacumen4536]

@@JavaScriptKing welcome and thanks

[@CODE-4FUN]

This is the best teacher in terms of programming I've seen so far, the step by step method is soooo mind blowing. Thanks a million, keep up the good work!🤝

[@lessecretsducoran576]

True

[@anastasialukavsky8999]

Just finished the whole thing. Projects are awesome and easy to follow! Thank you so much for your hard work!

[@JavaScriptKing]

Glad you like them!

[@mansurmohamed1630]

I enjoyed the digital clock project and I decided to do more with it. Instead of having the h2 as digital clock, I plugged it to an API that generates inspirational quotes on the top every 15 seconds

[@cubeheadii9284]

Amazing tutorial i will recommend this to everyone who wants to start coding

[@JavaScriptKing]

thanks

[@bancroftberlin]

Thank you for videos like this. I'm a software development trainee and your exercises are part of my my training program that I follow besides school.

[@JavaScriptKing]

You're very welcome!

[@reflectedthoughts3376]

I was curious to have more tutorials like this and luckily I found them on your channel, thanks for the effort!

[@stevenzhu148]

This is my first time leaving my comment! I felt it was so useful and I coded every project you made. You are a WONDERFUL and AMAZING KZbinr and I wish you may publish more tutorials! Thank you so much

[@JavaScriptKing]

thanks mate, appreciate it, I am adding more projects to the channel soon, there are two more videos you can check if you are interested

[@stevenzhu148]

@@JavaScriptKing that's awesome and I love to check!

[@lessecretsducoran576]

Wow oh my god you blow my mind I'm graduating in June as a full stack Software engineer These projects are making really strong and opening my eyes May god continue to bless you Mr Great engineer

[@codingninja01_]

wow, finally i found the videos about hours of projects with html css javascript. thank you😉

[@PortgueseProBF3]

Just made the full video step by step and tried to make some changes along the way, thank you so much this video is amazing

[@JavaScriptKing]

You're welcome!

[@tommytanti1776]

All the projects worked for me. I appreciate your effort in putting all this together. Thank you so much, brother.

[@JavaScriptKing]

Great to hear!

[@muslimadeyemo4281]

I've really benefitted a lot from this video, it is as if the video was targeted at my type, a great novice. I can't thank you enough Dr. Sahand Ghavidel, more power to your elbow.

[@JavaScriptKing]

Glad it helped!

[@BaBa-Medias]

Amazing content..! It took me 3 weeks but improved a lot of skills. REaally Awsome👌

[@JavaScriptKing]

Glad to hear that!

[@moshoodsanusi6246]

I am from Nigeria. Just found your page. What an amazing content! You are a natural teacher. Please more content. I love your pace

[@JavaScriptKing]

🙏🙏❤️

[@nidhimehta6076]

Thanks for teaching so patiently... Literally you are telling each and every step in an easy way, which is really helpful for beginners like me 😊

[@JavaScriptKing]

So nice of you

[@webdevelopment3508]

hii we can be friend if you dont mind

[@webdevelopment3508]

currently i am learn react js right now we learn webdevelopmet and i ama mobile developer and you

[@yas12356]

This man know how build beginner... love your Videos. Clear and simple. Love it

[@JavaScriptKing]

thanks for your comment

[@ДианаДиана-с1г]

THANK YOU SO MUCH FOR THESE AMAZING TUTORIALS!!!! I extremely enjoyed all the projects. In addition, I finally started to figure out how JS works

[@JavaScriptKing]

You are so welcome!

[@mjwelc]

Did the first project and love your teachings already! Thank you so much!

[@santhoshcsk8979]

Would be really helpful if u did a series on react js and next js . Hoping for the same . Amazing content sir by the way. Thank you so much

[@JavaScriptKing]

thanks for the comment, I am preparing more courses

[@tripplem5343]

this is one of the best youtube videos on the platform

[@naifalshehri5579]

I have finished the first project “digital clock” Thx a lot for ur hard effort, I’m planning to finish these 16 projects in the next few days. I’m struggling a little bit with JS it’s confusing i need to watch some tutorials about js only .

[@JavaScriptKing]

the js concepts are being repeated in all projects, I personally learn the concepts in the projects better

[@AcademiaCS1]

I learned, remembered, practiced and improved the UX-UI, thanks again.

[@sameerk12982]

Hello from India Sir.... Thank you very much for this wonderful and easy to understand tutorial..... this is the exact tutorial beginner should start with.... I love your step by step approach...just completed digital clock and its working great. Highly appreciated.

[@JavaScriptKing]

Thanks and welcome

[@SacredScrolls786]

Because of algorithm most of the person in the world are disturb and addicted but this algorithm has helped me to reach this channel. I had search for Html CSS JavaScript projects but it didn't show this one, but through scrolling and because of algorithm I have reached here, brother your teaching skills are in another level please bring more interesting projects Love from India ❤️

[@JavaScriptKing]

Thanks to you and the algorithm :)

[@HelghastSon]

Very good video. Video can help new front end devs really understand the basics of these programs. I'd only suggest maybe a little more explanation on some of the JS aspects as to why we choose certain methods so that we can follow the logic you are using. Even a 5 second explanation of what exactly the method is doing for example. (why use query selector over getElementByID). It's simple things but I believe many of the viewers here are very new to these coding languages and would benefit greatly from that.

[@JavaScriptKing]

thanks mate, appreciate it

[@harryslp]

I made an account in GitHub just to follow you, I speak Spanish and I understand a little English, even so I understood you the first projects I've done

[@JavaScriptKing]

thanks mate, appreciate it. Just keep in touch

[@Darkest-Kn1ght]

Appreciate the tutorials. Am attempting to learn a little JS and these have come in quite handy!! One thing I think I should pass on for others that are beginning, make sure you don't leave spaces where they do not belong. I was working on the real time character counter project, and it kept starting off at 5 instead of 0. I went through all the code over and over and over. Couldn't find why the total counter kept starting at 5. Finally, I removed the space between the textarea and closing textarea sections, and that fixed the issue. Because of the line return, plus the indention of 4 spaces, my counter kept starting at 5. So for all you folks that are true beginners like myself, keep that in mind when the code itself isn't wrong!

[@narcis815]

Never see someone who have the patience to explain slow and not go fast or skip a line of code. and explain the tricks for some fast coding. I think I will stay on this channel to see each project and I hope that I will understand JavaScript much better. seems more logic here :D Keep up the awesome work

[@JavaScriptKing]

Glad it helped!

[@danceworld3376]

You are so good. I don't have words how to thank you, thanks a lot.

[@JavaScriptKing]

thanks, I really appreciate your comment. I am adding more projects to the channel

[@MelkoR4111]

Your pace of speech and the way you explain things are the best i have ever seen on KZbin. Thanks for everything.

[@JavaScriptKing]

So nice of you

[@HelSidaruk]

Thank you so much for your videos, I love them! You're doing such a great job! I'm waiting for new videos so much 🥰

[@JavaScriptKing]

Glad you like them! New projects are coming soon, I am working hard on them :D

[@haibangngo7357]

you are my Teacher,nice Tutorial and you make it looks very simple with small Projects for Beginer like me,very easy to understand

[@JavaScriptKing]

Thank you

[@Life_is_Awesome_Civil]

Watch video in 3x speed

[@64_bit_coding]

hi

[@futuristictechnology..531]

Thik hai smz gya

[@medsaidmdelhachmy8432]

Instead of thanking him for doing this great job for all of us you care only about the speed of his speech

[@omchaudhari3576]

Thank You Very Much 🤗. I was very scared of JS before, but now I'm in a love with JS ♥️ Once Again Thanks 🙏🏻. Love From INDIA 🇮🇳

[@JavaScriptKing]

🙏🙏🙏❤️

[@omarmohammd5276]

Also mr javascript king, can you mae an intermediate version of this, all of these projects were super helpful and I am sure all of us appreciate your hard work!

[@JavaScriptKing]

Yes, soon

[@omarmohammd5276]

@@JavaScriptKing ok great, cant wait to do that one aswell

[@callumcandy4153]

Wow, this is such high quality and goes pretty in-depth for a beginner tutorial!

[@JavaScriptKing]

Glad you think so!

[@rodrigodiaz1085]

Greetings from Argentina, this by far one of the best courses i've been watching. Good job

[@JavaScriptKing]

thanks mate, appreciate your comment

[@dimitmoto1716]

By the way it seems to be a syntax error on 40:10, line 20

[@JavaScriptKing]

thanks for comment, I will fix it in the course update

[@blackcoffee4271]

i'm brazilian i'm not fluent in english but i'll learn with you! can you make more videos about javaScript please?

[@JavaScriptKing]

sure mate, I'll add more projects soon

[@jovialsharma46]

One of the best video in youtube that is explanined in so easy way. Very educational I will be spending my time to watch this full but I also want to know how we can do it in JAVA.

[@JavaScriptKing]

Wow, thanks!

[@updateserver]

This is wonderful 🙌🏽🔥… if you could do a series on Python that’ll be very beneficial 😁

[@JavaScriptKing]

sure mate, I will

[@udaramanula915]

Today I completed the multiplication app , I learned a lot ....Thank You for that......This is my first JS project. You explained the javascript code...so it was easy to understand the process inside the app I hope to do more modification to this app and build something creative.

[@JavaScriptKing]

Great 👍

[@adisameba]

Hi, thank you for your video. Though I am really confused about first project. There to update time infinetely you are using recursion. How does it affect stack. Wouldn't we get at some point something like stack overflow error? This question might seem silly, but I have just started learning JS.

[@JavaScriptKing]

you can use the other way too, you are right

[@kamalthapa1749]

FINISHEDDDDDDDDDDDDDDDDDD ALL ...THANK YOU sir

[@JavaScriptKing]

More to come!

[@ashiqurrahman1385]

You are a real programming King-an awesome codder.

[@eidinets]

No word to explain, how helpful these tutorials are for beginners.

[@RosanwoKehindeOkeowo]

Best HTML5/CSS3 and JS tutorial on the Internet

[@JavaScriptKing]

thanks mate

[@aliz3700]

بی نظیر بود خیلی چیزا یاد گرفتم💐💐

[@JavaScriptKing]

فداتم 🙏🙏

[@Samay94]

I am watching this video at 3 Am and thinking to start my first project now onwards. Very easy explanation. I love it❤️😍

[@JavaScriptKing]

All the best

[@godwinshibu2297]

Great video! Just completed the whole thing ✅✅

[@bar___]

Fantastic, thank you. I completed a few Python courses and found that Javascript is better suited for the projects I want to develop. This video is ideal for me.

[@younger_sis]

I was little nervous bcz i had no clue where have to start JavaScript from basics but now i found your video i feel more confident i will complete all projects as soon as possible . ......thank you a lot for providing us with this video 👍

[@JavaScriptKing]

Glad I could help!

[@nk-whiteinfo9312]

you are indeed a king in teaching javascript its just two weeks today i discovered u, wow so amazing i'm understanding when i finally become a full time developer i will look for u to the tell u a special thank u. I'm in 2 months on my journey hope to get there soon thanks a lot you re really helping with your beautiful explanations

[@JavaScriptKing]

Great mate, thanks for your message. I am very happy to hear that you are enjoying my videos. I am going to update more videos soon.

[@briankgarland]

This is how beginner tutorials should be done. Good job! 🎉

[@JavaScriptKing]

Thank you so much!

[@KingDiamondHands]

Wow I recently purchased a course and I must say after 30 min watching your project I understand a whole lot more. I hope you have advanced teaching

[@JavaScriptKing]

Awesome, thank you!

[@naviandalexkidsshow600]

I am learning all your projects ,it gaves me an advantage to learn css, html and JavaScript all at once, you are the best teacher for me thank you for helping.

[@mithunyadav8495]

Real gem for every web developer aspirant!! Lots of thanks and gratitude for this remarkable course. Lots of love from INDIA.

[@ememedet9787]

Well done sir. This is one of the best tutorial ever.

[@JavaScriptKing]

Glad it was helpful!

[@ayeshaandleab2581]

I m totally beginner and I learned a lot from this extensive video Thanks JavaScript king

[@JavaScriptKing]

Glad to hear that

[@ShankarPrabhuS]

Beautifully explained 😃 Thank you so much sir 😊😊

[@mrbeliever1810]

Need more contents from you bro. You are really good on explaining (Beginner can easily get you). Thanks For Your Content...

[@JavaScriptKing]

I will try my best

[@great9640]

what a great 16 projects man!

[@MovieBuffs420]

Your are my Teacher forever, you changed my thought

[@zyshaan2506]

Best one yet i know am a noob but this tutorial is clear and on point please continue do more of this

[@abhijoshi502]

I think it's enough for any beginners because watching after this video I think I am the best for html, css, java script....you are the best brother

[@JavaScriptKing]

Thanks for sharing

[@CharlesSmall]

This is the type of video i looking for the whole time. Thank you sir. The is from the best material or software i ever find on the web.

[@JavaScriptKing]

You are welcome. Thanks mate

[@amireshaghi4228]

Perfect Sahand, Wish the best

[@JavaScriptKing]

thanks for your comment. wish you the best too

[@gulamgausshaikh1896]

Learning HTML CSS and JS since last 2 months but not confident to make project Your videos made it quite simple.

[@JavaScriptKing]

glad to hear that you are enjoying the projects

[@sokly4131]

I'm Cambodian. I like your teaching

[@luce36]

I promise that I m gonna watch all the videos in this channel 🖤really nice and its TOTALLY free!!!

[@JavaScriptKing]

thanks mate, appreciate it

[@issahaidara8101]

Thank you M. Sahand for your differentes great project. They have been very helpful and useful for me. Congratulation ! and Thump up for you !

[@reflectedthoughts3376]

❤❤❤ I suggest a bit of tweaking in the JavaScript code, the part where am is converted to pm so it should be, if (h >= 12) { if (h > 12) { h = h - 12; } ampm = "PM"; } else { ampm = "AM"; } The reason for this change is that at 12pm the clock doesn't show pm but am.

[@JavaScriptKing]

check the github for update

[@villaislive5487]

just finished digital clock project and i am glad to have you. Thank you lots of love from Nepal 🥰

[@JavaScriptKing]

My pleasure 😊

[@saimakhalil5137]

Excellent Teacher!I Admire your patience :)

[@JavaScriptKing]

thanks ;-)

[@misscreative6865]

this is incredible and amazing at the same time i feared js before this video i made all projects in 16 days and you are so humble to like your each comment and this is what mtoivated me to share my review !

[@JavaScriptKing]

Wow, thank you!

[@misscreative6865]

@@JavaScriptKing i knew you would reply its an proud moment for me

[@amychi_]

Okay, just had a mini glimpse into this, and MAN! this is exactly what i need! Currently, ive only done 2 absolutely basic html/css and my next step has been Javascript. This'll do lots.

[@JavaScriptKing]

glad to hear that

[@sadnb12]

So f great content , I love it. Keep making this type of videos. Mabe make some more complex projects. Best of luck

[@JavaScriptKing]

🙏👌❤️

[@NimbleVerse321]

very interesting project sir even increase confident to do create own projects thanks a lot

[@oscaranillo7131]

Great Projects! Keep this up 100%!