Frontend Development: Angular

Semantic HTML, Flexbox, CSS Grid, CSS custom properties, and mobile-first responsive layouts.

• The Odin Project: Foundations Pathcoursefree
• web.dev: Learn CSScoursefree
• CSS Tricks: Complete Guide to Gridarticlefree

• Semantic HTML5 structure
• Flexbox card layout
• CSS Grid page scaffold
• Mobile-first responsive landing page

Types, interfaces, generics, decorators, enums, utility types, strict mode. Angular is TypeScript-first - mastering it is non-negotiable.

• TypeScript Official Handbookdocfree
• Matt Pocock: Total TypeScript (free modules)coursefree
• Execute Program: TypeScript Coursecoursepaid

• Strict-mode project with no implicit any
• Generics: typed API response wrapper
• Decorators: understand how Angular uses them
• Utility types: Partial, Pick, Omit, ReturnType

Event loop, Promises, async/await, RxJS Observables introduction (the foundation for Angular's reactive model), and DOM APIs.

• javascript.info: Promises, async/awaitdocfree
• RxJS: Introduction (official)docfree
• Fireship: RxJS Top-Ten Operators in 10 minutes (YouTube)videofree

• Promise chaining vs async/await
• RxJS: Observable, Subject, BehaviorSubject
• map, filter, switchMap, mergeMap operators

Components, templates, data binding (property, event, two-way), directives (NgIf, NgFor, NgClass), pipes, and the module system.

• Angular Official Tutorial: Tour of Heroescoursefree
• Angular Official Docsdocfree
• Udemy: Angular - The Complete Guide (Maximilian Schwarzmuller)coursepaid

• Component lifecycle hooks
• Input/Output decorators between parent-child
• Custom pipe implementation
• Reactive and template-driven forms

Angular 17+ Signals: signal(), computed(), effect(), and the new reactivity model. Comparison with Zone.js-based change detection.

• Angular Docs: Signalsdocfree
• Angular Blog: Angular 17 Signalsarticlefree
• Kevin Kreuzer: Mastering Angular Signals (YouTube)videofree

• Convert a component from BehaviorSubject to signal()
• computed() for derived state
• effect() for side effects on signal changes

Standalone routing, route guards (CanActivate, CanDeactivate), resolvers, lazy-loaded feature modules, and nested routes.

• Angular Docs: Routingdocfree
• Angular University: Router (YouTube)videofree

• Lazy-loaded feature route
• Auth guard with canActivate
• Resolver: pre-fetch data before route activates
• Breadcrumbs from route data

Store, Actions, Reducers, Selectors, Effects, and Entity adapter. The Redux pattern for enterprise Angular apps.

• NgRx Official Docsdocfree
• NgRx: Getting Started Guidedocfree
• Pluralsight: NgRx Fundamentals (paid)coursepaid

• Store: feature state slice
• Effects: API call triggered by action
• Selector: memoised derived state
• Entity adapter: normalized CRUD

TestBed, component testing with Angular Testing Library, service testing with HttpClientTestingModule, and E2E with Playwright or Cypress.

• Angular Testing Guide (official)docfree
• Angular Testing Library Docsdocfree
• Playwright Docsdocfree

• Unit test a service with HttpClientTestingModule
• Component test with Angular Testing Library
• Playwright E2E: login + create resource flow

Angular Universal (SSR), hydration, OnPush change detection, virtual scrolling, lazy loading images, and Core Web Vitals optimisation.

• Angular Docs: Server-side Renderingdocfree
• web.dev: Core Web Vitalsarticlefree

• SSR app with Angular Universal
• OnPush + trackBy for large lists
• Lighthouse 90+ on all Core Web Vitals

Build a production-quality Angular app: auth, REST API integration, NgRx state, reactive forms, responsive UI, unit + E2E tests, and CI/CD deployment.

• RealWorld: Angular reference implementationrepofree
• Angular Architects Blogarticlefree

• Auth with JWT + route guards
• NgRx store covering main features
• >70% test coverage
• Deployed to Vercel / Firebase Hosting