Lesson 3: Modern Front-end Development (Frameworks and State)

Up to now, you’ve built interactivity with plain (vanilla) JavaScript. That’s a strong foundation, but modern websites and web apps quickly become difficult to manage as they grow in size and complexity. In this lesson, you’ll step into modern front-end development, where you build your interface using components, organise your app with routing, and keep your data predictable using state management.

You’ll start by looking at the “big three” frameworks used in industry — React, Vue, and Angular — and what problems they solve. You’ll learn how frameworks help you structure your code, reuse UI pieces, and create more maintainable applications.

You’ll then work with key patterns that appear across frameworks, including:

• building reusable components (UI that can be used in multiple places),
• setting up routing (moving between pages/views without full page reloads),
• connecting your front end to real data by integrating with APIs.

Finally, because modern apps often handle user accounts and sensitive information, you’ll cover essential security best practices for the front end. This includes protecting users from common threats and making sure your app behaves safely when working with external data and authentication.

By the end of this lesson, you should be able to explain how modern frameworks work, build a small component-based interface, and confidently connect it to an API while applying practical security habits.