Бесплатный курс по программе
Frontend development
Набор закрыт, но ты можешь оставить заявку
Оставь свои контактные данные и мы напишем тебе как только набор откроется
Нажимая на кнопку «Отправить», я даю свое согласие на обработку моих персональных данных
Почему Frontend development
- Высокий спросВ мире все более растет потребность в создании пользовательских интерфейсов для веб-сайтов и приложений, что делает фронтенд-разработку высоко востребованной профессией
- Гибкая траекторияЗнание фронтенд-разработки может также служить хорошей отправной точкой для расширения навыков в других областях веб-разработки, таких как full-stack разработка или дизайн
- РазнообразиеФронтенд-разработка предлагает широкий спектр проектов, от небольших лендингов до сложных веб-приложений, что позволяет разнообразить вашу работу и навыки
- Большое сообщество и поддержкаПрохождение курса позволит вам встретиться с единомышленниками, расширить профессиональную сеть контактов и обменяться опытом с другими студентами и преподавателями
Что ждет на курсе
Программа обучения
Расскажем про базовые принципы работы команд, системы менеджмента и автоматизации, софт и хард скиллы
Обсудим, как работать с Figma и как обсуждать макет с дизайнером
Узнаем, что нового в HTML 5, разберем, как работать с CSS3 и SCSS
Узнаем, что такое и для чего нужен TypeScript, рассмотрим отличия JS от TS, обсудим преимущества и недостатки TypeScript, а также, как провести установку TypeScript
Рассмотрим жизненный цикл компонента, React Hooks и функциональные компоненты (оптимизация и избегание лишнего ререндеринга), изучим Redux хранилище состояния компонента
Узнаем, как писать бэк на JS с Express, изучим, для чего нужны мок-серверы, рассмотрим процесс проксирования
Узнаем, что нужно учитывать при настройке Webpack и добавлении плагина Typescript, научимся настраивать дев сервер и проксирование, освоим добавление плагина для SVG, познакомимся с Module Federation
Познакомимся с понятиями микрофронтов и модульности, узнаем, как работает Yarn workspace и NX
Познакомимся с оптимизацией React и библиотеками (React hook form, Redux form), изучим MobX и Zustand, освоим UI Kit и клиентские UI Kit со storybook
Изучим React Query как альтернативу Redux, освоим другие библиотеки
Изучим Styled components, освоим CSS modules
Разберем, что такое Accessibility и зачем учитывать доступность, освоим основные инструменты анализа доступности интерфейса
Узнаем, что такое куки, изучим хранение и работу токенов, освоим Cors и XSS
Что нужно для участия
TypeScript
Обладаешь базовыми знаниями TypeScript и можешь использовать их в работе
Навыки вёрстки
Знаешь основы HTML и основы объявления CSS стилей
Spring-приложения
Знаешь способы конфигурации Spring-приложения
Основы JS
Знаешь и понимаешь основы JS: Операторы, типы данных, асинхронность и т.д.
REST API
Понимаешь принципы применения, а также стандарты и методы
React/Vue/Angular
Понимание принципов работы, основных концепций и библиотек
Проверьте себя
Пройдите короткий тест из 5 вопросов, которые помогут оценить
ваши знания по направлению
ваши знания по направлению
| Начать тестирование |
Какой результат выведет следующий код? console.log(0.1 + 0.2 === 0.3)
Из-за особенностей IEEE 754 сумма 0.1 + 0.2 даёт 0.30000000000000004, а не 0.3.
Из-за особенностей IEEE 754 сумма 0.1 + 0.2 даёт 0.30000000000000004, а не 0.3.
Из-за особенностей IEEE 754 сумма 0.1 + 0.2 даёт 0.30000000000000004, а не 0.3.
Из-за особенностей IEEE 754 сумма 0.1 + 0.2 даёт 0.30000000000000004, а не 0.3.
| Далее |
| Проверить |
| Узнать результат |
Какое CSS-свойство используется для создания многострочного текстового обрезания с троеточием?
Для корректного обрезания строки необходимо использовать overflow: hidden, white-space: nowrap и text-overflow: ellipsis.
Для корректного обрезания строки необходимо использовать overflow: hidden, white-space: nowrap и text-overflow: ellipsis.
Для корректного обрезания строки необходимо использовать overflow: hidden, white-space: nowrap и text-overflow: ellipsis.
Для корректного обрезания строки необходимо использовать overflow: hidden, white-space: nowrap и text-overflow: ellipsis.
| Далее |
| Проверить |
| Узнать результат |
Что вернёт следующий код? console.log([ ] + { })
Пустой массив [ ] приводится к пустой строке "", а { } к строке "[object Object]", поэтому результат "[object Object]".
Пустой массив [ ] приводится к пустой строке "", а { } к строке "[object Object]", поэтому результат "[object Object]".
Пустой массив [ ] приводится к пустой строке "", а { } к строке "[object Object]", поэтому результат "[object Object]".
Пустой массив [ ] приводится к пустой строке "", а { } к строке "[object Object]", поэтому результат "[object Object]".
| Далее |
| Проверить |
| Узнать результат |
Какой результат будет у console.log("5" - - "2")?
"5" и "2" преобразуются в числа, а двойной минус - - превращается в +, поэтому 5 + 2 = 7.
"5" и "2" преобразуются в числа, а двойной минус - - превращается в +, поэтому 5 + 2 = 7.
"5" и "2" преобразуются в числа, а двойной минус - - превращается в +, поэтому 5 + 2 = 7.
"5" и "2" преобразуются в числа, а двойной минус - - превращается в +, поэтому 5 + 2 = 7.
| Далее |
| Проверить |
| Узнать результат |
Какое значение имеет z-index у элемента по умолчанию?
По умолчанию z-index имеет значение auto, что означает, что порядок определяется позицией элемента в дереве рендеринга.
По умолчанию z-index имеет значение auto, что означает, что порядок определяется позицией элемента в дереве рендеринга.
По умолчанию z-index имеет значение auto, что означает, что порядок определяется позицией элемента в дереве рендеринга.
По умолчанию z-index имеет значение auto, что означает, что порядок определяется позицией элемента в дереве рендеринга.
| Далее |
| Проверить |
| Узнать результат |
Neo-венький / НЕОкрепшие познания
Привет новичкам! Кажется, кто-то еще в са-а-амом начале пути. Ух, как мы тебе завидуем – столько всего предстоит узнать! А чтобы понимать, на что ориентироваться и с чего начать – ознакомься с материалами на странице интересующего тебя направления.
| Пройти еще раз |
Neo-любитель / Еще НЕОбузданные знания
Ты явно где-то нечто читал или слышал – а это уже что-то! Так держать! Но не останавливайся и углубляй свои еще необузданные познания, чтобы стать нашим студентом!
| Пройти еще раз |
Neo-с-опытом / НЕОпознанный субъект
Тест наполовину пройден – успех наполовину в кармане. Мы уже не можем причислить тебя к новичкам, но и еще не можем к знатокам. Скажем одно – ты на верном пути, продолжай изучать!
| Пройти еще раз |
Neo-почти готовенький / НЕОтразимый!
Еще чуть-чуть! Это было неотразимо! Ты почти готов к настоящим вступительным испытаниям. Скорее исправляй пробелы в знаниях и ждем твоей заявки!
| Пройти еще раз |
Neo-отличник / НЕОспариваемый успех
Ого! А вот и ты, наш идеальный студент! Видим, что ты готовился. Желаем такого же успеха на вступительных испытаниях и будем рады видеть в числе наших студентов!
| Пройти еще раз |
Материалы для самоподготовки
- Справочник по HTML тегам и CSS свойствам (ссылка)
- Б. Фрэйн «HTML5 и CSS Разработка сайтов для любых браузеров и устройств»
- Резиг, Бибо, Марас «Секреты JavaScript ниндзя»
- М. Хавербеке «Выразительный JavaScript. Современное веб-программирование»
- Д. Седерхольм «HTML5 For Web Designers / CSS3 For Web Designers (A Book Apart)»
- Работа с Git (ссылка)
- БЭМ (ссылка)
- Основы HTML5. Полный курс (ссылка)
- Основы CSS3. Полный курс (ссылка)
- ES6 (ссылка)
- ES6 and Typescript Tutorial (ссылка)
- React & TypeScript — курс для начинающих (ссылка)
- React TypeScript полный курс 2021. Props, Events, Router, Hooks, Requests (ссылка)
- REST API (ссылка)
- React JS фундаментальный курс от А до Я (ссылка)
- Beginner's Tutorial for React JavaScript Library [2022] (ссылка)
- Security: CORS (ссылка)
- Онлайн учебник по JavaScript (сcылка)
Остались вопросы?
Нажимая на кнопку «Отправить», я даю свое согласие на обработку моих персональных данных
127015, г. Москва, ул. Вятская, д. 35, стр. 4, 1 подъезд, 2 этаж
Переходи в наш Telegram bot. С его помощью ты можешь подать заявку на обучение и узнать больше об Учебном Центре.