19 Web Dev Projects – HTML, CSS, JavaScript Tutorial

The video is an excellent resource for web development learners. The instructor, Burak, demonstrates a clear and methodical teaching style, breaking down each project into manageable steps. The content is accurate and follows current best practices in HTML, CSS, and JavaScript. The projects are diverse, covering UI components, games, and API integrations, which helps learners apply their skills in various contexts. The explanations are thorough, and the instructor often shows the end result before diving into the code, which helps set expectations. The source code is provided on GitHub, and additional resources like diagrams and a gist are linked, enhancing the learning experience. The course is well-structured, with a logical progression from simple to more complex projects. The only minor criticism is that some projects are quite similar (e.g., multiple forms and UI components), but this repetition reinforces learning. The video also includes a promotional segment for the full Udemy course, but it is brief and does not detract from the content. Overall, this is a high-quality tutorial that delivers on its promise to improve web development skills.

The title accurately reflects the content: 19 web development projects using HTML, CSS, and JavaScript are covered.

9/10

The course is well-structured, with clear explanations and practical examples. The instructor demonstrates each project step-by-step, and the content is accurate and up-to-date. The source code is provided, and the course is from a reputable channel (freeCodeCamp).

• 00:00Course Introduction & Welcome
• 03:09Setting up the Workspace (VS Code & Extensions)
• 09:57Project 1: Interactive Quiz Game
• 1:08:24Project 2: Random Color Palette Generator
• 1:48:49Project 3: Kanban Board (HTML Drag & Drop API)
• 2:12:20Project 4: Expense Tracker with Local Storage
• 3:07:36Project 5: Bookmark Saver Application
• 3:30:36Project 6: Registration Form Validator
• 4:02:32Project 7: Password Generator with Strength Meter
• 5:00:39Project 8: Functional To-Do App with Filtering
• 5:59:17Project 9: Professional Contact Form (HTML/CSS)
• 6:24:35Project 10: Modern Modern Pricing Cards
• 7:05:14Project 11: Team Members Showcase Section
• 7:37:56Project 12: Recipe Finder (MealDB API Integration)
• 8:29:19Project 13: Real-Time Currency Converter
• 8:56:40Project 14: GitHub User Finder (GitHub API)
• 9:45:39Project 15: Custom 404 "Page Not Found" Design
• 9:52:11Project 16: Newsletter Signup UI
• 10:05:31Project 17: "Coming Soon" Page with Countdown Timer
• 11:01:21Project 18: Contact Page UI with Form Validations
• 11:50:09Project 19: Scroll Progress Indicator

• Source Code on GitHub — The source code for all 19 projects is available in this repository.
• Diagrams — Diagrams illustrating the project structures and concepts.
• GitHub Gist — A gist with additional code snippets or notes.
• Full Course on Udemy — The full version of the course with more projects is available on Udemy.
• Scrimba Frontend Courses — Interactive frontend courses recommended by freeCodeCamp.

• MDN Web Docs — Comprehensive documentation for web technologies, consistent with the content taught.