Front-End Developer - Mainacademy
Front-End Developer
сертификат специалиста
Junior Front-End Developer

Front-End Developer – одна из самых востребованных профессий на сегодняшний день. Каждая компания и организация стремится иметь собственный сайт, поэтому Front-End разработчику есть из чего выбирать, чтобы иметь хороший заработок и интересную работу!

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

Учебная программа составлена ​​в соответствии с требованиями ведущих IT-компаний и отвечает требованиям современного рынка к специалистам уровня Junior Front-End Developer

Тренера-практики

Все тренера академии — успешные практики уровня Middle или Senior, которые имеют богатый и интересный опыт. Все тренера прошли обучение и сертификацию Main Academy.

IT-English

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

Карьерной сервис

По окончании курса все студенты проходят карьерный тренинг: тренируются проходить собеседование, учатся презентовать себя и свои soft и hard скиллы, составлять конкурентное резюме.

Вы научитесь

  • Делать верстку сайта и форматировать с помощью: HTML / HTML5, CSS / CSS3
  • Проводить базовую SEO-оптимизацию сайтов
  • Применять фреймворки: Bootstrap 4, jQuery, Angular, React, Ember.js и не только
  • Взаимодействовать с серверами с помощью JavaScript
  • Применять препроцессоры SASS / LESS /PostCSS
  • Создавать адаптивные сайты любой сложности
Технологии, которые вы освоите
Сделай первый шаг
Хотите больше узнать о Front-End Developer у ведущих IT-специалистов? Регистрируйтесь на ближайший бесплатный семинар “Билет в IT”!


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

Введение во Front-end разработку и облачные системы контроля версий

Обзор задач и средств разработки

  • Обзор браузеров, их совместимости. Принципы работы браузера. Основы веб-ориентированной клиент-серверной архитектуры веб-приложения
  • Понимание Web Single Page Application
  • Основные задачи фронтенда и обзор инструментов разработки

Система контроля версий Github

  • Определение системы контроля версий. Сравнение существующих систем
  • Github как хранилище кода. Регистрация на Github, установка клиента для компьютера
  • Инициализация проекта и настройка аккаунта
  • Команды git pull, git add, git push, git commit
  • Цикл разработки и философия работы с git

Макет веб-странички в графических редакторах

Основы работы с PhotoShop

  • Обзор инструментария, настройка среды
  • Форматы файлов: входные, выходные, внутренние
  • Работа со слоями
  • Создание изображения, использование текста, контуров, инструментов рисования
  • Использование фильтров Photoshop для создания эффектов
  • Инструменты цвета, преобразования

Макет страницы

  • Графические элементы страницы
  • Способы создания графических элементов
  • Создание макета страницы для подготовки к верстке

Верстка веб-страницы на чистом HTML и CSS

Основы HTML: теги для работы с текстом и изображениями

  • Описание стандарта HTML (W3C Standards). Особенности работы с тегами и атрибуты тега. Структура HTML документа. Основные теги для работы с заголовком. Применение валидатора HTML
  • Основные теги работы с текстом: заголовки, абзац, перенос строки, формат текста. Тег div
  • Работа с изображением: фон, тег работы с изображением. Создание гиперссылок и якорей. Работа со списками. Использование графических гиперссылок

Работа с таблицами данных в HTML

  • Работа с таблицами данных. Использование
  • Формы и их элементы: текстовые поля и элементы выбора. Атрибуты тэгов form и input

Работа с HTML5

  • Обзор спецификаций HTML5
  • Форматы даты и времени
  • Работа с аудио и видео с использованием соответствующих тегов

Работа с CSS/ CSS3

  • Синтаксис CSS. Создание и подключение CSS стилей к странице. Применение валидатора CSS
  • Базовые контейнеры CSS: Background, Text, Font, Link, List, Image
  • Оптимизация графики с использованием спрайтов

Блочная верстка страницы

  • Понятие блочной верстки и преимуществ использования, позиционирование элементов (свойства float и clear),
  • Работа со слоями, позиционирование слоев (построение макета). Настройка свойств padding и margin
  • Углубленная работа с CSS3
  • Новые свойства
  • Тени и градиенты
  • 2D и 3D трансформация
  • Анимация
  • Обзор существующих методологий работы с CSS

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

Основы SEO для разработчика

  • Обзор SEO оптимизации
  • Задачи SEO, решаемые на странице и вне ее
  • Приемы для улучшения SEO

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

Использование препроцессора LESS/SAAS/PostCSS

  • Базовые принципы работы CSS препроцессоров. Установка и подключение LESS SAAS/PostCSS
  • Синтаксис языка программирования стилей LESS/SAAS/PostCSS
  • Использование констант и переменных
  • Функции работы с цветом
  • Создание и использование примесей (Mixin). Параметрические примеси

Адаптивность и оптимизация верстки с фреймворком Bootstrap 4

  • Понятия: кроссплатформенности, кроссбраузерности, адаптивности. Обзор основных возможностей Bootstrap CSS, загрузка и подключение
  • Особенности верстки колонками, шрифты
  • Изучение Bootstrap CSS: таблицы, картинки, формы, группировка элементов форм, кнопки, группировка кнопок
  • Создание навигационных блоков. «Хлебные крошки»; постраничная навигация; полосы прогресса; группы списков; панели контента; переключатели контента;всплывающие подсказки; слайдер для баннеров

Работа над практическим заданием по созданию фронтэнд проекта

  • Обработка ТЗ
  • Консультации по проекту (2 ч.)
  • Самостоятельная работа над проектом под руководством тренера (24 ч.)

Основы JAVASCRIPT разработки

Основы языка JavaScript

  • Обзор языка JavaScript: история, роль и место, семантика и синтаксис
  • Обзор инструментария средств отладки кода браузеров. Принципы работы с console: обзор свойств и методов
  • Типы данных. Oператоры: арифметические, логические. Оператор typef(). Приоритет выполнения
  • Выражения. Операции над переменными. Область видимости переменных: Local Context, Global Context

Взаимодействие с пользователем

  • Взаимодействие с пользователем через диалоговые окна
  • Поиск элементов в документе, используя getElementById и getElementsByTagName
  • Вывод, используя innerHTML
  • Использование валидатора Jshint.com

Основные конструкции программирования

  • Ветвления: IF, If…else, if… else if
  • Циклы (Повторения): While, do…while, for
  • Конструкция Swich…Case
  • Конструкция try…catch, класс Error. Обработка ошибок

Работа с массивами

  • Массивы данных: одномерные, двумерные, многомерные. Cвойства и методы работы с массивом: length, map(), indexOf(), lastIndexOf(). Конструкция foreach
  • Aссоциативные массивы (структуры данных типа: словарь, хэш). Метод Keys() Стандартный класс Object, методы работы: toString() и valueOf(). Oператор delete. Понятие функции, точки ее вызова, реккурсия, принцип обратного вызова (callback). Интервалы и таймеры (setInterval(), setTimeout(), setImmediate()). Использование return с множественным выбором

Встроенные и собственные конструкторы

  • Обзор основных втроенных конструкторов
  • Рассмотрение основных типов данных в роли объектов

Работа со строками и датами

  • Обзор методов
  • Введение в регулярные выражения

JAVASCRIPT продвинутый. Работа с веб-страничками

Обработка событий в модели DOM

  • Обзор объектной модели W3C DOM: определение, история, уровни
  • Браузерная реализация в веб

Способы получения доступа к элементам DOM

  • get ElementById
  • get ElementsByTagName
  • get ElemensByClassName
  • Объекты Document и Element
  • Коллекции HTML элементов

Обзор событий элементов в модели DOM

  • Методы элемента addEventListener(), removeEventListener()
  • Жизненный цикл события(стадии перехвата, на целевом элементе, фаза всплытия)
  • StopPropagation(), preventDefault()
  • Кроссбраузерная обработка событий

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

  • Объект Form
  • Элементы управления формы
  • Поля ввода. Изменение регистра введенных данных
  • Валидация данных через регулярные выражения

Основы Canvas

  • Интерактив на стороне клиента с использованием Javascript(Canvas)
  • Управление видео и аудио c использование javascript
  • Обзор основых событий audio, video

Обработка элементов страницы

  • События мыши и клавиатуры для элементов управления input
  • Кнопки
  • Поля ввода. Изменение регистра введенных данных
  • Флаги. Массивы флагов
  • Переключатель. Массивы переключателей
  • Визуальная группировка элементов. Управление видимостью элементов используя свойства visibility, hidden, display

JAVASCRIPT. Взаимодействие с сервером

XMLHttpRequest

  • Структура URL
  • Использование объекта XMLHttpRequest: свойства, методы

JSON и XML

  • Форматы передачи данных клиент-сервер-клиент JSON, XML
  • Web storage и Cookies
  • Local&Session Storage
  • Cookies
  • Доступ к Cookies
  • Механизмы сохранения и чтения Cookies

Технология Ajax

  • Технология Ajax
  • Работа с HTTP протоколами
  • Формирование запросов, обработка ответов

Инструменты и модули для ФронтЕнд разработчика

Модульный подход к разработке: RequireJS, Backbone.js

  • Описание подхода к разработке Asynchronous Module Definition (AMD)
  • Установка инструмента, реализующий подход RequireJS и подключение его в проект
  • Описание модуля с помощью define и выполнение с помощью require

Автоматизаторы сборки ФронтЕнд проектов

  • Минификация и обфускация JS и CSS с использованием uglify_js, minify_js и других
  • Обзор препроцессоров GRUNT, GULP, Broccoli
  • Установка GRUNT, структура файла Gruntfile.js. Использование GRUNT на разных примерах

Современные фрейморки

  • Yahoo! UI Library (YUI)
  • MooTools
  • jQuery
  • Dojo Toolkit
  • Backbone.js
  • Angular
  • Ember.js
  • ReactNative
  • Nativescript

Выполнение персонального учебного проекта

Работа над практическим заданием по созданию фронтэнд проекта

  • Обработка ТЗ
  • Консультации по проекту (2 ч.)
  • Самостоятельная работа над проектом под руководством тренера (24 ч.)

Защита своего учебного проекта

  • Защита происходит в аудитории, перед независимым экспертом практиком, из наших компаний партнеров
  • Защита будет напоминать ваше первое техническое собеседование, которое позволит показать ваше мастерство
  • Вы получите развернутый фидбек о своей работе, а также узнаете в каком направлении вам еще нужно прокачать скилы

Junior Front-End Developer - 8 шагов к цели

  • 1
    Записаться на курс
  • 3
    Выполнить практические, лабораторные, домашние
  • 5
    Отработать занятия по HR
  • 7
    Защитить проект и сдать тесты
  • 2
    Изучить теорию
  • 4
    Подготовить финальный проект
  • 6
    Посещать ИТ-English и Speaking Club
  • 8
    Junior Front-End Developer!

Формы обучения

Offline обучение
  • Занятия в аудиториях
  • Индивидуальная и командная работа над решением задач
  • Доступ к учебным материалам, заданиям, лабораторным и тестам 24/7 на протяжении всего периода обучения
  • Индивидуальный карьерный тренинг с практикующим HR специалистом
  • Курс IT-English та Speaking Club
Online обучение
  • Обучение в любой точке мира
  • Живое общение с тренером и обработки заданий на каждом уроке
  • Запись каждого урока
  • Доступ к учебным материалам, заданиям, лабораторным и тестам 24/7 на протяжении всего периода обучения
  • Карьерный тренинг с практикующим HR специалистом
Front-End Developer
Форма регистрации на курс

Форма регистрации на курс
Название курса

Курс: Разработка Front-End

Занятия с инструктором

Цена 4 платежа
4250 грн.

С нуля до уровня IT-специалиста и любимой работы

Занятия в аудиториях или онлайн с лучшими инструкторами

5,5 мес, 45 занятий, 112 часов теории и практики с IT-экспертами

Лабораторные работы, индивидуальные и групповые проекты

Английский в подарок для трудоустройства и работы

Финальный экзамен, защита проекта – и Вы сертифицированный IT – специалист!

Команда курса «Front-End Developer»

Карьерный сервис

Максимум знаний и умений для трудоустройства
Даем профессиональное ИТ-обучение

После окончания курса, с полученными знаниями и навыками, вы сможете претендовать на позицию Junior Front-End Developer

Карьерный тренинг

Учим грамотном позиционированию на рынке труда. Правильно писать резюме и сопроводительные письма. Успешно проходить интервью

Рекомендуем на работу

Мы постоянно получаем от наших партнеров запросы на работу в ИТ-компаниях. Лучших студентов рекомендуем нашим партнерам на работу и стажировку.

Отзывы об обучении в Main Academy

Получите Ваш билет в IT
Форма регистрации на пробный урок или семинар

Пробный урок
Front-End Developer

Еще не готовы приступить к обучению или остались сомнения?

Заберите свой билет в IT и приходите на бесплатные лекции от Main Academy!

  • Вы познакомитесь с IT-экспертами, технологиями, спецификой работы в IT
  • Вы узнаете как начать IT-карьеру с наименьшими затратами и какую специальность выбрать
  • Вы познакомитесь с инструкторами и узнаете все детали курса и специальности
  • Вы узнаете как эффективно искать работу от рекрутёров и гуру IT-рынка

Занятия проходят:

Телефон: