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
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
- Level
- All levels
- Language
- English
- Updated
- 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 |
Recommended next
What courses are similar to 100 Angular Challenge?
Updated 2y agoAngular NgRx: Getting Started
By: PluralsightAt the core of state management in Angular is a thorough knowledge of the Redux pattern and the NgRx library. NgRx is a powerful library for organizing and mana4h 5m
FreeUpdatedCreate a Personal Portfolio using Angular 2 & Behance
By: CoursetroBuild a personal portfolio site with Angular 2 that pulls live projects from the Behance API, free across 21 lessons from Coursetro.2h 8m
Updated 2y agoDesktop apps with Angular, Firestore and Electron
By: UdemyThis course takes you on a developer journey where you'll be building a complete desktop application that runs on any platform (Windows, Mac.11h 28m
FreeUpdated 3y agoAccelerating Through Angular 2
By: Code SchoolAccelerating Through Angular 2 — build dynamic web applications with Angular and TypeScript. Components, services, routing, and reactive forms covered.1h 4m
UpdatedReactive 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 2y 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
FreeUpdatedNGRX Store + Effects
By: Ultimate Courses (Todd Motto)A free NgRx course covering Actions, Reducers, Effects, and Selectors in a real Angular application, built around the Redux pattern.7h 44m5/5
More courses by Udemy
Updated 3mo 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 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 agoNest.js Microservices: Build & Deploy a Scaleable Backend
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul5h 39m5/5
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.