Skip to content
UdemyJavaScriptPaid courseBeginner levelCertificate

60 HTML CSS JS projects - HTML5, CSS3 and vanilla JavaScript (Udemy.com)

HTML CSS JS (JavaScript). Build 60 projects to learn HTML CSS JavaScript. 50+ HTML5, CSS3, vanilla JavaScript projects

Created by: Dr. Sahand Ghavidel

Last updated May 2024

icon
What you will learn

  • Acquire the skills to develop exciting projects from scratch with pure HTML, CSS, and JavaScript - no external libraries or plugins needed!
  • Expand your knowledge of HTML, CSS, and JavaScript while mastering responsive web design principles.
  • mbark on a tutorial journey to learn the fundamentals of HTML, CSS, and JavaScript.
  • Each project kicks off with crafting the HTML section, then we progress to the CSS and JavaScript segments upon completion.
  • Immerse yourself in an engaging project-based course that teaches HTML, CSS, and JavaScript, while guiding you to craft sleek, trendy, and responsive websites.
  • Discover vital JavaScript methods in this fresh, new course.
  • Enhance your proficiency in HTML, CSS, and JavaScript through project-centered instruction.
  • Explore contemporary styling techniques like Flexbox, CSS animations, custom properties, and more.

How it compares

Against the other 239 rated Udemy courses in JavaScript on CourseDuck:

  • Rating4.6 out of 5higher than 70% of them
  • Reviews684#101 of 240 by number of reviews
  • Length52.9 hourslonger than 97% of them
  • Last updatedMay 2024more recently than 56% of them

icon
Course Description

60 NEW HTML CSS JS projects - 60 HTML5, CSS3 and vanilla JavaScript

Welcome to our all-inclusive course on mastering HTML, CSS, and JavaScript, where you will acquire the skills you need to construct modern and responsive web applications by creating entertaining and engaging projects.

Our course is designed to offer you a hands-on experience, guiding you on how to code web applications from scratch with the latest web technologies: HTML5, CSS3, and vanilla JavaScript. This approach ensures that you understand each concept thoroughly and allows you to practice your newly acquired skills without relying on copy-pasting.

You do not need any previous knowledge of HTML, CSS, or JavaScript since we will take you through every syntax and explain each step in detail. Our course is suitable for both beginners and experienced programmers. Whether you're new to coding or looking to refresh your skills, our course is perfect for you.

We believe that learning should be enjoyable and engaging, which is why we've created an array of modern, super-cool, and captivating projects that you will develop throughout the course. Each project is created independently from scratch, and you can choose which ones to work on based on your interests.

Our course features separate videos for each technology, enabling you to learn and focus on the areas that interest you the most. For instance, if you're primarily interested in JavaScript, you can skip the HTML and CSS sections and dive right into the JavaScript videos.

You can use this course for 50 days 50 projects or 100 days of code challenges.

I'm Sahand, a web developer with over 16 years of experience, and I'll be your guide throughout the course, answering any questions you may have and providing valuable feedback to help you become a proficient web developer.

Are you ready to immerse yourself in the exciting world of web development? Join us today and start building astonishing websites!

Here is the list of projects:

  1. Age Calculator

  2. Tip Calculator

  3. Recipe Book App

  4. Dice Roll Simulator

  5. Pomodoro Timer

  6. Rock Paper Scissors Game

  7. Stopwatch

  8. Weather App

  9. Image Search App

  10. Basic Calculator

  11. Dad Jokes Generator

  12. Photo Gallery

  13. English Dictionary

  14. Anime Pics Generator

  15. Note App

  16. BMI Calculator

  17. Random Quote Generator

  18. Temperature Converter

  19. Currency Converter

  20. Loan Calculator

  21. Random Emoji

  22. Weight Converter

  23. Feedback UI

  24. Button Ripple Effect

  25. Digital Clock

  26. Rotating Image Gallery

  27. Random Color Generator

  28. Real-time Character Counter

  29. Profile Statistics

  30. Heart Trail Animation

  31. Mini Calendar

  32. Animated Search Bar

  33. Social Media Selector Menu

  34. Random Password Generator

  35. Testimonial Slider

  36. New Year Countdown

  37. Emoji Rating

  38. Sticky Navbar

  39. Double Landing Page

  40. Auto Text Effect Animation

  41. Background Image Scroll Effect

  42. Blurred Background Popup

  43. Dark Mode Toggle

  44. Drum Kits

  45. To Do List

  46. Random Photos

  47. Multiplication App

  48. Step Progress Bar

  49. Mouse Event

  50. Loading Bar

  51. Image Slider

  52. Video Trailer Popup

  53. Clock

  54. Month calendar

  55. Counter

  56. Q&A Section

  57. Tabs

  58. Background Video

  59. Sidebar Menu

  60. Navbar menu

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Dr. Sahand Ghavidel

Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from Faculty of Engineering and IT, University of Technology Sydney.

Sahand has researched for more than 10 years about artificial algorithms and  optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended to many international conferences.

The number of people using and citing Sahand's publications is significantly high which is more than 1600 citations, according to google scholar (April, 2021). He was also awarded the outstanding reviewer in the international journal called "International Journal of Electrical Power & Energy Systems" with CiteScore of 5.79 in recognition of his contributions added to the quality of the journal.

Sahand has more than 15 years of programming experience. The first programming language he learned was visual basic when he was just 12 years old. Since then, he has made hundreds of websites, and apps with different programming languages like JavaScript and Python.

icon
More courses by Dr. Sahand Ghavidel

$84.99

$64.99

$64.99

$10.99

$49.99

$10.99

icon
More JavaScript courses

Free

Free

Free

$24.99

Free

$79.99

icon
Reviews

4.6

684 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Michael Megalakakis on 10/31/2025

The teacher explains the details of the code very well and understandable, even if English is not his native language. However, in order to put everything in place in the mind, the students should have foundational knowledge of the three languages (HTML / CSS / Javascript). YouTube has plenty of such crash course videos for each of the aforementioned technologies. Do not expect to learn front end web stack with zero prior knowledge. The teacher is definitely recommended!

By Ayan Raza on 3/4/2024

teaching style is both engaging and instructive. Each concept, from basic HTML tags to advanced JavaScript functions, is explained with clarity and accompanied by hands-on exercises that reinforce learning. What sets this course apart is its structured approach. The 60 lessons are thoughtfully organized, allowing for gradual skill development while maintaining momentum.

By Udit Raina on 12/15/2023

Unable to understand different syntaxes used in javascript. HTML and CSS are fine. Also, the course content is not arranged as per the complexity faced. JS is highly difficult to comprehend as sometimes functions are used independently and sometimes with arrows...unable to understand JS as a beginner.

By Wassha Bi on 11/24/2023

Kudos to Dr. Ghavidel!!! Thank you so much for creating this course and make it available for us! Although it took me for quite a while to finish this course simply because I took this course like coding challenges, I felt enormous joy and gratitude when I finished it. The pain, agony, and frustration I experienced while studying were all entirely worthwhile. One thing I noticed while I was randomly taking other really popular HTML, CSS & JS courses was that although I felt that I learned a lot, it didn't necessarily prepare me to be able to code myself. I could finish a certain course within the allotted time, but simply coding/following along with lectures didn't make me think. As a result, I ended up accumulating many experiences of 'finishing' courses, but I didn't have the necessary understanding or thinking process when I faced with a blank code editor. That's why I decided to code myself first no matter how awful my code will be. Most of the time, I couldn't create his projects before reviewing them. So, I needed to check his lectures to complete anyway. Lots of times, my codes were so off track that I had to rewrite them entirely from scratch but there were times that at least my HTML and CSS codes were mostly correct. The drawback for doing that is taking much longer than the allotted time for the lecture. But the great advantage that overpasses the drawback is to be able to recognize the cares he took in each and every project. Use of media query whenever it suits for example. Given the global smartphone adoption, it's like 'of course!', right? If media query is not included in your initial design plan, it's fundamentally flawed. With a tiny example like that, I could appreciate this course in a bit deeper level. With luck, I was occasionally able to create projects similarly by myself. When I reviewed his lecture with a sense of triumph, however, his code was much cleaner and more concise whereas my codes were bunch of if statements. That way, I was able to realize why he chose certain way of coding which, had I chosen to code along with his lecture, I would have easily overlooked since truly accomplished masters in any field rarely explain their efforts or skills in detail. Additionally, I would like to list some great features that I personally loved. ・The structure: HTML, CSS and JavaScript are neatly divided, which makes the lecture easy to follow and understand. ・The size of each project: Most projects take about an hour or less with the longest being still under two hours. Each project is not too overwhelming yet very useful component that you can use and apply in many situations. This was personally important to keep my motivation. ・The variety: There are some visually stunning projects as well as common but useful projects. He sometimes adds nice twists to even those common ones, though. ・A solely dedicated website to host the projects: Because of this website, I could easily access to each project and open it on browser to see how it looks and works before I started to code myself. ・His demeanor: He has very soothing voice :) Lastly, I would have liked better if the initial part of each lecture is separated and provided independently as a setting section since this part is redundant and I needed to skip this part in every single lecture. Plus, it would have been nicer if CSS reset (padding: 0; margin: 0; box-sizing: border-box;) was applied consistently or treated independently at the very beginning rather than used more or less at random even though it is a common knowledge. But they might be up to personal preference. Overall, this course is great especially when you are looking for exercises after you finished huge courses like the ones by Jonas or Maximilian. Besides, unlike other courses asking you to build a single complete website for practice, most projects here are focused on one or a few features/components, meaning that they are versatile and applicable to your preference. So, it's also well suited for people looking for ways to expand more features in their own projects. Highly highly recommended!

By Mohamed Omar on 9/28/2023

I'm mid-way through Sahand's web development course, and it's impressive! As a beginner, I find his explanations of HTML5, CSS3, and JavaScript very clear. The hands-on approach is a standout feature. Sahand encourages us to build projects from scratch, which enhances learning. This course suits all levels, and the project variety keeps it engaging. The segmented videos let me focus on what I need. Sahand's experience is evident, and he's responsive. In summary, this course is off to a great start. Thanks, Sahand, for this valuable journey!

By Nithin Shibu on 9/17/2023

I am incredibly grateful for the Udemy course featuring 60 HTML, CSS, and JavaScript projects. This course has been a game-changer for me in terms of gaining practical skills and a deeper understanding of web development. Sahand's clear explanations and hands-on projects made learning enjoyable and effective. I appreciate the effort put into crafting this course, as it has boosted my confidence in building web applications. This course is a valuable resource for anyone looking to enhance their web development skills, and I wholeheartedly recommend it. Thank you for making this exceptional course.

By Obasi Sunday on 5/8/2023

I'm really happy to be part of this amazing projects and thanks for allowing me partake in this projects and also advise anyone who is looking for a project to strength his or her skills in this aspect of programming language to take this project. It's really good for beginner and the way the instructor explains is understandable and clear.

By Karam Mudafar on 5/2/2023

This 60 HTML CSS JS projects course is an excellent resource for anyone looking to gain practical experience building web applications using HTML5, CSS3, and vanilla JavaScript. The course covers a wide range of topics, including responsive web design, animations, APIs, and more. The projects are diverse and engaging, providing a practical opportunity to apply newly learned skills. The instructor is knowledgeable, and the course is well-structured, making it easy to follow along with the demonstrated examples. Overall, I highly recommend this course to anyone looking to gain practical experience in web development. It's a great investment in your skills, and the projects you build will expand your portfolio and may be valuable in your career as a web developer.

By Pratik Singh Deo on 4/18/2023

Updating my review after completing this course. One of the best project based courses I have done. I am really greatful to Sahand, giving me these course for free. I was looking something like project based course or projects in Javascript to enhance my understanding. This is a great course if some one wants to learn JS Css or web development.

By Jarsh on 4/18/2023

I like the fact that he implored various approach to various project especially how to implement the use of APIs in various ways. These project videos are simplified and concise. I really love how Sahand doesn't rush while explaining and showing the steps and also stating the reasons for writing each syntax, and coding has never been much easier with these videos. Sahand and his videos have boosted my confidence in web development, especially JS extensively.

Showing all 10 reviews on CourseDuck

Read all 684 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 92 / 100