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

00:07 Create a heart trail animation project using HTML, CSS, and JavaScript 03:34 Setting up live preview and styling HTML project with CSS 10:21 Adding JavaScript to HTML to detect mouse movement 13:48 Creating and positioning a span using JavaScript 20:32 Creating an auto text effect animation using HTML, CSS, and JavaScript. 23:50 Setting up live preview in Visual Studio Code for web development projects 30:28 Setting up JavaScript in HTML and basic DOM manipulation 33:58 Implement typing effect using JavaScript slice method 40:42 Creating an HTML file and adding basic structure and content to it using VS Code 43:57 Starting with CSS Styling for the project 50:12 Adding functionality to the project using JavaScript. 53:24 Using JavaScript to retrieve and display system date information 1:00:02 Styling the button and adding CSS for centering and hovering effect 1:03:02 Styling a button and adding hover effect 1:09:48 Linking JavaScript file to HTML for project usage 1:13:13 Customize button effects using JavaScript variables. 1:19:49 Adding images and button in HTML using CSS 1:22:58 Using CSS to center elements and style images and buttons. 1:29:49 Adding event listener to a button and creating a function to add new images using JavaScript 1:33:24 Creating a dark mode toggle with animation 1:39:28 Styling and linking CSS in HTML for a project. 1:42:49 Creating a centered circle with animation 1:49:16 Creating a function to update the body background color based on input status 1:52:32 Adding turn on and turn off mode to local storage 1:58:59 Adding CSS to style testimonial box 2:02:13 Styling the project with CSS 2:08:37 Adding functionality using JavaScript 2:11:55 Updating testimonials using JavaScript 2:18:42 Setting up the project with HTML 2:22:02 Creating CSS file and linking it with HTML file 2:28:57 Styling and formatting text with CSS 2:32:19 Adding functionality using JavaScript 2:39:14 Creating a digital clock using JavaScript 2:42:24 Creating a digital clock project using HTML, CSS, and JS. 2:49:16 Styling divs, spans, and texts using CSS 2:52:49 Integrating JavaScript into the project 2:59:46 Using JavaScript to update time every second 3:02:54 Creating a double landing page with hover effects and transitions using HTML, CSS, and JavaScript. 3:09:15 Styling elements using CSS 3:12:48 Styling buttons and elements using HTML, CSS, and JS 3:20:00 Dynamic class manipulation using JavaScript 3:23:08 Creating a random color generator using JavaScript for a responsive website with color code generation and transitions. 3:30:02 Start styling the project using CSS 3:33:16 Styling text and boxes using CSS properties 3:39:43 Creating random color codes using JavaScript function 3:43:08 Generating color codes using random characters 3:49:51 Using JavaScript to change images dynamically 3:53:10 Using Lorem Picsum to add images to the project 3:59:40 Styling the image container with 3D effects 4:03:05 Styling button containers and buttons with CSS 4:09:25 Creating image gallery with HTML, CSS, and JavaScript 4:12:47 Creating an animated search bar using new morphism design and JavaScript 4:19:18 Adding image and styling in HTML and starting with CSS 4:22:42 Styling the container and creating neumorphism design 4:29:37 Adding functionality to search bar with JavaScript 4:32:59 Adding JavaScript functionality to the project 4:39:44 Creating a loan calculator project using HTML, CSS, and JavaScript 4:42:41 Creating a loan calculator with HTML, CSS, and JavaScript. 4:48:34 Adding classes in CSS to target specific elements 4:51:21 Styling the webpage using CSS 4:57:23 Getting and calculating input values using JavaScript 5:00:23 Calculating monthly payment using Javascript 5:06:33 HTML part done, moving to CSS 5:10:00 Styling HTML elements with CSS 5:17:35 Adding functionality using JavaScript 5:21:06 Creating a countdown for New Year's date and time 5:28:27 Creating a Pomodoro Timer with HTML, CSS, and JavaScript 5:31:26 Creating an HTML boilerplate and live server setup 5:37:35 Styling elements using classes and properties 5:40:55 Adding functionality using JavaScript to the projects 5:46:51 Implementing a timer function to update every second 5:50:01 Formatting numbers using JavaScript 5:56:13 Create an age calculator project using HTML, CSS, and JavaScript 5:58:54 Creating a basic form with HTML and adding a CSS file for styling 6:05:10 Styling form elements using CSS 6:08:16 Styling and targeting elements with CSS 6:14:35 Creating a function to calculate age using JavaScript date methods 6:17:40 Calculating age based on current and birth dates 6:24:12 Setting up the project environment with HTML file creation 6:27:21 Adding Font Awesome CDN link in HTML code 6:34:08 Styling HTML elements and making them responsive using CSS 6:37:35 Adding functionality using JavaScript is the next step. 6:44:33 Using getAttribute method to retrieve data and implementing an increment function 6:48:13 Implementing functionality for a movie trailer popup with customizable features 6:55:07 Creating a popup video window with a trailer and controls 6:58:42 Adding font awesome icon and linking CSS file to HTML 7:05:56 Styling website elements and video section 7:09:45 Implementing CSS and JavaScript to add functionality to the project 7:17:04 Adding functionality to control video playback using JavaScript 7:20:17 Setting up HTML file with HTML 5 boilerplate and adding icons using Font Awesome 7:26:57 Styling the Heading and Buttons 7:30:36 Adding box shadow and background image to buttons 7:37:17 Creating and styling buttons using HTML, CSS, and JavaScript 7:40:41 Adding audio elements and background images dynamically 7:47:09 Using set timeout method to change scale after a delay 7:50:15 Using Live Server extension to instantly view changes in HTML projects 7:56:27 Creating a clock design using CSS styling techniques 7:59:34 Positioning numbers on the clock using CSS 8:05:59 Positioning and styling elements using CSS in a project 8:09:03 Using JavaScript to add functionality to the project 8:15:09 Demonstrating how to get and display hour, minute, and second in a clock format using JavaScript. 8:18:31 Creating a temperature converter with HTML, CSS, and JavaScript. 8:24:25 HTML structure for temperature conversion project 8:27:34 Creating a CSS file and linking it to an HTML file 8:33:50 Styling input elements using CSS 8:37:03 Adding functionality to the website using JavaScript 8:42:55 Covered event handling and data processing in JavaScript. 8:46:09 Calculating Kelvin, Celsius, and Fahrenheit from current value 8:52:30 Creating a container in HTML file for BMI calculator project 8:55:27 Creating a BMI calculator using HTML and CSS 9:01:34 Styling the container and bringing content to center 9:04:20 Styling container elements using border radius, shadow effect, and transparency. 9:10:25 Creating JS file, linking it to HTML, and adding event listener for BMI calculation. 9:13:15 Calculating BMI based on user inputs 9:19:23 Creating weight conditions based on BMI values 9:22:51 Setting up project folders and creating HTML file 9:29:27 Setting up CSS for project styling 9:32:43 Adding an image from Unsplash website to a webpage 9:39:41 Styling the navigation bar and adding hover effects 9:43:03 Using JavaScript to add functionality to the project 9:50:09 Implementing a scroll effect on a navigation bar 9:53:25 Creating a random Emoji using HTML, CSS and JavaScript 9:59:27 Styling the body and H2 tag in CSS 10:02:31 Styling elements using classes and CSS properties 10:08:38 Add a script tag at the end of the body tag for JavaScript files to manipulate loaded elements properly. 10:11:43 Adding event listener to button and paragraph 10:18:08 Accessing Emojis using an API key 10:21:16 Creating random emojis and their definitions 10:27:44 Creating a basic structure for a tip calculator using HTML and CSS 10:30:32 Creating HTML, CSS, and JS projects 10:36:34 Styling HTML elements using CSS 10:39:45 Adding JavaScript functionality to the project 10:45:44 Creating a loading bar project with HTML, CSS, and JavaScript. 10:48:43 Styling project using CSS 10:54:56 Adding JavaScript functionality to the project. 10:58:10 Creating a dynamic progress bar using JavaScript 11:04:19 Adding zoom and opacity effect to the background image using CSS and JavaScript. 11:07:35 Adding background image using CSS 11:14:25 Using CSS to style background image and JavaScript to change opacity and background size while scrolling. 11:17:39 Setting up the project and creating the HTML file 11:24:02 Styling and positioning elements using CSS 11:27:30 Centering elements using CSS and adjusting styling with font weight and color 11:33:32 Creating a dice roll simulator project with HTML, CSS, and JavaScript. 11:35:50 Setting up a dice simulator using HTML and CSS 11:40:30 Styling the elements using CSS 11:42:56 Adding transition and styling to button and list elements 11:47:38 Adding animation to an element using CSS and JavaScript 11:49:59 Adding roll animation and randomizing dice faces 11:55:02 Updating and saving history list of dice rolls 11:57:22 Creating a roll history list with JavaScript

Golden Video for Web development projects❤❤

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

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.

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

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

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!

You're indeed JavaScript King..

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

This is much better than learning theory and grinding it.

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

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

Love this tutorial. Easy to follow !

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

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

@JavascriptKing you are the best tutor ive had and your projects look incredible and your tutoring skills are top notch but i think you should build html and css projects to help the beginners!!!

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

Excellent as always

You are the best ❤

Thank you teacher I am understand very good well ❤🎉

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

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.

Nice Video Brother.

Thanks for sharing !

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

those projects amazing to practice and learn more

So amazing

Hi Jahand, hope you are well. I have managed to present the heart image on the index html file. However, I am not getting any animation of the heart when using the mouse on the image. I have followed the code exactly as you demonstrated, but the heart would not move. Could you advise and guide me, during thus exciting project 1? Look forward to hearing from you!

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

Awesome 🎉🎉🎉

Finally I got best RU-vid video on html css and js 😊❤

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

Great video, I just did the heart trail animation thing but a few seconds after the heart trail disappears, hearts show in the path my mouse took

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

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

thank you for your kindness we all appreciate keep up

The King is back. better is not possible

Thumbs up!

please also bring python and c++ projects

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

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

May u be bless u change my life

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

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

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

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

Awesome

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

Good job 🔥🔥

thanks sir

yoooo new drop lessgooo

Please make more logical project like that

Very useful video.

Thanks teacher good jobs

Sir I want day to day practice pdf how to give for practical project

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

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

It's really cool 😎

chegando por aqui!

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

Top class❤❤❤

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

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

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

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

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

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

👍👍👍👍👍

Nicely

thank you

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

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

Awesome work bro, keep it up❤

Tq sir

❤❤❤

I just saw it today

Please make small react project like this

Abraços (Brasil)

😊😊😊😊😊😊

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

Hi bro i like to learn Html,css,JS Suggest any video are youtube channel

داداش دمت گرم عالی بود من میخام جاب افر بگیرم میشه از ایران با فرانت

Sir i have some queries related to javascript. Could you please guide me

Sir you're great but found a little late sir😂

"Projects"

Can I post your project on my Instagram page ❤

سال نو‌مبارک

من خودم یوتیوبر هستم و می‌دانم ساختن یک ویدئوی 1 دقیقه‌ای چه مشقتی دارد. از شما بابت چنل معرکه‌تون تشکر می‌کنم و خواهش می‌کنم بیشتر ویدئو بگذارید.

..

Upload node js projects

Thank you soooooooooo much you are King

Sir if your you are Indian ,So please make video on beginning Javascript In Hindi

Great lectures thankyou ,Sir

please also bring python and c++ projects