Modern Web Programming: Frontend Development with HTML, CSS, JavaScript, React, and Generative AI (Web Development in the Era of Generative AI)

Modern Web Programming – Frontend Development with HTML, CSS, JavaScript, React, and Generative AI is a practical, classroom-tested introduction to the development of modern web applications. Written by an instructor with over a decade of experience teaching Web Programming, this book combines solid fundamentals with the realities of today’s AI-augmented development workflow.

The book starts from the ground up. You’ll learn how the web works, what really happens when a browser loads a page, and how HTML5 provides the semantic structure for accessible, meaningful content. You then move into CSS: layout, responsive design, Flexbox, Grid, and the visual decisions that make interfaces usable and attractive across devices.

From there, the focus shifts to JavaScript. Core language concepts—variables, functions, objects, DOM manipulation, events, and asynchronous programming—are presented in a clear, incremental way, with plenty of examples and exercises. Advanced JavaScript features (ES6+ syntax, modules, modern patterns, and key browser APIs) are covered with an eye toward how real projects are built today.

Once the foundations are in place, the book introduces React as the dominant library for building interactive, component-based frontends. You’ll learn how to structure components, manage props and state, handle side effects with hooks, and work with lists, forms, and routing. A full project chapter outlines, step by step, the planning, design, and implementation of a realistic application that integrates HTML, CSS, JavaScript, React, and deployment.

Although this book focuses on the foundational skills of frontend Web development, it covers how you can utilize generative AI as a powerful assistant throughout the book. Drawing on the author’s prior work on “Vibe Coding,” you’ll see how to use AI tools to brainstorm UI ideas, scaffold boilerplate code, refactor and document existing code, generate test data, and reason about bugs—while you remain in control of architecture, data flow, and quality. The emphasis is on building trustworthy, human-reviewed applications that use AI to accelerate thinking, not replace it.

Each chapter includes worked examples, practical lab exercises, and review questions, making the book suitable for:

A one-semester Web Programming course , focusing on core chapters and a streamlined introduction to React and AI-assisted workflows.

A two-semester sequence , where instructors can go deeper into advanced JavaScript, React, full-project development, and deployment.

Self-paced learners who want a structured path from the first web page to modern frontend applications.

Three appendices extend the main material: Appendix A covers UX design workflows and tools like Figma in the era of generative AI; Appendix B introduces utility-first styling and Tailwind CSS; Appendix C provides web security fundamentals every frontend developer should know.

By the end of this book, you will not only understand how to build modern web frontends with HTML, CSS, JavaScript, and React—you will also know how to integrate generative AI into your daily workflow in a disciplined, productive way, preparing you for real-world projects and real-world teams.