Бесплатный курс по программе
Frontend development
Бесплатный курс по программе
Frontend development
Почему
-
01/ высокий спросВ мире все более растет потребность в создании пользовательских интерфейсов для веб-сайтов и приложений, что делает фронтенд-разработку высоко востребованной профессией - 02/ Гибкая траекторияЗнание фронтенд-разработки может также служить хорошей отправной точкой для расширения навыков в других областях веб-разработки, таких как full-stack разработка или дизайн
- 03/ РазнообразиеФронтенд-разработка предлагает широкий спектр проектов, от небольших лендингов до сложных веб-приложений, что позволяет разнообразить вашу работу и навыки
- 04/ Большое сообщество и поддержкаПрохождение курса позволит вам встретиться с единомышленниками, расширить профессиональную сеть контактов и обменяться опытом с другими студентами и преподавателями
что ждет на курсе
Лекции и вебинары
2-3 раза в неделю
С 16:00 по мск
С 16:00 по мск
Домашка и практика
Сделаешь проект для портфолио
Эксперты и кураторы
Получишь навыки и обратную связь от сотрудников Neoflex
IT-комьюнити
Обменяешься знаниями, опытом и поддержкой
Программа обучения
Расскажем про базовые принципы работы команд, системы менеджмента и автоматизации, софт и хард скиллы
Обсудим, как работать с 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 стилей
Git
Умеешь использовать основные операции в Git
Основы 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-отличник
Ого! А вот и ты, наш идеальный студент! Видим, что ты готовился. Желаем такого же успеха на вступительных испытаниях и будем рады видеть в числе наших студентов!
| Пройти еще раз |
Пройди короткий тест из 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. С его помощью ты можешь подать заявку на обучение и узнать больше об Учебном Центре