Skip to content
SYNTRA
Modern Web DevelopmentFoundationSelf-paced

Modern Web Development: Foundations

Component-driven, typed front-end development as it is actually practiced on real teams today.

Taught by Renata Cruz
6h 30m 17 lessons Foundation

Course overview

This course builds the practical foundation for modern front-end work: component structure, typed data, and the habits that keep an interface maintainable as it grows. It is built around real interface problems, not isolated syntax drills.

What you’ll learn

  • Structure a UI into components with clear responsibilities
  • Use typed data to prevent an entire category of bugs
  • Reason about state instead of guessing at it
  • Read and extend an unfamiliar codebase confidently

Curriculum

5 chapters · 17 lessons · 6h 30m

Thinking in components before writing any code.

  • Why component boundaries matter15m
  • Reading an interface as a tree of components17m
  • Setting up a real project structure14m

Typed data and predictable state.

  • Why types prevent whole categories of bugs19m
  • Modeling UI state honestly20m
  • Case study: refactoring an untyped component22m

Building real, reusable components.

  • Exercise: a reusable filter component24m
  • Exercise: a form with real validation26m
  • Handling loading and error states properly18m

Working inside an existing codebase.

  • Reading an unfamiliar codebase efficiently16m
  • Extending a component without breaking it18m
  • Basic performance habits that matter early15m

Build a small multi-page interface end to end.

  • Project brief: a course-browsing interface10m
  • Building the project30m

Requirements

  • Basic familiarity with HTML and CSS
  • Comfortable working in a code editor and terminal

Who this is for

  • Developers moving from basic scripting to structured front-end work
  • Designers who want to build their own interfaces
  • Career changers building a first serious portfolio project