Кто такой Frontend-разработчик?
Frontend разработчик — это инженер-программист, который создаёт веб-сайты с помощью таких языков программирования, как HTML, CSS и JavaScript.
Что делают Frontend-разработчики и чем занимаются?
Обязанности на примере одной из вакансий:
- Разработка новых игровых фичей в команде с гейм-дизайнером.
- Оптимизация производительности.
- Ревью и рефакторинг устаревших решений.
- Глубокая интеграция с нашим веб-порталом.
- Развивать, поддерживать и рефакторить код на Vue;
- Изредка поддерживать старый код на Node.JS для совместимости с новым кодом;
- При желании — экспериментировать и решать нестандартные задачи на Svelte (научим и покажем);
- Проводить и проходить ревью и решать другие frontend-задачи.
Что должен знать и уметь Frontend-разработчик?
Требования к Frontend-разработчикам:
- Адаптивная вёрстка сайтов и писем
- Работа с TypeScript
- Уверенное знание JavaScript и ООП
- Разработка серверных приложений на Node.js
- Работа в системе контроля версий Git
- Разработка десктопных приложений на Ionic/Electron
- Знание React.js/Angular/Vue.js
- Понимание алгоритмов и структур данных в проектах
Востребованность и зарплаты Frontend-разработчика
На сайте поиска работы в данный момент открыто 8 519 вакансий, с каждым месяцем спрос на Frontend-разработчиков растет.
Количество вакансий с указанной зарплатой Frontend-разработчика по всей России:
- от 95 000 руб. – 2 707
- от 180 000 руб. – 1 762
- от 265 000 руб. – 784
- от 350 000 руб. – 346
- от 435 000 руб. – 75
Вакансий с указанным уровнем дохода по Москве:
- от 85 000 руб. – 1 065
- от 170 000 руб. – 809
- от 255 000 руб. – 424
- от 340 000 руб. – 181
- от 425 000 руб. – 52
Вакансий с указанным уровнем дохода по Санкт-Петербургу:
- от 95 000 руб. – 461
- от 180 000 руб. – 331
- от 265 000 руб. – 137
- от 350 000 руб. – 61
- от 435 000 руб. – 14
Как стать Frontend-разработчиком и где учиться?
Варианты обучения для Frontend-разработчика с нуля:
- Самостоятельное обучение – всевозможные видео на YouTube, книги, форумы, самоучители и т.д. Плюсы – дешево или очень недорого. Минусы – нет системности, самостоятельное обучение может оказаться неэффективным, полученные навыки могут оказаться невостребованными у работодателя;
- Онлайн-обучение. Пройти курс можно на одной из образовательных платформ. Такие курсы рассчитаны на людей без особой подготовки, поэтому подойдут большинству людей. Обычно упор в онлайн-обучении делается на практику – это позволяет быстро пополнить портфолио и устроиться на работу сразу после обучения.
Ниже сделали обзор 15+ лучших онлайн-курсов.
15+ лучших курсов для обучения Frontend-разработчика: подробный обзор
Что смогут выпускники:
- создавать адаптивные веб-сайты с использованием CSS, Flexbox
- разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML
- писать сложные компоненты на React и интерфейсы с авторизацией и с подключением к бекенду
Программа обучения
- Веб-верстка
Вы научитесь:
• создавать страницы на чистом HTML
• позиционировать элементы на странице с помощью CSS
• применять семантическую верстку
• использовать средства разработчика в браузере
• верстать адаптивные веб-страницы на Flexbox
• загружать свой код на GitHub
- Javascript
Вы научитесь:
• писать простые программы на Javascript
• применять ООП в Javascript
• создавать сложные скрипты с обработкой событий
• работать с форматом JSON
• использовать препроцессоры CSS
• работать по методологии БЭМ
- React и другие фреймворки
Вы научитесь:
• разрабатывать приложения на React
• использовать продвинутый API
• писать свои компоненты на React
• создавать приложение на Angular
• создавать приложение на Vue.js
• использовать анимацию на CSS или на React
• применять библиотеку Redux на приложении React
- Архитектура приложений и бекенд
Вы научитесь:
• подключать приложение к базе данных
• разворачивать приложение на Node.js
• писать unit-тесты
- Карьерный трек
Вы научитесь:
• составлять резюме и сопроводительное письмо
• готовиться к собеседованию
• адаптироваться работе в команде
• оформлять свой профиль на фриланс-биржах
• искать заказы на биржах и общаться с заказчиками
Сертификат после успешного обучения. Отзывы студентов курса на сайте.
- Научитесь создавать сайты и приложения, проектировать интерфейсы и работать с Flexbox и JavaScript
- Соберите крутое портфолио из 9 жизнеспособных проектов для получения работы своей мечты
- Формат обучения — Онлайн-занятия 2-3 раза в неделю + домашние работы
- Уровень — С нуля
- Документ — Диплом о профессиональной переподготовке
Программа курса
Вёрстка сайта на HTML и CSS
- Теги для вёрстки контента страницы
- Теги для вёрстки структуры страницы
- Теги для вёрстки форм
- Селекторы CSS
- Определение контекста элементов
- Блочная модель
- Позиционирование элементов
- Оформление текста
- Оформление декоративных элементов
- Состояние интерактивных элементов
Мобильная и адаптивная вёрстка
- Вёрстка резинового макета
- Резиновые изображения
- Медиа-запросы и медиа-функции
- Вёрстка мобильных устройств
- Вёрстка адаптивного макета
- Адаптивная типографика, выбор breakpoints
- Адаптивные изображения
Английский язык для начинающих разработчиков
- Лексика, без которой не обойтись
- Как вести переписку на английском
- Чтение документации и анализ требований
- Программирование
- Тестирование ПО
- Стрессовые ситуации
- Устранение неполадок
- Работа и роли в команде
- Поддерживаем любую беседу на английском
- Собрания, презентации на высшем уровне
Основы программирования
- Алгоритмы
- Переменные, числа и строки
- Логика и математика
- Ветвление кода
- Алгоритм с множественным выбором
- Ошибки в коде
- Массивы
- Циклы
- Подпрограмма, функция
- Объекты
- Синхронное и асинхронное выполнение алгоритма
Git — система контроля версий
- Предназначение системы контроля версий
- Основные операции (фиксация и откат изменений, поиск, история)
- Работа с сервисом GitHub
- Ветки, слияние веток и разрешение конфликтов
Основы JavaScript
- Основы отладки
- Базовый синтаксис
- Расширенный синтаксис
- Типы данных
- Функции, объекты
- Прототип и конструктор объекта
- ООП в JS (ES6)
- Обработка исключений и замыкания
- Прототип массива, функции высшего порядка
- Асинхронность
Основы JavaScript в браузере
- Возможности JavaScript в браузере
- Способы поиска нужного HTML-элемента
- Объект события
- DOM
- Работа с HTML-формами
- Изменение структуры HTML-документа
- Асинхронные запросы
- Хранение состояния на клиенте
Продвинутый JavaScript
- Стандарты и рабочее окружение
- Модули и Webpack
- Платформы: браузер vs Node.js
- Unit-тестирование
- Прототипы, конструкторы, классы и наследование
- Object, Reflection и Proxy
- Регулярные выражения
- Контейнеры
- ArrayBuffer
- Promises, async/await, timers & event loop
- Символы, итераторы, генераторы
- TypeScript
Продвинутый JavaScript в браузере
- Рабочее окружение
- Работа с DOM (объектная модель документа)
- Обработка событий
- Организация тестирования (Unit, E2E)
- Работа с HTML-формами, LocalStorage
- Drag & Drop, работа с файлами
- Работа с HTTP
- Анимация и CSS
- Geolocation, Notification, Media
- RxJS
- EventSource, Websockets
- WebWorkers, ServiceWorkers
Библиотека React
- Компоненты, композиция компонентов
- События и состояние
- Props
- Формы
- Жизненный цикл и работа с HTTP
- HOC
- hooks, Context API
- React Router
- Redux и Redux Thunk, Redux Observable, Redux Saga
Карьера в Frontend-разработке
- Frontend-разработчик: задачи, работа в команде
- Поиск работы: компания vs фриланс
- Карьерная траектория: из студента в senior
- Первое собеседование
- Тренды Frontend-разработки: за какими ресурсами следить
- Резюме, сопроводительное письмо, портфолио
Ваше резюме после обучения:
Умею делать
- Интернет-магазин обуви
- Онлайн-игру «ходилку»
- «Крестики-нолики» на JavaScript
- Cайт-биржу по продаже криптовалюты
- Веб-менеджер личных финансов
- Бот для поиска и хранения информации
- Систему бронирования ж/д-билетов
Мои навыки
- Вёрстка под тач и мобильные устройства
- Работа с Flexbox и JavaScript
- Способность правильно использовать переменные, числа и строки
- Создание прототипа и конструктора объекта
- Использование выражений в JavaScript
- Применение символов, итераторов и генераторов
- Импорт и экспорт модулей
- Создание интерактивных веб-страниц
- Работа с файлами и медиаресурсами
- Применение принципов клиент-серверного взаимодействия
- Создание одностраничных веб-приложений (SPA)
- Навыки использования библиотеки React, JSX, React router, VirtualDom
Вы изучите основы HTML, CSS и JavaScript, научитесь создавать сайты и приложения для любых устройств, оптимизировать код и работать с анимацией. Соберёте портфолио и сможете начать карьеру разработчика.
Чему вы научитесь
- Верстать сайты и приложения для всех типов устройств
- Создавать сайты и приложения с помощью JavaScript
- Работать с системой Git и GitLab
- Использовать библиотеки jQuery, React, Redux для ускорения процесса разработки
- Делать сайты, которые будут корректно открываться в любом браузере
- Тестировать вёрстку
- Анимировать веб-страницы
Программа
Вас ждут 5 тематических блоков, прохождение которых можно приравнять к году работы.
- 49 модулей
- 150 онлайн-уроков
Веб-вёрстка
- Веб-вёрстка. Базовый уровень
- Веб-вёрстка. Продвинутый уровень
Онлайн-сессии по веб-разработке
- Библиотека jQuery.
- Адаптация макета под мобильные устройства.
- Практикум по интерактивным элементам.
- Что такое Webpack.
- Сборка проекта на Gulp и обзор препроцессора Sass.
- Анимация в CSS.
JavaScript
- JavaScript. Базовый уровень
- JavaScript. Продвинутый уровень
Дипломные проекты
- Проекты по вёрстке
- JavaScript
Профессиональные навыки:
- Адаптивная и кроссбраузерная вёрстка
- Работа с протоколами HTTP/HTTPS
- Работа с Web API
- Использование библиотеки для ускорения процесса разработки
- Сборка проектов
- Взаимодействие со внешними сервисами
- Основы React и Redux
- Работа с системой контроля версий Git
- Владение методологией БЭМ
- Верстка под десктоп и мобильные устройства
- Знание Node.js
Программа обучения
Неделя 1 — Workflow
— Знакомимся с наставником и группой.
— При помощи webpack-сборки верстаем выбранный макет выпускного проекта.
— Размещаем результат на Github и сдаём на проверку наставнику.
- Вводное занятие
- Yarn
- PUG
- Webpack
- Figma для верстальщика
- Flexbox
- GIT
- Компонентный подход
Неделя 2 — Vue.js
— Делаем верстку адаптивной.
— Реализуем блок «Скиллы» на Vue.js.
— Реализуем блок «Мои проекты» на Vue.js.
— Реализуем блок «Слайдер для отзывов» с помощью Vue.js плагина.
- js
- Vue 3. Обзор изменений
- Адаптивная вёрстка
- js. Виджеты
Неделя 3 — Нативный JavaScript
— Верстаем админку.
— Изучаем Storybook и применяем в своём проекте.
— Осуществляем необходимую обработку (валидацию) форм проекта.
- JavaScript — ES6
- Storybook
- js. Работа в среде приложения
- js. Сборка страницы
Неделя 4 — Vue.js, SPA
— Реализуем SPA в админ-панели.
— Изучаем работу с данными через хранилище приложения
— Используем ajax для связи с api, настраиваем взаимодействия клиент-сервер.
- js. Написание приложения
- js. Composition API
- Асинхронность в JavaScript
- Работа с api для проекта портфолио
- js. Работа с сервером
Неделя 5 — Практика
— Выводим сохраненные данные из админ-панели на лендинг.
— Тестируем компоненты.
— Групповая работа над проектом с наставником.
- Тестирование JS-кода
- js. Тестирование компонентов
- Анимации во Vue.js
- js. Завершение работы над проектом
Неделя 6 — Завершение работы над проектом
— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.
- Как получить работу в IT: фишки и советы
Ключевые навыки
- Уверенная работа с Vue.js.
- Уверенная работа с React.js.
- Опыт разработки SPA-приложений.
- Уверенная работа с SVG.
- Кроссбраузерная верстка.
- Уверенная работа с консолью и пакетными менеджерами.
- Работа с Gulp, Webpack, NPM.
- Работа с Git.
- Освоение новых технологий за короткие сроки.
Освойте современную профессию: вы научитесь создавать сайты и приложения, проектировать интерфейсы и работать со сложными инструментами frontend-разработчика.
- 12 месяцев
- 5 проектов в портфолио
- Гарантия трудоустройства
- Диплом о переподготовке
- Хостинг-партнер курса REG.RU
Программа обучения
Подготовительный блок
- Как учиться эффективно. Видеокурс от методистов GeekUniversity
- Основы программирования
- Базовый курс
I четверть. Веб-верстка
— Научитесь верстать сайты, создадите страницу и подготовитесь к созданию планировщика задач
— Освоите библиотеку Bootstrap, препроцессоры LESS и SASS
— Освоите адаптивную вёрстку, принципы кроссбраузерности и валидности
— Создадите посадочную страницу
- HTML/CSS. Интерактивный курс
- Профессиональная вёрстка
II четверть. Frontend-разработка
— Освоите JavaScript и принципы ООП
— Научитесь работать с Parcel, Webpack, Vue.js и сторонними API
— Сможете работать в различном окружении и подключать сторонние библиотеки
Проект
— Приложение для учета расходов
- Базовый курс JavaScript
- Продвинутый курс JavaScript
- Инструменты сборки проектов
- js
III четверть. Библиотека ReactJS и основы backend-разработки
— Научитесь работать с ReactJS
— Сможете применять ECMAScript 6 и использовать концепцию Flux
— Освоите основы разработки бэкенда на Node.js и сможете создавать различные REST API
- Библиотека ReactJS. Базовый курс
- Платформа Node.js
IV четверть. Разработка от идеи до релиза
— Познакомитесь с методологиями Agile, Scrum, Kanban
— Получите навыки командной разработки и научитесь работать с GIT
— Изучите принципы Continuous Integration и Continuous Delivery
Проекты
— Командный выпускной проект. Пройдете этапы профессиональной разработки: от поиска идеи до тестирования и релиза продукта
- Профессиональная разработка веб-приложений
- Командная разработка дипломного проекта
Курсы вне четверти
Их тоже нужно пройти, чтобы получить диплом и помощь в трудоустройстве. Записаться на курсы с открытой датой можно в любой день, даже после окончания всех курсов в расписании.
- Подготовка к техническому собеседованию
- Основы баз данных. Видеокурс
- Базы данных
- Рабочая станция
- Фриланс-разработчик: курс подготовки
- Подготовка к поиску работы
Ключевые навыки
— Верстаю сайты и владею адаптивной версткой.
— Создаю одностраничные приложения
— Работаю с HTML и CSS, Node.js
— Владею инструментами для модульной сборки — Parcel и Webpack
— Использую Vue.js и основных библиотек его экосистемы, разрабатываю компоненты на Vue.js
— Работаю с библиотекой ReactJS
— Использую концепцию Flux с применением библиотек Redux
Программа курса
HTML и CSS. Профессиональная вёрстка сайтов
Вы научитесь создавать выразительную и доступную разметку, работать с графическим макетом, строить сетки страниц, оформлять декоративные элементы и текстовое содержание, оптимизировать код и готовить завершённый проект к публикации.
HTML и CSS. Адаптивная вёрстка и автоматизация
Вы научитесь создавать разметку по методологии БЭМ, использовать препроцессоры, строить адаптивные сетки, работать с адаптивной и ретиновой графикой, использовать инструменты автоматизации и настраивать сборку проекта для публикации.
JavaScript. Профессиональная разработка веб-интерфейсов
Вы изучите основы JavaScript, научитесь алгоритмическому мышлению, разберётесь, как оживлять статичные страницы, валидировать данные в формах, взаимодействовать с серверами и получите практику решения типовых задач.
Подготовка вёрстки для cистем управления контентом (CMS)
Вёрстка — это один из начальных этапов работы над продуктом. Чаще всего следующим этапом является интеграция вёрстки в систему управления контентом (CMS). Во время интеграции из вёрстки делают шаблоны, в которые CMS подставляет содержание. При этом содержание меняется самим клиентом, поэтому важно делать вёрстку таким образом, чтобы её было удобно интегрировать в CMS.
- Обзор популярных систем управления контентом, демонстрация админки и процесса работы с админкой со стороны конечного пользователя
- Подготовка вёрстки под разделение на шаблоны. Выделение повторяющихся частей, организация стилей и скриптов
- Работа с генерируемым контентом. Разметка основной контактной области, работа с генерируемыми изображениями и стилями
- Подготовка вёрстки под расширение и изменение объёма контента и информационных блоков
Вёрстка React-компонентов
Вёрстка с нуля в экосистеме React и создание интерактивных React компонентов.
- Принципы работы одностраничных приложений (SPA) и их основные отличия от статичных сайтов. Краткий обзор инструментов для создания SPA
- Экосистема React и структура проекта для вёрстки в этой экосистеме
- Синтаксис JSX, работа с компонентами, использование моков для имитации работы с данными
- Организация стилей в React, CSS-in-JS
- Работа со state и props для демонстрации состояний страниц
В отличие от верстальщика, фронтенд-разработчик владеет продвинутыми инструментами верстки, хорошо знает и умеет использовать JavaScript и JS-библиотеки и фреймворки. Поэтому его работа высоко оплачивается и ценится работодателями.
В комплексную программу входят следующие курсы:
- HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3
- HTML и CSS. Уровень 2. Углубленный CSS и вёрстка макета
- HTML и CSS. Уровень 3. Продвинутые методологии и инструменты верстки
- Уровень 1. Основы JavaScript
- Уровень 2. Расширенные возможности
- Уровень 6. React и JSX
- Практика создания веб — приложения (фронтенд)
Программа курса
- Верстка сайтов (учимся верстать красивые и адаптивные интерфейсы с помощью HTML и СSS)
- js (изучаем основу всего Frontend — чистый JavaScript)
- Работа с хранилищами данных
- jQuery (Разбираемся как работать с самой распространенной библиотекой )
- AJAX (Ускоряем работу страниц, делаем первые шаги к SPA)
- ООП (понимаем как работает объектно ориентированное программирование чтобы создавать крутейшие интерфейсы)
- js (Изучаем перспективный фреймворк, резко набирающий популярность во всем мире )
- Работа с компонентами
- Работа с роутингом
- js (Изучаем применение JavaScript для написания серверной части приложения)
- NPM (учимся работать с менеджером пакетов)
- Работа с фреймворком Express
- js (изучаем самый востребованный фреймворк в России и Европе от компании Facebook)
- Работа с компонентами
- Redux — работа с хранилищами
- Роутинг
- Работа с реальными серверами (развертывание проекта на реальном сервере)
- Git (учимся использовать самую современную и популярную систему контроля версий которая используется практически в любой IT компании)
- Работа в команде (Набираемся опыта командной разработки перед выходом на работу)
Это продвинутая программа обучения для разработчиков с опытом, которые уверенно чувствуют себя с HTML/CSS и JavaScript, имеют опыт работы с одним из фреймворков.
Программа:
Вступительное тестирование
Прохождение тестирования в тренажёре в своём темпе. 15 часов
Вы пройдёте входное тестирование на курс, по ходу которого проверите ваше знание JavaScript и умение решать базовые алгоритмические задачи.
- JavaScript: параллельный курс
Прохождение курса в своём темпе. 30 часов
При помощи тренажёра вы самостоятельно повторите важные концепции JavaScript.
Ближе познакомитесь с DOM-деревом и управлением содержимым DOM-узлов.
Глубже изучите асинхронность: начнёте с setTimeout и setInterval, продолжите с Event loop и нулевой задержкой, «приправите» знания чейнингом и callback.
- Модуль самостоятельного проекта
10 недель работы над проектом. Код-ревью от разработчика. 120 часов
По ходу реализации проекта «Веб-мессенджер» вы структурируете и углубите имеющиеся знания, а также освоите новые инструменты и потренируетесь в работе с ними. Кроме того, уже в первые два месяца погрузитесь в изучение всей «магии» современных технологий.
Этот модуль как испытательный период — вы погружаетесь в интенсивную разработку, изучаете внутренности, нюансы работы технологий. Займётесь не только чистым фронтом на JS с типизацией TS, но и узнаете больше о тестировании, DevOps, работе с API.
В этом модуле расскажем, как:
- выбрать среду разработки, хостить код и проект и даже немножко о выборе операционной системы
- использовать TypeScript (как основы, так и сложные концепции)
- отображать элементы в браузере
- работать с архитектурой CSS и препроцессорами
- написать свой шаблонизатор и что это такое
- реализовать компонентный и модульный подходы
- использовать знание паттернов программирования и ООП
- настроить роутинг, какие есть нюансы
- работать с API, что такое WebSockets и в целом о клиент-серверном взаимодействии
- применять в работе линтеры и code style
- тестировать приложение при помощи Chai и Mocha
- работать с безопасностью: CSRF, XSS, CSP, Clickjacking и не только
- настраивать сборку через Parcel, а потом Webpack, а также работать с Docker
- работает DevOps (узнаете о сертификатах, CI/CD и HTTP/2)
+ 1 проект в портфолио
- Модуль командного проекта
12 недель командной работы над проектом. С ментором и код-ревьюером. 160 часов
Вы объединитесь в команды из 2–3 человек и создадите свою веб-игру с нуля: от продумывания макетов и логики до деплоя в облако. Реализуете клиентскую часть игры и её бэкенд, развернёте результат в Яндекс.Облаке.
Вы сможете использовать любые библиотеки на клиенте, которые не касаются части с игрой. Игру вы напишете используя React, TypeScript, Canvas API.
В этом модуле расскажем, как:
- Алгоритмы и структуры данных. Включённый курс
Включённые темы в тренажёре. 40 часов
Вам предстоит изучать этот блок на протяжении всей программы. Вы познакомитесь с распространёнными алгоритмами и структурами данных, реализуете их на JavaScript и научитесь оценивать сложность алгоритмов.
Темы: анализ сложности алгоритмов, массив, хеш-таблица, связный список, очередь, стек, дерево, куча, граф, сортировка, рекурсия, алгоритм Хаффмана, поиск в ширину и в глубину, динамическое программирование, мемоизация.
- Карьерный трек (опционально)
50 часов
После основной программы вы сможете пройти подготовку к получению job offer.
Научитесь составлять резюме, писать сопроводительные письма, собирать портфолио и проходить собеседования. В финале — проделаете все шаги с нуля до трудоустройства (или повышения на текущем месте работы): откликнитесь на вакансию, выполните тестовое задание, пройдёте интервью и получите приглашение на работу.
Модуль включает в себя персональную работу со специалистами:
Чему Вы научитесь
После окончания курса вы получите все необходимые теоретические и практические навыки для реальной работы на позиции Front-End Developer.
- Писать качественный код на JavaScript, оперируя знаниями синтаксиса и принципами работы языка
- Изучите и проработаете знания по основам языка, функциям, массивам, объектам, ООП, замыканиям, исключениям, селекторам, событиям, WEB API, клиент-серверному взаимодействию и многое другое
- Во время курса сами напишете веб-проект и отработаете навыки применения составляющих проекта: приложения, библиотеки, фреймворки, сборка проекта и другие компоненты
- Будете готовы к собеседованию на вакансию JavaScript Junior Программист (Front End)
Программа:
Вёрстка 1. Основы HTML & CSS
- Введение в веб-разработку и интернет. Разбор основных терминов. Разбор всех этапов создания сайта. Ввод в язык разметки — HTML: структура документа, ключевые слова, заголовок, кодировка. Блочные и строчные элементы. Поток документа.
- Виды элементов. Спецсимволы. Атрибуты элементов. Гиперссылки и их виды. Абсолютные и относительные пути. Работа с изображениями и их разновидности.
- Основы CSS: базовый синтаксис, селекторы, классы, наследование и каскадирование.
- Сложные селекторы, псевдоклассы и псевдоэлементы. Работа со шрифтами. Семейства, начертания, способы подключения.
- Фоны. Все свойства background. Табличная верстка. Списки.
- Формы. Создание интерактивной формы обратной связи. Все виды поля input и его атрибуты. Отправка данных на сервер.
- Блочная верстка. Понятие Box Model. Отступы. Обтекание. Блочно-строчные элементы.
- Позиционирование. Рамки. Верстка карточек товаров.
Вёрстка 2. Адаптивная вёрстка.
- Photoshop для верстальщика. Настройка окружения. Разбор макета. Нарезка картинок. Начало верстки макета.
- Семантическая верстка. Новые элементы HTML 5. Практика. Верстка сайта по готовому макету в формате PSD.
- Стилизация чекбоксов, радио кнопок и переключателей с помощью псевдоэлементов.
- Адаптивная верстка. Медиа выражения. Верстка сайта с помощью Desktop похода.
- Адаптивная верстка. Верстка сайта с помощью Mobile first подхода.
- SVG и WEBP изображения. Разбор и верстка сложных блоков.
- Оживляем сайт. Выбор и подключение библиотеки на страницу. Работа с JavaScript. Популярные jQuery-плагины. Создание слайдера на основе плагина Slick.js
- Трансформации. Плавные переходы. Анимации. Обзор готовой анимации Animate.css.
Вёрстка 3. Bootstrap.
- Методологии верстки БЭМ, OOCSS, SMACSS, Atomic CSS.
- Подробный разбор БЭМ. Обзор графического редактора Figma.
- Гибкая верстка с помощью Flexbox layout.
- Подробный разбор Flexbox и его свойств.
- Препроцессоры LESS, SASS, PostCSS. Подробный разбор SASS.
- Настройка и компиляция SASS. Обзор UI фреймворков Bootstrap, Semantic UI, Ant Design.
- Система контроля версий Git. Сборщик проектов Gulp.
- Настройка и автоматизация задач с помощью Gulp.
JavaScript 1. Основы
- Знакомство с Javascript. Среда разработки WebStorm. Создание своего проекта и первой программы на Javascript. Обзор Git — системы управления версиями.
- Синтаксис JS. Переменные, выражения, операторы, их типы и взаимодействие. Идентификаторы, литералы. Типы данных в Javascript.
- Функции в Javascript. Стрелочные и анонимные функции. Функциональные выражения.
- Создание и инициализация массива. Команды Pop/Push, Shift/Unshift.
- DOM (Дерево). Определение и функции DOM в JS. Навигация по DOM-элементам (getElement* и querySelector*). Основы работы с событиями. Библиотека jQuery.
- Фоновая отправка формы. Загрузка данных в фоне.
- Прототипное программирование. ОПП в Javascript. Классы.
- Модули в JS. WebPacker. NodeJS.
JavaScript 2. Фреймфорки: VueJS
- Установка VueJS, знакомство со средой разработки. Написание первого приложения «Hello, world». Изучение директивов: v-if, v-for, v-on, v-model.
- Компоненты во VueJS и их структура. Входящие данные: props. События компонента: $emit. Значения по-умолчанию для props. Составные компоненты. Зоны ответственности. Mixins. Однофайловые компоненты. Работа с приложением «Список дел».
- Изучение принципа DRY. Повторное использование кода. Примеси Mixins.
- Навигация в приложениях. Работа с библиотекой VueRouter. Схема маршрутов приложения. Вложенные маршруты. Ссылки перехода router-link. Программная навигация. Передача параметров в машруте. Props и параметры маршрута.
- Управление состоянием приложения. Изучение библиотеки Vuex. Работа с хранилищем. Мутации. Геттеры. Работа с приложением “Складской учет”.
- Взаимодействие с сервером. Изучение библиотеки VueResource. Архитектура приложения, на API. Обработка ответа.
- Авторизация в приложении.
- Шаблон собственного проекта. Утилита vue-cli. Сборка и публикация финальной работы курса: “Интернет магазин спортивных товаров” на хостинге.
Учим необходимому
По-простому:
JavaScript
Единственный язык программирования, работающий в браузере. Главный инструмент фронтенд-программиста
HTML и CSS
Языки создания веб-страниц. Описывают их структуру (расположение блоков) и внешний вид. Отвечают за форматирование текста
Фреймворки (React + Redux Toolkit)
Задает архитектуру проекта. Решает типовые задачи за программиста. Значительно сокращает количество кода и автоматизирует рутину
Алгоритмы и структуры данных
Любая программа — это последовательность шагов, выполняемых над данными. Способ организации данных сильно влияет на удобство работы
Фронтенд (DOM API)
Код фронтенд-разработчика выполняется в браузере, а значит ему нужно уметь взаимодействовать со страницей и изменять ее
Качество
Автоматизированные тесты — неотъемлемая часть профессиональной разработки
Архитектура
Создание простого для анализа и изменения кода требует хорошего понимания принципов его организации
Инфраструктура
Программирование — это не только код, но и сопутствующие инструменты: командная строка, NPM, Git, Webpack
Подробно:
1. Основы веб-программирования
Создайте первые страницы с помощью HTML и CSS. Изучите основы программирования: типы данных, условные конструкции, циклы и функции. Прокачайте алгоритмическое мышление и реализуйте самостоятельно функции сортировки. Правильно настройте операционную систему для разработки, научитесь пользоваться командной строкой. Установите git, редактор кода VS Code. Наполните свое портфолио на Github первыми программами.
Программа модуля
- Настройка окружения (менеджер версий asdf, ubuntu on windows)
- Эффективная отладка кода (дебагер, подходы)
- Поиск технической информации (https://guides.hexlet.io/how-to-search/)
- Организация задач с помощью Kanban-доски (Trello)
Курсы
Теория, квизы, практика в тренажере
Основы современной вёрстки
HTML5 CSS3 Developer Tools
Введение в программирование
основы javascript чистый код алгоритмы логика
JS: Массивы
синтаксис вложенные массивы алгоритмическая сложность сортировка
Основы командной строки
терминал shell команды linux
Введение в Git
github рабочая директория клонирование восстановление
JS: Настройка окружения
eslint prettier зависимости npx
- Профессиональный JavaScript
Научитесь писать production-ready код. Освойте принципы объектно-ориентированного и функционального программирования. Начните писать модульный код, который легко расширять и поддерживать. Ускорьтесь с помощью автоматизированного тестирования своего кода. Настройте непрерывную интеграцию и опубликуйте свой первый пакет в npm. Пишите код аки бог.
- Разработка браузерных приложений
Создавайте интерактивные приложения в браузере и собирайте их с помощью Webpack. Эффективно используйте DOM API, выполняйте HTTP-запросы к серверу с помощью AJAX. Используйте архитектурный подход MVC для создания устойчивых к изменениям приложений. Научитесь правильно работать с формами: проверять корректность данных и думать о безопасности. Познакомьтесь с асинхронной природой JavaScript и используйте ее во имя добра.
- Разработка React-приложений
Освойте React для создания сложных одностраничных сайтов (SPA). Подключите Веб-сокеты для работы с приложениями реального времени. Грамотно управляйте состоянием приложения через Redux Toolkit. Создавайте компоненты, которые легко поддерживать и использовать повторно даже на разных сайтах. Интегрируйте с React библиотеки изначально не предназначенные для работы с ним. Используйте на полную катушку знания, полученные в предыдущих модулях.
Чему ты научишься?
- Верстать современные адаптивные страницы
- Создавать сайты с нуля
- Разрабатывать интерактивные модули для сайтов на JavaScript
- Получишь фундамент для работы фронтенд-разработчиком
Программа курса
- Введение, обзор инструментария, основы Git, обзор HTML
- Практическое применение HTML; Подключение CSS и JavaScript на странице
- Подходы к верстке страниц. Возможности CSS3.
- JavaScript
- Web-сервер, AJAX, REST API
- Модули JavaScript. Препроцессоры CSS. Системы сборки проектов.
- Защита дипломного проекта
Навыки:
- Верстка HTML/CSS/SASS
- Опыт работы с GitHub
- Опыт разработки JS/jQuery
- Умение работать с npm, webpack
- Знание Bootstrap
- Опыт командной разработки с использованием систем контроля версий Git и управления проектами
