Gen AI and Agentic AI for Frontend Developers Certification

Objective:

• Use AI to implement designs accurately and maintain design system consistency at scale across a growing codebase.

Topics:

• AI-generated CSS from design descriptions, Figma specs, and visual references
• Design token implementation: using AI to build and maintain consistent design system variables
• CSS architecture: using AI to structure stylesheets for maintainability at scale
• Animation and transition design: using AI to implement smooth, purposeful, performant motion
• Cross-browser compatibility: using AI to identify and resolve browser-specific inconsistencies

Objective:

• Use AI to implement complex JavaScript logic, manage application state effectively, and debug client-side behaviour faster.

Topics:

• AI-generated JavaScript logic from functional requirements in plain language
• State management design: using AI to architect application state for complex interactive UIs
• Async patterns: using AI to implement promises, async/await, and graceful error handling
• Event handling: using AI to design robust event systems with proper listener lifecycle management
• Performance patterns: using AI to implement memoisation, debouncing, throttling, and lazy loading

Objective:

• Use AI to write comprehensive frontend tests — unit, integration, and end-to-end — and maintain test quality as the application evolves.

Topics:

• AI-generated unit tests for components and utility functions from code and requirements
• Integration test design: using AI to test component interactions and data flow between layers
• End-to-end test scenarios: using AI to write user journey tests from acceptance criteria
• Visual regression strategy: using AI to design and interpret visual testing approaches
• Test maintenance: using AI to update tests efficiently when component interfaces change

Objective:

• Use AI to diagnose and resolve frontend performance issues — improving load times, rendering performance, and Core Web Vitals scores.

Topics:

• Core Web Vitals analysis: using AI to interpret Lighthouse reports and prioritise improvements
• Bundle optimisation: using AI to identify and safely eliminate unnecessary code from the bundle
• Rendering performance: using AI to diagnose and resolve excessive re-render and paint issues
• Image and asset optimisation: using AI to recommend compression strategies and loading patterns
• Code splitting and lazy loading: using AI to design deferred loading architectures effectively

Objective:

• Use AI to build accessible interfaces by default — meeting WCAG standards and ensuring your application works for every user regardless of ability.

Topics:

• WCAG compliance: using AI to audit components against accessibility standards systematically
• ARIA implementation: using AI to generate correct semantic markup, roles, and attributes
• Keyboard navigation: using AI to design and implement complete keyboard accessibility patterns
• Screen reader optimisation: using AI to improve the experience for assistive technology users
• Colour contrast and visual accessibility: using AI to check and correct contrast ratios

Objective:

• Use AI to implement API integrations efficiently — handling data fetching, error states, loading states, and data transformation with clean, consistent patterns.

Topics:

• API integration patterns: using AI to design consistent, maintainable data fetching architectures
• Error state design: using AI to implement comprehensive, user-friendly error handling for API calls
• Loading and skeleton states: using AI to generate appropriate placeholder UI patterns
• Data transformation: using AI to write clean mapping functions between API and UI data shapes
• Caching strategies: using AI to design effective client-side caching for API responses

Objective:

• Use AI to maintain code quality and consistency across the frontend codebase — catching issues before they compound into significant technical debt.

Topics:

• AI-assisted code review: identifying anti-patterns, redundancy, and maintainability issues
• Naming and structure review: using AI to enforce consistent conventions across the codebase
• Refactoring guidance: using AI to identify and safely restructure complex or over-coupled components
• Dependency audit: using AI to identify unnecessary, outdated, or vulnerable dependencies
• Technical debt assessment: using AI to quantify and prioritise refactoring opportunities

Objective:

• Use AI to create and maintain the documentation that makes component libraries actually useful to the teams who depend on them.

Topics:

• AI-generated component documentation: props tables, usage examples, and edge case guidance
• Storybook story generation: using AI to create comprehensive, illustrative story variants
• Changelog and release notes: using AI to write clear, useful notes from commit history
• Migration guides: using AI to write step-by-step upgrade instructions for breaking changes
• README generation: using AI to create clear getting-started guides for component libraries

Objective:

• Use AI to identify and resolve compatibility issues across browsers and devices before they reach users in production.

Topics:

• Browser compatibility analysis: using AI to identify code with limited or inconsistent support
• Polyfill strategy: using AI to recommend appropriate polyfills and understand their cost
• Responsive testing: using AI to design systematic cross-device testing approaches
• Progressive enhancement: using AI to design experiences that degrade gracefully
• CSS compatibility: using AI to identify and resolve cross-browser styling inconsistencies

Objective:

• Use AI to make data-driven UX improvements — analysing user behaviour, identifying friction, and designing better experiences with evidence rather than assumptions.

Topics:

• User behaviour analysis: using AI to interpret heatmaps, session recordings, and funnel data
• A/B test design: using AI to design meaningful experiments and interpret results correctly
• UX writing improvement: using AI to refine microcopy, error messages, and onboarding flows
• Form optimisation: using AI to improve conversion-critical form design and flow
• Friction identification: using AI to find and prioritise UX improvements from real user data

Objective:

• Apply every skill from the course to a realistic end-to-end frontend development scenario.

Capstone Project 1:

Component implementation from a design specification with tests and documentation

Capstone Project 2:

Performance audit and optimisation plan derived from a real Lighthouse report

Capstone Project 3:

Accessibility audit and complete remediation for a defined component set

Capstone Project 4:

API integration with full error handling, loading states, and data transformation

Capstone Project 5:

UX improvement analysis and hypothesis generation from user behaviour data

Capstone Project 6:

Personal 90-day AI adoption roadmap for your frontend development practice