# Modern Frontend Engineering

> Beyond the framework: revisiting the core concepts, engineering practices, and technical choices of the Web in an era of AI-accelerated development.

- Course page: https://progrmatic.com/en/courses/modern-frontend
- Price: Free
- Status: Coming soon, not on sale yet
- Language: English
- Offered by: Progrmatic

## About this course

## 💡 AI can already write frontend code — so what is left to learn?

As AI coding tools mature, we can now generate large amounts of code from natural language — from page layouts and interactive components to complete web applications.

But **being able to generate a website that looks right does not mean truly understanding how it works.**

As AI takes on more and more of the implementation work, we may no longer need to spend so much time memorizing every framework's API. Yet we still need to understand: How does the frontend exchange data with the backend? Where should state live? How is data kept in sync? What are the implications of different rendering strategies? How do we balance performance, security, and user experience?

And as modern web development integrates more server-side capabilities, the frontend and backend work together ever more closely. From data loading and authentication to background push notifications, many seemingly simple features actually involve coordination among the browser, the server, and external services such as push services and identity providers.

What's more, **building a feature does not mean the engineering work is done.**

From automated testing, CI/CD, and cloud deployment to analyzing user behavior, tracking errors, and monitoring performance in production, we also need to know how to verify, deliver, and continuously improve a web application that is actually running.

Through a range of practical examples, this course explores the core concepts and practices of modern frontend engineering that are worth understanding. We do not limit ourselves to any particular framework, nor do we try to memorize how to use as many tools as possible. Instead, through problems and hands-on work, we aim to understand the principles, limitations, and design trade-offs behind each technology.

**AI can help us implement faster; what we need to learn is how to understand the problem, evaluate solutions, and make sure the final result truly meets the requirements.**

## 🎯 What you will learn

- **API integration and real-time communication:** From HTTP fundamentals and REST API design conventions to GraphQL queries, understand the characteristics and use cases of different API styles, and explore real-time data updates with WebSocket and Server-Sent Events (SSE).
- **State management and data flow:** Understand the responsibilities and lifecycles of different kinds of state, and explore the design considerations behind data loading, caching, synchronization, asynchronous operations, and error handling.
- **Routing, rendering, and frontend–backend collaboration:** From URL state, CSR, and SSR to prerendering, understand when each rendering strategy fits and where the execution boundary lies between the browser and the server.
- **Internationalization and content discoverability:** Explore multilingual design, SEO, metadata, structured data, and sitemaps, and understand how to make content easier for different users and search engines to find and understand.
- **Browser APIs and PWAs in practice:** Through examples such as Service Workers, Web Notifications, the Push API, offline caching, and Web Components, explore the capabilities browsers provide and how to apply them in real web development.
- **Frontend security fundamentals:** Understand the browser security model and common security topics such as XSS, CSRF, CORS, CSP, cookies, and handling sensitive information.
- **Testing and user experience:** Combine component testing, end-to-end (E2E) testing, accessibility, Core Web Vitals, and Lighthouse to explore how to verify application behavior and evaluate site performance and user experience.
- **CI/CD and cloud deployment:** Build automated verification and deployment pipelines with GitHub Actions, integrate quality checks such as Lighthouse CI, and use Cloudflare to explore practical topics such as DNS, CDN, environment configuration, caching strategies, and site security.
- **Analytics and frontend observability:** Use tools such as Umami, Google Analytics, and Sentry to explore web analytics, event tracking, and error monitoring, and understand how to observe application behavior and issues in production.

## 👥 Who this course is for

- **Computer science and IT students:** You have basic web development skills and want to understand the core concepts beyond frameworks, along with the engineering practices of a complete web application.
- **Frontend developers:** You are comfortable with the basics of a framework and want to broaden your engineering knowledge in state management, browser APIs, security, testing, deployment, and observability.
- **Full-stack and software developers:** You want a deeper understanding of how the browser and the server work together, and of the full journey of a modern web application from development to production.
- **AI-assisted developers:** You have started using AI to build web pages or applications and want to do more than ship features quickly — you want to understand, verify, and improve the code and the system's actual behavior.

## 📌 Before you start

You should have a foundation in HTML, CSS, and JavaScript, and have built a simple application with at least one frontend framework (such as React, Vue, or Svelte). Familiarity with TypeScript, Git, and the terminal will make the hands-on content easier to follow.

The hands-on examples use SvelteKit as the main demonstration framework, but the focus is on concepts and practices beyond the framework, so you are welcome to follow along in a framework you know and compare the approaches.

Some exercises require accounts with third-party services such as GitHub, Cloudflare, and Sentry. The course relies mainly on each service's free plan, but plan details and usage limits may change with each service's policies, so please keep an eye on your actual usage.

Support for some browser APIs varies across browsers, operating systems, and devices; the course will also cover the relevant compatibility considerations.

This course does not teach HTML, CSS, or the basic syntax of any particular framework from scratch.

**Frameworks and tools will keep evolving, and AI will keep getting better at generating code. But understanding how the Web works, grasping the essence of engineering problems, and making sound technical choices are abilities that remain worth building over time.**

## Curriculum

### 1. Modern Frontend Engineering in the Age of AI (coming soon)

### 2. Working with Backend Data — REST, GraphQL, and Real-Time Communication (coming soon)

### 3. State Management and Data Flow (coming soon)

### 4. Routing, Rendering, and Frontend–Backend Collaboration (coming soon)

### 5. Internationalization and Content Discoverability (coming soon)

### 6. Browser APIs and PWAs in Practice (coming soon)

### 7. Web Security — The Security Fundamentals Frontend Developers Can't Ignore (coming soon)

### 8. Testing, Performance, and User Experience (coming soon)

### 9. From Development to Production — CI/CD and Deployment in Practice (coming soon)

### 10. After Launch — Analytics and Observability (coming soon)