Build 100 Components, Services, Directives, Pipes in Angular and Much More! We will master all Angular has to offer by building 100 re-usable and practical Components, Directives, Services, Pipes and much more to be used in your personal or professional projects.
100 Angular Challenge
12h 23m 17s
English
Free
Released
Added to CourseFlix
100 Angular Challenge is a 89-lesson 12 hours 23 minutes self-paced course by Udemy. Build 100 Components, Services, Directives, Pipes in Angular and Much More!
Course facts
- Lessons
- 89
- Duration
- 12 hours 23 minutes
- Language
- English
- Released
- August 2020
- Added to CourseFlix
- March 2024
- Instructor
- Udemy
- Price
- Free
Not only will we build 100 items, but we will also go over Jasmine and Unit Testing so we can write the most solid code possible and certify it does what it is supposed to.
As we dive deeper into our Angular application we will hit on its various other technologies in detail including:
TypeScript
JavaScript
HTML / CSS
Jasmine and Unit Testing
SASS
and more
By the end of this course you my goal for you is to 'Get Good. Get Great. Then Get Better' with Angular. Lets go!
Who teaches 100 Angular Challenge? Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
What lessons are included in 100 Angular Challenge?
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
0:00 0:00
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Introduction: What are we building and who is this dude? | 06:49 |
| 2 | Tools We Use | 00:33 |
| 3 | Github Repo / Source Code | 00:33 |
| 4 | Updating Introduction | 00:53 |
| 5 | Creating a New Project with Angular CLI | 02:10 |
| 6 | Updating Versions | 03:26 |
| 7 | Understanding Our Configuration | 04:20 |
| 8 | Understanding our src setup | 04:59 |
| 9 | Generating Components with CLI | 02:04 |
| 10 | Configuring ng generate component to use scss | 02:38 |
| 11 | Converting Application to SCSS | 01:03 |
| 12 | How to Succeed with this Course | 01:25 |
| 13 | 1. Basic Toolbar | 10:18 |
| 14 | 2. Card | 10:22 |
| 15 | 3. Accordion | 11:41 |
| 16 | 4. Progress Bar | 08:27 |
| 17 | 5. Star Ratings | 10:04 |
| 18 | 6. Top of Page | 09:54 |
| 19 | 7A. Basic Routing Setup | 06:26 |
| 20 | 7B. Basic Routing Setup | 04:06 |
| 21 | 8. Lazy Loading Routes | 06:50 |
| 22 | 9. Truncate Pipe | 03:11 |
| 23 | 12. Loader Circular Component | 08:46 |
| 24 | 10. Credit Card Formater Pipe | 09:48 |
| 25 | 11. Credit Card Input Component | 14:15 |
| 26 | 13. Loader Loading Component | 13:54 |
| 27 | 14. Twitter Post Component | 11:31 |
| 28 | 15. LinkedIn Post Component | 05:02 |
| 29 | 16. Flatten Pipe | 05:52 |
| 30 | 17. Modal Component | 10:50 |
| 31 | 18. Debounce Click Directive | 07:57 |
| 32 | 19. Quote Component | 07:35 |
| 33 | 20. Toggle Component | 06:48 |
| 34 | 21. Filter Term Pipe | 03:32 |
| 35 | 22. Rich Text Viewer Component | 06:37 |
| 36 | 23. Debounce Search Component | 09:34 |
| 37 | 24. Search List Component | 12:33 |
| 38 | 25. Counter Component | 12:14 |
| 39 | 26. Simple Table | 09:57 |
| 40 | 27. Paging Component | 20:27 |
| 41 | 28. Tabs Component | 11:21 |
| 42 | 30. Ripple Directive | 10:04 |
| 43 | 31. Fade In Out Animation | 08:20 |
| 44 | 33. Sort Table Component | 21:34 |
| 45 | 34. Reactive Forms Email Component | 27:57 |
| 46 | 35. Form Dirty Guard | 08:07 |
| 47 | 36. User Service | 12:15 |
| 48 | 39. Ribbon Component | 12:48 |
| 49 | 40. Button Toggle Component | 12:49 |
| 50 | 41. Banner Cut Out Component | 08:53 |
| 51 | 42. Scale Directive | 03:51 |
| 52 | 43. Snackbar Component | 14:46 |
| 53 | 44. Simple Popup Component | 10:17 |
| 54 | 45. Countdown Timer Component | 19:02 |
| 55 | 46. Snackbar Service | 07:42 |
| 56 | 47. Copy Directive | 07:45 |
| 57 | 48. Lazy Load Image Directive | 15:48 |
| 58 | 50. Footer Component | 12:31 |
| 59 | 51. Slide Right Animation | 03:33 |
| 60 | 52. Skeleton Loader Component | 09:04 |
| 61 | 53. Social Media Bar Component | 14:19 |
| 62 | 54. Bottom Sheet Component | 08:42 |
| 63 | 55. Fieldset Toggle Component | 05:21 |
| 64 | 56. Pill Component | 08:01 |
| 65 | 57. Pill Filter List Component | 15:17 |
| 66 | 58. Not Found Component | 10:33 |
| 67 | 59. Password Component | 17:33 |
| 68 | 63. Title Service | 12:09 |
| 69 | 70. Rich Text Pipe | 04:43 |
| 70 | 72. Sort By Pipe | 05:50 |
| 71 | 73. Sort By Key Pipe | 05:29 |
| 72 | 75. Overlay Component | 03:51 |
| 73 | 76. Local Storage Service | 10:41 |
| 74 | 77. Route Params | 07:32 |
| 75 | 78. Common Scripts | 07:29 |
| 76 | 79. Active Route UI | 04:27 |
| 77 | 80. Auto Focus Input Directive | 03:47 |
| 78 | Testing Introduction | 01:19 |
| 79 | 92. Component Testing | 10:33 |
| 80 | 93. Guard Testing | 09:01 |
| 81 | 94. Pipe Testing | 04:55 |
| 82 | 95. Directive Testing | 13:09 |
| 83 | 96. Mock 3rd Party (Http) | 04:47 |
| 84 | 97. Service Testing | 10:38 |
| 85 | 98. Mock First Party Services | 05:05 |
| 86 | 99. Abstracting Services for Testing | 05:06 |
| 87 | 100. Testing Practice x 75 | 01:28 |
| 88 | Good job! | 02:32 |
| 89 | Bonus Lecture | 01:09 |
Enjoying this free course? One payment unlocks 2,000+ premium courses, from $6.67/mo. No auto-renew.
See plansRecommended next
What courses are similar to 100 Angular Challenge?
Updated 1mo agoConscious Angular Testing
By: Dmytro MezhenskyiLearn to write and debug Angular 16 tests with real understanding, covering standalone components through video lessons and practical homework.10h 37m
Updated 1y agoWeb Security Dev Academy - 12-week online program
By: Bartosz PietruchaMaster the full scope of web security and learn to develop secure full-stack applications with reliable authorization, protection against vulnerabilities.16h 37m5/5
Updated 1mo agoReactive Angular Course (with RxJs)
By: UdemyLearn reactive Angular patterns using plain RxJs, refactoring an imperative app step by step into lightweight state management with no extra library.5h 33m5/5
Updated 3y agoNativeScript + Angular: Build Native iOS, Android & Web Apps
By: UdemyWith Angular (2+), you can already build highly reactive and engaging web apps. Wouldn't it be amazing to use that same tech stack and knowledge to build.20h 11m
Updated 3y agoBuild Fullstack Trello clone: WebSocket, Socket IO
By: UdemyIn this course we will build a Trello clone API using Angular, Typescript, NodeJS, Express, MongoDB and Socket IO .8h 49m
Updated 3y agoBuild an app with ASPNET Core and Angular from scratch
By: UdemyHave you learnt the basics of ASP.NET Core and Angular? Not sure where to go next? This course should be able to help with that. In this course we start from no29h 51m
Updated 3y agoBuilding Your First App with Spring Boot and Angular
By: PluralsightSpring Boot and Angular have forever changed how web applications are built. Understanding how they work is essential for any full-stack developer. In this cour2h 22m5/5
More courses by Udemy
Updated 5mo agoReact - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.47h 42m5/5
Updated 3y agoNode.js, Express, MongoDB & More The Complete Bootcamp 2023
Learn how to build back-end apps with Node.js, Express, and MongoDB. This course shows you how to design APIs, model data, and deploy real projects.42h 14m3/5
Updated 3y agoComplete C# Unity Game Developer 3D
This is the long-awaited sequel to the Complete Unity Developer - one of the most popular e-learning courses on the internet!30h 34m
Updated 3y agoThe HTML & CSS Bootcamp 2023 Edition
Brand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!37h 18m5/5
Updated 3y agoMicroservices with Node JS and React
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!54h 13m5/5
FreeClassic100 Days of Code - The Complete Python Pro Bootcamp for 2023
Watch the 100 Days of Code Python Pro Bootcamp free: 100 daily projects covering Python basics, web scraping, data science, automation and GUI apps.58h 35m5/5
Frequently asked questions
What are the prerequisites for enrolling in this course?
This course requires a basic understanding of JavaScript, HTML, and CSS. Familiarity with Angular CLI and version control systems like Git will be beneficial but not mandatory. The initial lessons, such as 'Creating a New Project with Angular CLI' and 'Understanding Our Configuration', are designed to help you set up your development environment and understand the project's structure.
What types of projects will I build during the course?
You will build 100 reusable components, services, directives, and pipes. Projects include a 'Basic Toolbar', 'Card', 'Accordion', 'Progress Bar', 'Star Ratings', and a 'Credit Card Formatter Pipe'. These projects are practical and can be utilized in personal or professional Angular applications. Each lesson focuses on a specific aspect of Angular development, ensuring you gain hands-on experience in various functionalities.
Who is the target audience for this course?
The course is ideal for front-end developers who want to deepen their understanding of Angular. It is also suitable for those who have a basic knowledge of Angular and wish to expand their skills by building practical components and services. Developers looking to improve their Angular-based project efficiency will find this course particularly useful.
How does the depth of this course compare to other Angular courses?
This course emphasizes practical, hands-on experience by having you build 100 distinct Angular components, services, directives, and pipes. Unlike some courses that focus primarily on theory, this course prioritizes real-world application, ensuring you learn by doing. The lessons cover a wide range of Angular features, aiming to provide a comprehensive understanding through extensive practice.
What specific tools and platforms are used in this course?
The course utilizes Angular CLI for project creation and management, and SCSS for styling, as seen in lessons like 'Converting Application to SCSS'. The source code is managed using Git, with a dedicated lesson on using a GitHub repository. These tools are integral to modern Angular development and are covered in the early lessons to set up a strong foundation.
What topics are not covered in this course?
The course does not cover backend development or server-side rendering with Angular Universal. The focus is strictly on front-end development using Angular, including building UI components and services. If you're looking for integrated full-stack development, you may need to supplement this course with additional resources.
What is the expected time commitment to complete the course?
The course consists of 89 lessons, each designed to build a specific component, service, directive, or pipe. Although the total runtime is not specified, students should expect to spend a few hours per lesson, including time for coding practice and revisions. Setting aside consistent time each week will help in steadily progressing through the course content.