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
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
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:
Age Calculator
Tip Calculator
Recipe Book App
Dice Roll Simulator
Pomodoro Timer
Rock Paper Scissors Game
Stopwatch
Weather App
Image Search App
Basic Calculator
Dad Jokes Generator
Photo Gallery
English Dictionary
Anime Pics Generator
Note App
BMI Calculator
Random Quote Generator
Temperature Converter
Currency Converter
Loan Calculator
Random Emoji
Weight Converter
Feedback UI
Button Ripple Effect
Digital Clock
Rotating Image Gallery
Random Color Generator
Real-time Character Counter
Profile Statistics
Heart Trail Animation
Mini Calendar
Animated Search Bar
Social Media Selector Menu
Random Password Generator
Testimonial Slider
New Year Countdown
Emoji Rating
Sticky Navbar
Double Landing Page
Auto Text Effect Animation
Background Image Scroll Effect
Blurred Background Popup
Dark Mode Toggle
Drum Kits
To Do List
Random Photos
Multiplication App
Step Progress Bar
Mouse Event
Loading Bar
Image Slider
Video Trailer Popup
Clock
Month calendar
Counter
Q&A Section
Tabs
Background Video
Sidebar Menu
Navbar menu
Instructor Details
- 4.6 Rating
684 Reviews
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.
More courses by Dr. Sahand Ghavidel
Next.js Projects - 9 NextJS 15 projects (Instagram, Google.) (2026)
4.5 (853 Reviews)
Provider: Udemy
Time: 82.7h
$84.99
React.js & Firebase Project - ReactJS 18, Firebase 9 Project (2024)
4.5 (730 Reviews)
Provider: Udemy
Time: 17.1h
$64.99
50 HTML CSS JavaScript projects - HTML5, CSS3, vanilla JS (2023)
4.5 (394 Reviews)
Provider: Udemy
Time: 51h
$64.99
Full stack MERN Real Estate App: A Modern MERN Marketplace (2024)
4.7 (323 Reviews)
Provider: Udemy
Time: 11.3h
$10.99
Tailwind CSS projects: 2 TailwindCSS projects (Instagram,..) (2024)
4.5 (293 Reviews)
Provider: Udemy
Time: 4.3h
$49.99
Full stack MERN Blog Project: MERN Stack Blog with Dashboard (2024)
4.6 (174 Reviews)
Provider: Udemy
Time: 18.8h
$10.99
More JavaScript courses
The Modern Javascript Bootcamp Course (2026)
4.9 (13,238 Reviews)
Provider: Udemy
Time: 51.9h
$24.99
JavaScript: Understanding Advanced ES Next (ES6 and Beyond) (2025)
4.9 (1,076 Reviews)
Provider: Udemy
Time: 3.5h
$79.99
Reviews
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.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100











