SOFTWARE DEVELOPMENT · СРЕДНИЙ УРОВЕНЬ

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

Средний20 недели80 часовОчно

Создать аккаунт и подать заявку Смотреть программу ↓

Выбранный курс будет перенесён в Ingress Portal.

ПРЕИМУЩЕСТВА КУРСА

🧑‍🏫

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

Не уверены, что готовы? Пройдите бесплатную оценку навыков

ВАШ УРОВЕНЬ

НачальныйСреднийПродвинутыйЭксперт

ЧТО ВЫ СМОЖЕТЕ ДЕЛАТЬ

Навыки, которыми вы овладеете к концу этого курса.

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.

КРАТКАЯ ПРОГРАММА

Ознакомьтесь со структурой, не читая учебник.

Модули свёрнуты для быстрого просмотра. Откройте любой модуль, чтобы увидеть его темы.

01MODULE 1 — HTML, CSS, Git3 урока+

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 уроков+

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 урок+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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 уроков+

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

БЛИЖАЙШИЕ ГРУППЫ

Выберите группу, которую вы действительно сможете посещать.

Показаны только текущие открытые группы.

НАЧАЛО

Будет объявлено

Очно

Расписание: Будет объявлено
Формат: Очно
Длительность: 20 недели · 80 часов
Язык: Уточните у консультанта

Записаться в лист ожидания

ВАША КОМАНДА ПРЕПОДАВАТЕЛЕЙ

Специалисты, подобранные под модули, которые они ведут.

Обучение поддерживают практики в области инженерии, архитектуры и production backend-разработки.

Shamil Isayev

Frontend DeveloperPasha Pay

КОНТЕКСТНОЕ ПОДТВЕРЖДЕНИЕ

“Программа помогла мне связать отдельные навыки с тем, как реальные команды проектируют, создают и поставляют ПО.”

Смотрите реальные истории выпускников из сообщества Ingress.

Изучить результаты выпускников

ЗАЯВКА ЧЕРЕЗ INGRESS PORTAL

Выбранный курс сохраняется, пока вы создаёте аккаунт.

Мы используем один аккаунт Portal для заявок, оценок и будущего прогресса обучения. Вам не нужно отправлять данные по почте или снова выбирать курс.

Сначала вопросы? Поговорите с консультантом

01
Создайте аккаунт Portal или войдитеВаши контактные данные привязаны к одному профилю студента.
02
Подтвердите данные заявкиFront-end (React) Development уже выбран.
03
Отправьте заявкуПриёмная команда получает её сразу и может связаться с вами через Portal.

ВЫБРАННЫЙ КУРСFront-end (React) DevelopmentОчно

Продолжить в Ingress Portal Уже зарегистрированы? Portal позволит вам войти.