Schedule

Week 1 - HTML & Browser Fundamentals

Week 2 - CSS

Week 3 - TypeScript

Week 4 - React Fundamentals

Week 5 - React Interactivity & State management

Week 6 - React Side Effects, Styling & Next.js

Week 7 - Project

Week 8 - Break

Week 9 - React State Management Part 2

Week 10 - React Escape Hatches & Modern Patterns

Week 11 - Next.js Fundamentals

Week 12 - API Integration

Week 13 - Testing & Quality

Week 14 - Deployment & CI/CD

Welcome to the Frontend Track!

This program is designed to take you from the foundations of web development into building modern, production-ready applications. Over 19 weeks, you will learn how to create interactive user interfaces, manage complex application state, and deploy professional web applications using industry-standard tools and frameworks. You'll move from basic HTML and CSS to building full-featured React applications with TypeScript, authentication, testing, and CI/CD pipelines. This track is hands-on and intensive - you'll be building real applications that users can interact with from day one.

Why Frontend Development?

Every digital product needs a user interface, but building one that's fast, accessible, and maintainable requires serious engineering. Frontend developers are the architects who translate design and functionality into experiences that millions of people use daily. We chose this track because it's a high-demand field that combines creative problem-solving with technical rigor. You'll learn to work with React, TypeScript, Next.js, and modern tooling - skills that are essential in any web-based product. If you enjoy bringing ideas to life visually and building things that people directly interact with, this is the track for you.

<aside> 💡

The skills you develop here - component thinking, state management, accessibility, and user-focused development - are highly valuable across the entire tech industry, from mobile development to design systems and full-stack engineering.

</aside>

In this track, you will learn

  1. Modern HTML, CSS, and DOM manipulation (semantic markup, responsive design, browser APIs)
  2. TypeScript fundamentals (type system, interfaces, type-safe development)
  3. React ecosystem (components, hooks, state management, Context API, Server Components)
  4. Next.js framework (App Router, server/client components, data fetching, deployment)
  5. Professional development practices (testing, CI/CD, performance optimization, debugging)
  6. API integration and authentication (REST APIs, TanStack Query, JWT, protected routes)

After completing this track, you will be able to

  1. Build production-ready web applications. Apply modern development practices to create responsive, accessible, and performant user interfaces that work across devices and browsers.
  2. Use React and Next.js effectively. Work confidently with React's component model, hooks, and Next.js's App Router to build full-featured applications with server and client rendering.
  3. Write maintainable, type-safe code. Use TypeScript to catch errors early, improve code quality, and collaborate effectively in team environments with clear interfaces and contracts.
  4. Test and deploy with confidence. Write automated tests, set up CI/CD pipelines, and deploy applications to production environments using modern deployment platforms.
  5. Integrate with APIs and manage application state. Fetch and manage data from external APIs, handle authentication flows, and implement complex state management patterns using modern libraries and React pattern
  6. Work productively in a frontend development environment. Use Git for version control, collaborate through code reviews, debug effectively with browser DevTools, and communicate technical decisions clearly to designers, backend developers, and stakeholders.
  7. Work productively and critically with AI tools. Use AI tools to support learning and development, while understanding their limitations, validating outputs, and maintaining code quality and accessibility standards.

Ready? Let’s begin with Week 1 - HTML & Browser Fundamentals


The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0

CC BY-NC-SA 4.0 Icons

*https://hackyourfuture.net/*

Found a mistake or have a suggestion? Let us know in the feedback form.