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 agoReactive Angular Course (with RxJs)
By: UdemyThis course is a catalog of commonly used design patterns (and some anti-patterns) that every Angular developer should know. The goal of the course is to teach5h 33m5/5 -
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 -
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 -
FreeUpdated 2y agoNGRX Store + Effects
By: Ultimate Courses (Todd Motto)You need predictable, maintainable and fast apps. You ll master Actions, Reducers, Data Structures with Entities, Memoized Selectors, the Redux pattern.7h 44m5/5 -
Updated 3y agoFull Stack: Angular and Spring Boot
By: UdemyLearn how to build a Full Stack application with Angular and Spring Boot. Angular and Spring Boot are two of the hottest technologies for developing Full.25h 49m -
Updated 2y agoDemystifying Reactivity with Angular Signals
By: Fullstack.ioWelcome to an insightful journey into building modern Angular applications with signals. This article aims to shed light on the relatively untapped potential of1h 44m -
Updated 2y agoAngular - The Complete Guide
By: Academind Pro (Maximilian Schwarzmüller)Angular is one of the most popular web development frameworks you can learn these days, especially in the enterprise landscape.26h 25m5/5
More courses by Udemy
-
Updated 1mo 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.