HTML CSS JavaScript projects
HTML-код
- Опубликовано: 10 сен 2024
- Beginner-friendly projects in HTML, CSS, and JavaScript. You are going to learn 11 beginner projects in HTML, CSS, and JavaScript that are fun to work on throughout the course of watching this video.
Your ability to build modern websites with HTML, CSS, and JS, including HTML5, CSS3, and JavaScript 2022, will benefit from your development of your HTML skills.
You can obtain the source code by going to the following website: github.com/sah....
My name is Sahand, and I specialize in the development of websites within the field of computer science. The more than 15 years that I've been involved with this organization are just the beginning.
This course was put together by me so that I could impart some of my knowledge and experience to you.
This video will walk you through the fundamentals of HTML, CSS, and JavaScript while also instructing you on how to use these languages to create websites that are basic but fully functional.
we start writing the HTML code for each project from scratch in our development environment. This process is shown from beginning to end. We are going to move on to the CSS and JavaScript portions of the project as soon as the HTML component of the project has been finished.
It is not at all frowned upon to begin the process of coding with HTML, CSS, or JavaScript from the very beginning. The syntax of HTML, CSS, and JavaScript is presented in this video through the use of illustrative examples. The vast majority of projects are started from scratch and carried through to completion without making use of any code that was previously copied.
After that, they are demonstrated on the project to guarantee that all of the participants have a complete understanding of what it is that they are being asked to do.
Let's get this party started if you are as excited about learning HTML, CSS, and JavaScript as I am about learning them. If that's the case, let's get to it. Please do not be hesitant to get in touch with me in the event that you have any inquiries.
timestamp:
00:00 - Introduction
1:50 - Project 1 Clock
54:28 - Project 2 Month calendar
1:55:45 - Project 3 Mouse event
2:25:21 - Project 4 Loading bar
2:51:57 - Project 5 Testimonial slider
3:29:56 - Project 6 Mini calendar
4:02:33 - Project 7 Navbar menu
4:36:07 - Project 8 Sidebar menu
5:08:48 - Project 9 Background video
5:38:52 - Project 10 Q & A section
6:10:38 - Project 11 Counter
Check the projects live demo and source codes here:
www.100jsprojects.com
Combining HTML CSS JavaScript in a single project and every time teaching new tools and techniques with explanation has made the learning super easy. This course is amazing and hope to keep on going with a lot more in the forthcoming days.
I have just completed project-1,can say its super cool, better explanation, awesome content. I am too happy that I found this playlist. Thanks a lot for such amazing projects.
It is 8 o'clock now! What coincidence !
Perfect bit-size projects for starters. It allows you to see CSS HTML and js all in action. It shows you how they work together and how all of them are linked to each other. Thank you very much
Couldn't agree more!
Just another amazing tutorial from you! I just can't stop! Learning JS is now so much fun. In every project I notice some small details that will be useful in other bigger projects. It's always these tiny things that i can't solve and don't even know how to ask how to solve them. For instance when you used the box sizing border box when coding the calendar so that, when we hover one element and it becomes bigger, other elements don't move.
Project-based learning ❤❤
➡ Project Clock 🕙 ⬅
Start HTML : 7:27
Start CSS: 11:25
Start JS: 39:50
Finish Clock : 54:25
=================
➡ Project: Calendar ⬅
Start HTML : 57:11
Start CSS: 1:08:03
Start JS: 1:29:09
Finish Calendar: 1:55:40
=================
➡ Project: Mouse Event ⬅
Start HTML: 1:57:25
Start CSS: 2:04:44
Start JS: 2:17:31
➡ Project Loading Bar ⬅
Start HTML = 2:26:24
thanks mate
I have added it to my playlist, I was waiting for it for so long... Thanks Guru ❤️
I too, first need to complete the first one of 16 project 🖖
@@maurov6861 🤝
Good to hear that, wish you luck for your journey
It was amazing to find your channel.
I've become a new follower.
Thank you and keep up this great work.
thanks mate
i was lost until i find your channel i'm not now ty bro
glad to hear that, let me know if you have any questions about the projects
@@CodeWithSahand no I don't have questions but thank you for your videos they are amazing keep up bro 😎💪
I don't know why less views for such great content, but your video is really amazing.
thanks mate, appreciate it
😬💯yeahhh
Your videos are the best for newbie like me.
thanks mate, appreciate it
Fantastic, I've only done the clock project so far but so easy to follow and to understand. Thank you very much for this, the combination of all 3 HTML/CSS/JS together shows us how 'technically' easy it is to build things even though non-technically you have to think about things more. It is also brilliant to be able to add proper styling while understanding why to the end result.
Glad it was helpful!
This is the 3rd series I'm watching. Many times it happens that I follow a tutorial and realize that in fact I did not retain anything from it. But here it is different. I notice that at each part I already have an idea how I could do it and many times I am right. it's very good to see that your brain is starting to work 😅😂. Thank you very much for all the effort and dedication for these series. You are doing a great job.😎
PS: Bless you (whoever sneezed)
I get happy when I hear " will be explained in detail"! 👏
There is different between knowing something and knowing how to teach it, excited to find your channel.
Will be glad if you can do a tutorial on JavaScript mainly for beginners to advance
Awesome, thank you. I will for sure
You make me love JavaScript… I’m so excited! God bless you! Keep up the good work
next level man wow learn with projcts is the best way to learn
thanks mate, appreciate it
Ummm....so this is pretty damn good training. Slow, methodical, deliberate and useful. Instant subscribe. I'll put he guys at work onto this that are all wanting to start programming.
Thank you soo much 👍🏻👍🏻👍🏻
I learn a lot of things in very easy & simple way.
You explain everything in superb & crystal clear way.
Looking forward to learn more new things from u, Sir...
🔥🔥🔥
thanks mate, appreciate it
I added this to my playlist because i believe that if you learn with project then it will be very interesting and it will be easier
Sir, you are a very good man. Thanks
So nice of you
I really like how you take your time so it's easier for me to follow. Really glad I came across this video.
Thank You!
It will be great if you could analyze a bit more what each function does, for example why you use relative and absolute position and so on. You could break this video into two videos in order to have more time to share some more knowledge regarding the steps are taken. Overall is great, thank y
Noted
Appreciated your hard work.
Please make Javascript Play list from Basic to Advance as much as possible. It's our humble request to you Sir from India ❤️
thanks mate, appreciate it
sure, I have a plan to create a full web development course this year
@@CodeWithSahand thanks for the info and quick response highly appreciated.
Please create Basic to Advance JavaScript Tutorial as much as possible Sir. We all will eager to learn from you. Love you from India ❤️
Dr SAHAND , I want to thank you a lot for this big work you are doing to help us masterize progamming language such as HTML , CSS and Javascript. Thanks a lot for that...I follow you from France
So nice of you
دمت گرم سردرگم بودم این ویدئو خیلی داره کمکم می کنه
نوکرم
that clock to start i learned so much and i have 2 certs lol
glad to hear that.
I found this video in recommendation list❤️
Wow Very Nice video and explain ❤️
I am glad that you enjoyed the video
Thank you so much. This is what more beginners need . Practical examples where we can exercise our skills. && the best part it was challenging and fun
Glad you enjoyed it!
always a pleasure to watch your tutorials thank you so much for teaching us how to do these great projects.
I am very happy to see you enjoyed the course
@@CodeWithSahand yeah I enjoy it a lot thank you very much sir
Thank you mister Sahad, you projects help me learn alot about web design.
I just complete all the projects, it was awesome.
Dr. Sahand, I want to thank you for your amazing work. You make JavaScript approachable and fun 😊 for me. You are amazing awesome 😎.
So nice of you
first project very very good great didactic congratulations.
I'm learning easy
Thank you! Cheers!
Thanks man! That was what i need in order to understand how JavaScript works with HTML and CSS. Keep up good work bro!
Glad you liked it!
Clear understanding clock project
I going to download this video
Thank you....
You're just exceptional with your work. Bravo merci beaucoup.
thanks mate for your comment
Waiting for responsive web design project .. Love u from India 🙏🏾🙏🏾🙏🏾❤️❤️
thanks mate, appreciate it, love you too
thanku bhaiya...for these amazing projects from scratch...
So nice of you
Very useful video for people that have recently started programming.
Glad to hear that!
Hi, thank you.. I love you 🥰🥰🖥️🐷🤖👽🙊
Thank you too
I love this content, you is one of the best teachers in the world. thanks so much for everthing.
Wow, thanks!
I was waiting for this for such a long time.thank you so much.❤️❤️❤️
no problem, enjoy
Merci beaucoup très bien expliqué et lentement on comprends tout ce que tu dis facilement.💯
Pretty cool projects! Hope you will do some mid level tutorials :)
This is great! Keep up the good work. I am understanding concepts that have seemed abstract before.
thanks
Now I am going to watch every single Video You have made and share it too sir✌️
thanks mate, appreciate it ❤️❤️
Completed the first ⏰ project... Now heading forward....
I am a beginner. I want to be a coder. If you make a tutorial about web development, it will help me a lot.
Love from Bangladesh❤️❤️
i am so excited to find your channel
your videos make us better ❤
Thanks man you're doing well
i appreciate your concern❤❤
I finished video
More videos we want JavaScript projects brother....
sure mate
Thanks man teaching in simple way and easy to understand. ❤
best beginner projects
Please more content. Your teaching style is amazing
Thank you, I will
New subscriber currently learning JavaScript
Completely amazing. Thank you for this tutorials
My brother man u like the way u explain things, I wish u can teach about git and J's I really enjoyed the video
sure mate, thanks for your comment
I learn better by repetition. I think tutorials from JavaScript King (Sahand) are better if I approach them with this technique
You are an angel 😇
thanks mate
many many many Thank Sir, you are best teacher,. Sir Plasse create fullstake Economy website
Ok. Thanks
I want more projects of js❤❤❤
Amazing. you just got my sub. Thank you sir
Nice and quality of knowledgeable video
Glad you liked it
Thank you so much sir
no problem mate
Great Content👍👍👍
Thank you 🙌
I finished the clock one as well, but I don't understand why the hands aren't moving for me even after completing the javascript piece.
I love it
Very interesting. I learned a lot from you sir. 😁
Outstanding tutorial,Thanks mate
thanks mate, appreciate it
you are my hero
Amazing 😍
Thanks 🤗
thank you, outstanding.
Glad you liked it!
tysm i really needed this vid but next time can you explain the css part more
you earned a subscriber tho
Living legend.
Thanks a lot sir!😄
Please create JavaScript Tutorial Basic to Advance sir. 👍🏻
thanks
Thank you sir it's useful and easy to understand 🙏
Hi .
Instead of the Rolex logo , I added my own picture with a colored lion .
The thing is when I do . .arrows: :before{...} , the dot won't come on top .
I have tried to put position absolute and z-index 3{one bigger than the img ) but still won't come .
If i add something to content I can see it but without any color or style that I added in .arrows: :before{...}
Can you help ?
This is my line :
.arrows {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: absolute;
z-index: 1;
}
.arrows::before {
content: "";
width: 25px;
height: 25px;
border-radius: 50%;
background-color: rgba(213, 235, 16, 0.815) 0;
I think you missed the curly braces
Wow thanks more
Welcome 😊
Thanks a lot for such great content
Pls, sir solve the problem. The file is not displayed in the editor because it is either in binary or uses unsupported text encoding.
This means mp4 video is not running on visual studio code. some solutions, please.
Thanks sir for uploading this video.
thanks for your comment
awesome videos\
1:12:10 bless you 😃 Great tutorial, thanks a lot!
thanks mate
Please make the video of react js course
Sir aik proper website bnani hai jis mein Html CSS or JavaScript use hui ho maximum 4 pages ki ho website plz help kr dyn bta dyn k kesy bnaun
I cant position the numbers without messing up the position of the logo. They are totally binded together. I am following your instructions perfectly but it doesnt work for me. Any solution?
check the GitHub repository linked in the description
Awesome!!! TQVM!!
Thank you so much sir Sahand , literally I was waiting this type of video, and suddenly according to my interests and RUclips's suggestion algorithm provide me this... I have learnt much concepts from this..
Sahand , I request you to add another video on "Making simple fully responsive websites using HTML CSS and JavaScript" as soon as possible but quality content, from scratch as u provide these projects from scratch.. thanks again MR...love from Pakistan ❤️🥰
thanks mate, appreciate your comment 🙏🙏❤️
@@CodeWithSahand so when we get websites projects tutorials 🥰
soon mate, thanks for your comment
@@CodeWithSahand stay blessed dude..❤️🌼
Sir could you make video how to create a navigation bar with search bar for a website.
check the GitHub repository linked in the description
Is it a preference to use descending variable in loop? 1:49:10~
❤❤❤
Amazing ❤️
Hi , I have been asked "Research two JavaScript API for touch gestures, explain each and provide a description how you will implement." in a training course I am attending , is this question making sense , what may be the response for this?
Esses kao, thank you.
Welcome!
I have a doubt doing project by watching tutorials is good or not because we are just understanding the code not create
i have downloaded almost 6 js project video
1:12:10 bless you