Frontend [karpov.courses] [Дмитрий Безуглый, Артур Стамбульцян, Антон Резник]
ПРОЙДИТЕ ПОЛНЫЙ ЦИКЛ СОЗДАНИЯ ВЕБ-ПРИЛОЖЕНИЙ
Долгое время считалось, что frontend — это про вёрстку и интерактивность. Однако сегодня разработчику всё чаще приходится выходить за пределы браузера и разбираться в смежных областях.
МЫ ВСЕ БЫЛИ ДЖУНАМИ И ПРОШЛИ ЭТОТ ПУТЬ:
1) ИЗУЧИЛ ОСНОВЫ ФРОНТЕНДА
2) ПОПАЛ В КОМПАНИЮ
3) СДЕЛАЛ НЕСКОЛЬКО ЗАДАЧ И ПОНЯЛ, ЧТО ЗНАНИЙ НЕ ХВАТАЕТ
НАЧИНАЙТЕ С НУЛЯ, ОТТАЛКИВАЯСЬ ОТ РЕАЛЬНЫХ ПРОБЛЕМ
Наш проект начнётся с голого HTML и CSS на GitLab Pages, а закончится готовым сервисом на React со своим деплоем на собственном сервере. Мы перейдём на React, чтобы осознать проблемы разработки и по-настоящему разобраться, зачем нужен тот или иной инструмент.
ИЗУЧАЙТЕ СМЕЖНЫЕ ТЕМЫ
Современный frontend-разработчик должен уметь выходить за пределы браузера. Деплой, CI/CD, мониторинг, кэширование, оптимизация на сервере — всё это поможет вам делать качественные, быстрые интерфейсы и решать сложные проблемы.
РАЗБИРАЙТЕ ТОНКОСТИ И НЮАНСЫ РАЗРАБОТКИ
Мы не теоретики — каждый день мы создаём интерфейсы для миллионов пользователей и уже набили шишки и собрали лайфхаки, как разрабатывать быстро и эффективно. Все эти знания и навыки мы передадим вам на этом курсе.
ДЛЯ КОГО ЭТА ПРОГРАММА:
BACKEND РАЗРАБОТЧИК
Вы хотите быть Fullstack разработчиком — мы поможем вам приобрести необходимые компетенции и делать более интересные задачи, за которые вам будут платить больше.
MIDDLE FRONTEND
Вы успешно решаете рабочие задачи, но хотите структурировать знания и глубже копнуть в инструментарий. Мы поможем получить навыки, которые позволят вам расти выше.
JUNIOR FRONTEND
Вы уже работаете в компании или на фрилансе и хотите вырасти в middle frontend специалиста. Мы поможем вам получить все навыки, которые нужны на работе.
ЧТО НЕОБХОДИМО ДЛЯ КУРСА:
- HTML: Знание синтаксиса и умение верстать
- CSS: Знание базы для оформления сайтов (специфичность, тяжелые селекторы, блочная модель)
- JAVASCRIPT: Базовые знания (синтаксис, переменные, функции, циклы, замыкания, this, fetch)
- GIT: Базовые знания (умение создать репозиторий, создать ветку, закоммитить изменения, запушить в ветку, смержить с мастером)
Продажник:
ПРОЙДИТЕ ПОЛНЫЙ ЦИКЛ СОЗДАНИЯ ВЕБ-ПРИЛОЖЕНИЙ
Долгое время считалось, что frontend — это про вёрстку и интерактивность. Однако сегодня разработчику всё чаще приходится выходить за пределы браузера и разбираться в смежных областях.
МЫ ВСЕ БЫЛИ ДЖУНАМИ И ПРОШЛИ ЭТОТ ПУТЬ:
1) ИЗУЧИЛ ОСНОВЫ ФРОНТЕНДА
2) ПОПАЛ В КОМПАНИЮ
3) СДЕЛАЛ НЕСКОЛЬКО ЗАДАЧ И ПОНЯЛ, ЧТО ЗНАНИЙ НЕ ХВАТАЕТ
- Нехватка системных знаний мешает подниматься по карьерной лестнице. Особенно это заметно на собеседованиях: кандидаты вроде бы знают, как решать типовые задачи, но если копнуть глубже, сразу теряются.
- Сильный frontend-разработчик чётко понимает, как работает веб, уверенно общается с бэкендерами, тестировщиками, девопсами и даже может самостоятельно что-то настроить.
НАЧИНАЙТЕ С НУЛЯ, ОТТАЛКИВАЯСЬ ОТ РЕАЛЬНЫХ ПРОБЛЕМ
Наш проект начнётся с голого HTML и CSS на GitLab Pages, а закончится готовым сервисом на React со своим деплоем на собственном сервере. Мы перейдём на React, чтобы осознать проблемы разработки и по-настоящему разобраться, зачем нужен тот или иной инструмент.
ИЗУЧАЙТЕ СМЕЖНЫЕ ТЕМЫ
Современный frontend-разработчик должен уметь выходить за пределы браузера. Деплой, CI/CD, мониторинг, кэширование, оптимизация на сервере — всё это поможет вам делать качественные, быстрые интерфейсы и решать сложные проблемы.
РАЗБИРАЙТЕ ТОНКОСТИ И НЮАНСЫ РАЗРАБОТКИ
Мы не теоретики — каждый день мы создаём интерфейсы для миллионов пользователей и уже набили шишки и собрали лайфхаки, как разрабатывать быстро и эффективно. Все эти знания и навыки мы передадим вам на этом курсе.
ДЛЯ КОГО ЭТА ПРОГРАММА:
BACKEND РАЗРАБОТЧИК
Вы хотите быть Fullstack разработчиком — мы поможем вам приобрести необходимые компетенции и делать более интересные задачи, за которые вам будут платить больше.
MIDDLE FRONTEND
Вы успешно решаете рабочие задачи, но хотите структурировать знания и глубже копнуть в инструментарий. Мы поможем получить навыки, которые позволят вам расти выше.
JUNIOR FRONTEND
Вы уже работаете в компании или на фрилансе и хотите вырасти в middle frontend специалиста. Мы поможем вам получить все навыки, которые нужны на работе.
ЧТО НЕОБХОДИМО ДЛЯ КУРСА:
- HTML: Знание синтаксиса и умение верстать
- CSS: Знание базы для оформления сайтов (специфичность, тяжелые селекторы, блочная модель)
- JAVASCRIPT: Базовые знания (синтаксис, переменные, функции, циклы, замыкания, this, fetch)
- GIT: Базовые знания (умение создать репозиторий, создать ветку, закоммитить изменения, запушить в ветку, смержить с мастером)
1) Новостная лента 1.0
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью React, Webpack, TypeScript и GitLab Pages.
Сегодня frontend-разработчику важно не только уметь писать клиентский код, но и знать, как этот код доставлять на сервер. Эти знания позволяют находить общий язык с остальными членами команды разработки и существенно повышают ценность специалиста на рынке труда. В этом модуле мы поговорим о том, как собирать и доставлять код.
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
Когда на рынке есть несколько конкурирующих продуктов, важно, чтобы ваш продукт был привлекательнее с точки зрения UX. Продукт с богатым функционалом, но сделанный небрежно, проигрывает более модному. Плавные и продуманные анимации, адаптация под разные экраны и тёмная тема — эти UX оптимизации могут сильно повлиять на популярность вашего продукта.
5) Оффлайн и доступность
PWA — это ряд требований к веб-приложениям, сформированных компанией Google. Доступность приложения в офлайне — одно из основных требований, которое значительно повышает его юзабилити. Также в индустрии всё чаще встречается запрос на инклюзивность, поскольку часть аудитории веб-сервиса — люди с ограниченными возможностями. Им необходимо обеспечить комфортные условия пользования продуктом. В этом модуле мы подробно остановимся на каждом из этих актуальных требований.
Рано или поздно кода станет так много, что сайт начнёт тормозить. Поэтому важной задачей является повышение производительности за счёт увеличения скорости загрузки ресурсов и быстроты выполнения кода. В большинстве браузеров есть специальные инструменты для анализа производительности. В этом модуле научимся с помощью них находить причины проблем с производительностью и оперативно их устранять.
По мере развития продукта становится всё сложнее следить за тем, чтобы новые фичи не ломали сайт. Чтобы быть уверенным в том, что мы пишем работоспособный код, необходимо покрывать его автотестами — специальными программами, которые выявляют ошибки в коде. В этом модуле мы рассмотрим, какие бывают тесты и как их писать. Также затронем тему мониторинга ошибок, который позволяет вовремя узнавать о проблемах в работе продукта.
В некоторых ситуациях применение сложных инструментов разработки себя не оправдывает и является излишним. В этом модуле мы поговорим о том, как в очень сжатые сроки и в условиях нехватки ресурсов быстро запустить работающий продукт.
После изучения hard skill frontend-разработки, важно поговорить и о том, как найти им применение и презентовать работодателю. В этом блоке мы обсудим рынок вакансий frontend-разработки, в том числе и рынок для junior специалистов. Также поговорим о том, как лучше искать вакансии и как устроены интервью.
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью React, Webpack, TypeScript и GitLab Pages.
- HTML, CSS, JavaScript
- Деплой на GitLab Pages
- Введение в React: JSX, hooks
- Webpack + NodeJS
- API, fetch, CORS
- TypeScript
Сегодня frontend-разработчику важно не только уметь писать клиентский код, но и знать, как этот код доставлять на сервер. Эти знания позволяют находить общий язык с остальными членами команды разработки и существенно повышают ценность специалиста на рынке труда. В этом модуле мы поговорим о том, как собирать и доставлять код.
- Регистрация домена
- Как браузер открывает сайт: IP, DNS
- Связываем домен и GitLab Pages
- Роутинг в современных веб-приложениях, React Router
- Заводим свой сервер: Linux, Nginx, VPS, VDS, SSH
- CI/CD через GitLab
- Как угнать данные: HTTP/HTTPS, SSL
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
- Быстрый интерфейс без дизайна: Bootstrap
- Firebase: backend для frontend
- Авторизация: HTTP, Cookie, JWT, oAuth
Когда на рынке есть несколько конкурирующих продуктов, важно, чтобы ваш продукт был привлекательнее с точки зрения UX. Продукт с богатым функционалом, но сделанный небрежно, проигрывает более модному. Плавные и продуманные анимации, адаптация под разные экраны и тёмная тема — эти UX оптимизации могут сильно повлиять на популярность вашего продукта.
- Как браузер рисует страницы
- Анимации
- Делаем сортировку по дате
- Мобильная версия и темная тема: media queries, window.onresize
5) Оффлайн и доступность
PWA — это ряд требований к веб-приложениям, сформированных компанией Google. Доступность приложения в офлайне — одно из основных требований, которое значительно повышает его юзабилити. Также в индустрии всё чаще встречается запрос на инклюзивность, поскольку часть аудитории веб-сервиса — люди с ограниченными возможностями. Им необходимо обеспечить комфортные условия пользования продуктом. В этом модуле мы подробно остановимся на каждом из этих актуальных требований.
- Service Worker, IndexedDB
- PWA
- Локализация
- Доступность: Lighthouse, VoiceOver
Рано или поздно кода станет так много, что сайт начнёт тормозить. Поэтому важной задачей является повышение производительности за счёт увеличения скорости загрузки ресурсов и быстроты выполнения кода. В большинстве браузеров есть специальные инструменты для анализа производительности. В этом модуле научимся с помощью них находить причины проблем с производительностью и оперативно их устранять.
- Откуда берутся лаги. Профилирование, тонкости и нюансы
- Why-did-you-render, memo, useMemo, useCallback, виртуализация
- Webpack-analyze
- Клиентские оптимизации скорости загрузки сайта
- Серверные оптимизации скорости загрузки сайта
По мере развития продукта становится всё сложнее следить за тем, чтобы новые фичи не ломали сайт. Чтобы быть уверенным в том, что мы пишем работоспособный код, необходимо покрывать его автотестами — специальными программами, которые выявляют ошибки в коде. В этом модуле мы рассмотрим, какие бывают тесты и как их писать. Также затронем тему мониторинга ошибок, который позволяет вовремя узнавать о проблемах в работе продукта.
- Какие бывают тесты
- UNIT-тесты: Jest, TDD
- E2E: Cypress
- Статический анализ кода: ESLint, Stylelint
- Мониторинг: Sentry
В некоторых ситуациях применение сложных инструментов разработки себя не оправдывает и является излишним. В этом модуле мы поговорим о том, как в очень сжатые сроки и в условиях нехватки ресурсов быстро запустить работающий продукт.
- Create React App
- Firebase
- NextJS
- Heroku, Vercel и друзья
После изучения hard skill frontend-разработки, важно поговорить и о том, как найти им применение и презентовать работодателю. В этом блоке мы обсудим рынок вакансий frontend-разработки, в том числе и рынок для junior специалистов. Также поговорим о том, как лучше искать вакансии и как устроены интервью.
- Рынок вакансий
- Поиск работы
- Интервью
https://karpov.courses/frontend