Сложность
Сложность
Начинающий
Тип обучения
Тип обучения
Курс
Формат обучения
Формат обучения
Записанные лекции
Трудоустройство
Трудоустройство
Отсутствует
Сертификат
Сертификат
Да

Стоимость курса

1 240 ₽
нет рассрочки

Next.js - готовый к production framework для React - самой популярной JavaScript библиотеки на сегодняшний день. Он позволяет разрабатывать производительные, SEO-friendly сайты с использованием Server Side Rendering (SSR) и статической генерацией страниц.

При этом от вас требуется только базовое знание CSS, HTML и JavaScript, так в рамках курса мы не только разберём Next.js, но и React с нуля. При этом мы будем писать не просто какой-то учебный проект, а реальный production сайт, посвящённый рейтингам.

Мы детально разберём:

  • TypeScript
  • Настройку окружения и сборку проекта
  • Работу в Figma
  • React Hooks
  • Создание компонентов
  • Контекст
  • Роутинг NextJS
  • Вёрстку на CSS grid
  • Как работает Server Side Rendering (SSR) и статическая генерация страниц
  • Встроенные компоненты Next.js
  • Работу с формами через react-hook-form
  • Анимацию с помощью Framer Motion
  • Доступность с клавиатуры и работу ScreenReader
  • Подготовку приложения к production и работу Docker

Каждый модуль содержит как теоретическую часть, так и live-code, где мы в месте будем создавать приложение с нуля. В конце каждого модуля вас ожидает тест, который позволит укрепить ваши знания, а небольшие упражнения - попрактиковаться писать код.

В результате курса вы получите знания и навыки, которые необходимы frontend разработчику на реальных проектах.

!!! В рамках данного курса, я сотрудничаю с фондом Движение вверх, оказывающий помощь детям с инвалидностью. Фонд помогает детям пройти реабилитацию в специализированных центрах, и дает шанс вернуться к обычной жизни. 10% от продаж данного курса я буду ежемесячно отправлять в фонд.

Что вы получите после обучения

Приобретаемые навыки
1
CSS
5
TypeScript
6
Вёрстка
11
Regexp
12
JSX
13
React Hooks
14
useState
15
useEffect
16
useRef
17
SVG
18
SSR
19
Grid CSS
20
Обеспечение высокой доступности
21
Framer
22
VSCode
23
Husky
24
React Devtools
25
ScreenReader
26
HOC
27
useContext
28
useRouter
29
useForm
Сертификат, ссылками на который можно делиться с другими людьми

Вас будут обучать

Технический директор и профессиональный разработчик

Основатель школ PurpleSchool. Занимаюсь разработкой уже более 12 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.

Работаю техническим директором в компании по продаже и оценке автомобилей с пробегом. Занимают разработкой уже более 12 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд. Являются большим фанатом NestJS для Backend и активно занимаюсь open source библиотеками для него. На frontend работаю с React, Angular а так же обожаю делать небольшие виджеты на Svelte. Так же имею широкий опыт внедрения DevOps практик для быстрой доставки кода в production и созданию лучшего develop experience. Но что самое главное - испытываю огромное желание делиться знаниями, которые были накоплены в результате многолетнего опыта разработки и управления командами.

Образовательная организация

Stepik — образовательная платформа и конструктор онлайн-курсов.

Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки.

Наша цель — сделать образование открытым и удобным.

Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.

Платформа Stepik включает в себя конструктор бесплатных занятий и уроков. Создать интерактивный обучающий курс может любой зарегистрированный пользователь. При этом авторы обучающих материалов сохраняют авторские права. Сервис не имеет ограничений по числу обучающихся на курсе.

Stepik имеет обширные возможности по созданию онлайн-курсов, обучающих занятий и уроков с использованием текстов, видео, картинок, тестовых задач, в процессе выполнения которых можно вести обсуждения с остальными обучающимися, а также с преподавателем. Всего в Stepik присутствует 20 типов заданий, проверка которых может осуществляться как в автоматическом, так и в ручном режиме.

Большим преимуществом данной платформы является возможность встраивать созданные материалы на сторонние сайты, например, Moodle и Canvas.

Кроме того, Stepik может использоваться в качестве площадки для проведения разнообразных мероприятий, таких как олимпиады и конкурсы.

Интерфейс платформы полностью русскоязычный, достаточно дружественный и интуитивно понятный. Платформа полностью бесплатна.

За каждый пройденный курс в Stepik обучающийся получает сертификат о прохождении. Получение сертификата также бесплатно.

Программа курса

Введение

  1. Преимущества NextJS
  2. Как устроен курс
  3. Обзор проекта
  4. Update - Обзор курсов

Настройка окружения

  1. Установка софта
  2. Работа с nvm
  3. Настройки VSCode

TypeScript

  1. Вводное видео
  2. Компилятор TypeScript
  3. Базовые типы
  4. Interfaces and Types
  5. Упражнение - Interfaces
  6. Литеральные типы
  7. Enums
  8. Tuple
  9. Generics
  10. JSX
  11. Тест - TypeScript

Старт проекта

  1. Обзор модуля
  2. Развертка проекта
  3. Структура проекта
  4. Настройка eslint
  5. Настройка stylelint
  6. Отладка в VSCode
  7. React Dev Tools
  8. Тест - Старт проекта

Компоненты Head и Document

  1. Жизненный цикл React
  2. Компонент head
  3. React Fragment
  4. Компонент Document
  5. Тест - Компоненты Head и Document

Figma для разработчика

  1. Обзор модуля
  2. Разбор интерфейса
  3. Свойства компонент
  4. Экспорт графики
  5. Тест - Figma для разработчика

Простые компоненты

  1. Шрифты и цвета
  2. Первый компонент
  3. Update - Библиотека classnames
  4. Classnames
  5. HTMLProps
  6. Updated - Детали HTMLprops
  7. Работа с svg
  8. Дополнительно - SVG в NextJS 11
  9. Упражнение - Компонент p
  10. Компонент тэга
  11. Тест - Простые компоненты

Statefull компоненты

  1. React Hooks
  2. useState
  3. useEffect
  4. Правила использования Hooks
  5. Архитектура компонента рейтинга
  6. Компонент рейтинга - 1
  7. Компонент рейтинга - 2
  8. Тест - Statefull компоненты

HOC компоненты

  1. Что такое HOC?
  2. Layout
  3. Пишем HOC withLayout
  4. Тест - HOC компоненты

CSS Grid

  1. Обзор модуля
  2. Template и gap
  3. Justify и align
  4. Распределение ячеек
  5. Template-area
  6. Лучшие практики
  7. Вёрстка layout
  8. Упражнение - Вёрстка footer
  9. Тест - CSS Grid

Server side rendering

  1. Переменные окружения
    Как работает SSR?
    SSR в NextJS
    Использование getStaticProps
    Использование getStaticPaths
    Тест - Server side rendering

Контекст

  1. useContext
  2. Пишем свой контекст
  3. Вёрстка меню
  4. Тест - Контекст

Роутинг

  1. Компонент Link
  2. useRouter
  3. Упражнение - Добавление страниц
  4. Структура роутинга
  5. Вёрстка Sidebar
  6. Тест - Роутинг

Страница продуктов

  1. Компоненты страниц
  2. Вёрстка страницы продуктов - 1
  3. Regex отображения цены
  4. Упражнение - Доработка страницы
  5. Вёрстка страницы продуктов - 2
  6. Вставка HTML
  7. useReducer
  8. Компонент сортировки
  9. Reducer сортировки
  10. Тест - Страница продуктов

Компонент продукта

  1. Компонент Input
  2. Упражнение - Компонент Textarea
  3. Компонент поиска
  4. Компонент продукта - планирование
  5. Компонент продукта - сетка
  6. Компонент продукта - стили
  7. Склонение слов
  8. Компонент Image
  9. Компонент продукта - адаптив
  10. Тест - Компонент продукта

Работа с формами

  1. Компонент отзыва
  2. Форма отзыва
  3. useForm
  4. Работа с формами
  5. Проброс ref
  6. Обработка ошибок
  7. Упражнение - Обработка ошибок Rating
  8. Отправка запроса со страницы
  9. useRef
  10. Упражнение - Исправление бага useReducer

Анимация на Framer Motion

  1. Вводное видео
  2. Принципы анимации
  3. Анимация меню
  4. Анимация сортировки
  5. Пишем свой hook
  6. useAnimation
  7. Упражнение - Анимация отзывов
  8. Динамическая иконка
  9. Мобильное меню
  10. Жесты и MotionValues
  11. Производительность

Доступность

  1. Виды доступности
  2. Цветовая доступность
  3. Доступность меню с клавиатуры
  4. Доступность форм с клавиатуры
  5. Упражнение - доступность сортировки
  6. ARIA атрибуты
  7. Использование Screen Reader
  8. Aria-label и aria-labelledby
  9. Aria-hidden
  10. Добавление landmarks
  11. Доступность форм
  12. Упражнение - Доступность оповещений
  13. Доступность меню и списка
  14. Уменьшение движения

Подготовка к production

  1. Добавление meta на страницу
  2. Установка метрики
  3. Husky
  4. Next export
  5. Страницы 404, 500
  6. Сборка контейнера Docker
  7. Запуск через docker-compose
  8. Github actions

Рейтинг курса

4
рейтинг
0
0
0
0
0

Может быть интересно

обновлено 25.03.2024 09:37
React + Next.js 14 - с нуля. TypeScript, Hooks, SSR и CSS Grid

React + Next.js 14 - с нуля. TypeScript, Hooks, SSR и CSS Grid

Оставить отзыв
Поделиться курсом с друзьями