SOFTWARE DEVELOPMENT · INTERMEDIATE LEVEL

Front-end (React) Development

The Front-End Development Program is a comprehensive training course designed to equip learners with the skills required to build modern, responsive, and interactive web applications. The curriculum covers HTML, CSS, Git, JavaScript, React, state management, API integration, performance optimization, and AI-powered development tools. Participants progress from web development fundamentals to advanced React concepts, gaining practical knowledge in creating scalable user interfaces and real-world applications. The program concludes with a capstone project where learners plan, develop, optimize, and deploy a complete web application, preparing them for careers as Front-End Developers

Intermediate20 weeks80 hoursOn-site

Create account & apply Explore syllabus ↓

Your selected course will be carried into Ingress Portal.

COURSE HIGHLIGHTS

🧑‍🏫

Practical teaching

In addition to class hours, you will practice the topics covered with your instructor and mentor dur

🤝

Mentors

The knowledge and skills you learn at the academy will be further strengthened with the mentor syste

📋

Academic transcript

Assignments and projects are checked by the instructor, and your knowledge and skills are determined

Not sure you are ready? Take a skill assessment

YOUR LEVEL

BeginnerIntermediateAdvancedExpert

WHAT YOU WILL BE ABLE TO DO

The skills you will have by the end of this course.

Upon successful completion of this program, participants will be able to:
Build responsive and accessible web pages using HTML and CSS.
Create modern layouts with Flexbox, Grid, and responsive design techniques.
Use Git and GitHub for version control and collaboration.
Develop interactive web applications with JavaScript.
Work with APIs and handle asynchronous data using Fetch and Promises.
Build reusable and scalable user interfaces with React.
Manage application state using Context API, Redux Toolkit, and React Query.
Optimize application performance and apply front-end best practices.
Leverage AI tools such as ChatGPT and GitHub Copilot to improve development workflows.
Design, develop, deploy, and present a complete front-end project.

CONDENSED SYLLABUS

See the structure without reading a textbook.

Modules stay collapsed for quick scanning. Open any module to inspect its topics.

01MODULE 1 — HTML, CSS, Git3 lessons+

Overview of the web (Client vs. Server)

What is the DOM? Understanding its role in rendering web pages

Brief introduction to HTML, CSS, JavaScript, and how they work together

02HTML Basics11 lessons+

Semantic HTML (<header>, <footer>, <section>, <article>, <nav>)

Form submission and handling data

Structure of an HTML document (<!DOCTYPE>, <html>, <head>, <body>)

Understanding form elements (<form>, <input>, <textarea>, <select>, <button>)

Tables, divs, and spans

Form validation attributes (e.g., required, pattern, minlength)

HTML Forms and Input Elements

Links, images, and media elements

Understanding the purpose of tags, attributes, and content

Forms: input, button, select, textarea

Headings, paragraphs, and lists

03CSS Fundamentals21 lessons+

Pseudo-classes (:hover, :focus, :nth-child)

Basic selectors (element, class, ID)

Media queries for mobile-first design

Using rem, em, and px for font sizing

CSS Layout Techniques

CSS Selectors

Fluid layouts and viewport units

Responsive Web Design

Positioning: static, relative, absolute, fixed

Working with width and height properties

Inline, internal, and external stylesheets

What is CSS and how it styles HTML

CSS syntax: Selectors, properties, and values

CSS Grid: Grid containers, grid items, grid template areas

CSS frameworks like Bootstrap or Tailwind CSS

Understanding content, padding, border, and margin

Flexbox: Flex container and items, justification and alignment

Combinators (descendant, child, sibling)

Pseudo-elements (::before, ::after)

CSS Box Model

Box-sizing (border-box vs. content-box)

04JavaScript Basics30 lessons+

Changing element content and styles

What is TypeScript?

Arrow functions and callbacks

DOM Manipulation with JavaScript

Looping structures: for, while, forEach

Embedding JavaScript in HTML: <script> tags, external scripts

Arrays and tuples

Introduction to asynchronous programming

Functions in JavaScript

How TypeScript helps in catching errors early

Defining functions using function declarations and expressions

JSON: Understanding JSON data format and parsing

Arrays and Objects

Function parameters and return values

Control Flow and Loops

Promises and async/await

Setup

Arrays: Creating, accessing, modifying, and iterating

JavaScript syntax: Variables, data types, operators

Adding event listeners (click, change, submit)

Conditional statements: if, else, switch

What is JavaScript and its role in web development

Selecting and modifying DOM elements (getElementById, querySelector)

Type annotations (number, string, boolean, any)

Union and intersection types

Using setTimeout, setInterval

Asynchronous JavaScript

Type inference

Benefits of using TypeScript over JavaScript

Objects: Creating and using objects, key-value pairs

05Introduction to React15 lessons+

Conditional rendering in JSX

JSX Syntax

Embedding expressions inside JSX

Project structure overview (public vs. src)

Setting Up a React Development Environment

Why React? Advantages and benefits for modern web development

JSX Syntax

What is JSX and how it works

JSX Syntax

Understanding React and its component-based architecture

JSX Syntax

What is React?

Returning multiple elements from a component

06React Basics12 lessons+

Using useState hook to manage state in functional components

Functional components vs. class components

Event binding in React

Using this in class components and function components with hooks

Props and State in React

Passing data to components using props

Understanding render function and return statements

Handling Events in React

React Components

Handling user events: onClick, onChange, onSubmit

Changing state based on user interactions (button clicks, form inputs)

Understanding props: passing data from parent to child components

07Advanced React Concepts17 lessons+

Dynamic and nested routing

Introduction to React Router

useRef for accessing DOM elements

useReducer for more complex state logic

Component Lifecycle (Class Components)

Creating and consuming context in React

Setting up routes with BrowserRouter, Route, and Switch

React Hooks

Using useContext for accessing context data

Routing in React

useEffect hook for side effects (e.g., fetching data, subscriptions)

useMemo and useCallback for performance optimization

Context API

Understanding component lifecycle methods: componentDidMount, componentDidUpdate, componentWillUnmount

Navigation with Link, NavLink, and useNavigate

Advanced React Concepts

Introduction to Context API for global state management

08Working with APIs and Data Fetching8 lessons+

Displaying data from an API using useState and useEffect

Using async/await for asynchronous calls

Using fetch and axios to make API requests

Handling loading, success, and error states

Fetching Data in React

Asynchronous JavaScript with React

Managing state with asynchronous actions

Handling API responses and errors in React components

09Styling in React10 lessons+

Creating styled components in React

Introduction to styled-components and benefits

CSS-in-JS with Styled Components

Using CSS modules for local component styles

Responsive Design in React

Mobile-first design using React and CSS frameworks (e.g., Bootstrap, Tailwind)

Media queries within React components

Theme-based styling with styled-components

CSS Modules and Scoped CSS

Managing CSS conflicts with scoped styles

10State Management with Redux12 lessons+

Configuring the store with Redux Toolkit

Creating slices and reducers

Introduction to Redux Toolkit for simplified Redux logic

Why Redux? Global state management

Redux Toolkit

Redux Thunk for async actions

Advanced Redux Patterns

Setting up Redux with React

Introduction to Redux

Redux DevTools for debugging state changes

Integrating Redux with React components using useDispatch and useSelector

Core concepts: Store, Actions, Reducers

11React Query15 lessons+

Configuring QueryClient and QueryClientProvider

Automatic refetching with background updates

Installation and setup

Fetching data with useQuery

React query mutations, Query Invalidation

Handling loading and error states

Handling success and error callbacks

Manual invalidation of queries

Introduction to useMutation

Benefits of using React Query (caching, automatic updates, etc.)

Overview of React Query

Adding, updating, and deleting data

What is React Query?

Comparison with traditional state management approaches

Query Invalidation and Refetching

12Performance Optimization in React7 lessons+

Using React.memo to prevent unnecessary re-renders

Optimizing API Calls

Memoizing functions with useCallback and useMemo

Lazy loading data and implementing pagination

Code splitting and lazy loading with React.lazy and Suspense

Debouncing user input

Optimizing React Components

13Git, Deploying React Applications11 lessons+

Understanding the production build and optimizing assets

Deploying to Vercel, Netlify, or GitHub Pages

Introduction to Git

What is Git, and why is it important?

Difference between Git and other version control systems

Continuous integration and continuous deployment (CI/CD) with GitHub Actions

Git workflow basics (working directory, staging area, repository)

Running npm run build for production-ready React apps

Installing Git on different operating systems

Understanding .gitignore files

Deploying to Hosting Platforms

14Full Project - Building a React Application11 lessons+

Planning and Design

Writing tests for your app

Implementing state management (local state, Context, or Redux)

Building the Application

Final Testing and Deployment

Integrating third-party APIs

Choosing a project (e.g., e-commerce store, social media dashboard)

Deploying your app to production

Styling the app with CSS, CSS modules, or styled-components

Optimizing performance and ensuring responsiveness

Designing components and application structure

UPCOMING GROUPS

Choose the cohort you can actually attend.

Only current, open groups are shown.

STARTS

To be announced

On-site

Schedule: To be announced
Format: On-site
Duration: 20 weeks · 80 hours
Language: Confirm with advisor

Join the next cohort waitlist

YOUR INSTRUCTOR TEAM

Specialists matched to the modules they teach.

Course delivery is supported by practitioners across engineering, architecture and production backend development.

Shamil Isayev

Frontend DeveloperPasha Pay

CONTEXTUAL PROOF

“The program helped me connect individual skills into the way real teams design, build and deliver software.”

See real graduate stories from the Ingress community.

Explore graduate results

APPLICATION THROUGH INGRESS PORTAL

Your course stays selected while you create your account.

We use one Portal account for applications, assessments and future learning progress. You will not need to email your details or select the training again.

Questions first? Talk to an advisor

01
Create or sign in to your Portal accountYour contact details stay connected to one student profile.
02
Confirm your application detailsFront-end (React) Development is preselected.
03
Submit your applicationThe admissions team receives it immediately and can follow up from the Portal.

SELECTED TRAININGFront-end (React) DevelopmentOn-site

Continue in Ingress Portal Already registered? The Portal will let you sign in instead.