Профессия Frontend-разработчик

Бесплатная помощь в подборе профессии

Бесплатная помощь в подборе курса

Бесплатная помощь в подборе профессии

Бесплатная помощь в подборе курса

Бесплатная помощь в подборе профессии

Бесплатная помощь в подборе курса

Коротко о профессии

Кто такой Frontender?

Frontend разработчик верстает сайты и шаблоны для CMS, разрабатывает пользовательский интерфейс и внедряет в него скрипты, отвечающие за анимацию и логику на веб-страницах.

Знания и навыки

Изучив JavaScript вы научитесь создавать современные “живые” сайты, а знания HTML5&CSS3 дополнят их качественным адаптивным интерфейсом. Вы пройдёте все этапы Frontend-разработки и получите инструкции для развития и старта карьеры.

Перспективы после обучения

Каждому выпускнику профессии открывается возможность пройти гарантированную стажировку. Приобретённые навыки командной разработки и готовые кейсы для портфолио помогут начать карьеру с позиции “Junior Frontend Developer”.

Средняя зарплата по Москве и МО
для «Frontend Разработчик» 114 000 ₽/мес

Как стать Frontend разработчиком

Во время урока

Преподаватель объясняет урок, все его действия отображаются на экране.
Студенты задают вопросы и обсуждают материал в чате.

После урока

Студенты отправляют домашние задания на проверку.
Для тех, кто не смог присутствовать на уроке, каждое занятие записывается.

Общение и обратная связь

Каждый может оценить занятие, вместе мы делаем курсы ещё лучше.
Общаясь с одногруппниками, учиться программированию гораздо легче.

Тестирование

Проверить уровень своих знаний и навыков помогут тесты.
После успешного тестирования каждый студент получает сертификат.

Поддержка сообщества

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

Сертификат

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

Программа

HTML/CSS

Основы создания сайтов

1 месяц

8 Уроков

Подробнее

Урок 1. Основные понятия в веб-разработке

Что представляет собой веб-страница; виды сайтов; процесс разработки сайта; что такое гипертекст, теги и атрибуты; подготовка рабочего места; структура HTML-документа; основные теги оформления текста; простой пример HTML странички; пример сложной веб-страницы; горячие клавиши для перемещения по документам.

Урок 2. Основы языка разметки документов HTML

Спецсимволы; комментарии в HTML; гиперссылки; типы изображений для web; загрузка изображений на страницу; списки, формы и их элементы.

Урок 3. Основы языка оформления стилей документа CSS

Что такое CSS; синтаксис CSS; способы объявления CSS; селекторы (id, class, tag); селекторы атрибутов.; основные свойства стилей; вложенность; наследование и группирование свойств; проверка подключения файла стилей.

Урок 4. Псевдоклассы и псевдоэлементы, табличная вёрстка

Приоритеты применения стилей; псевдоклассы и псевдоэлементы; создание таблиц; объединение ячеек; вложенные таблицы; стилевое оформление таблиц.

Урок 5. Формирование блочной модели; блочная вёрстка

Основные теги для верстки (div и span); отступы элементов (margin и padding); обтекаемые элементы; позиционирование блоков.

Урок 6. Работа с макетом дизайна в формате PSD

Основные функции и знакомство с программой Photoshop; выделение основных частей макета; нарезка макета; вёрстка макета сайта при помощи блоков; вставка частей макета в вёрстку; установка плагина PerfectPixel.

Урок 7. Разметка сайта и знакомство с Bootstrap

Создание основной разметки сайт; применение overflow и clear в реальной вёрстке; заполнение разметки частями нарезанного макета; приёмы позиционирования элементов; знакомство и применение Bootstrap.

Урок 8. Стандарты web и вспомогательные инструменты

Загрузка проектов на сервер; проблема «кроссбраузерности»; стандарты HTML/CSS; будущее за стандартами HTML5 и CSS3; грамотная, универсальная вёрстка; знакомство с препроцессорами на примере LESS.

Вы научитесь

HTML, в том числе HTML5;

CSS, в том числе CSS3;

Верстать статические сайты;

Валидной, кроссбраузерной вёрстке;

Блочной вёрстке;

Выполнять базовые операции в Photoshop и GIMP;

Использовать препроцессоры LESS;

Использовать Bootstrap.

Свернуть

HTML5 и CSS3

Современные средства Web-разработки

1 месяц

8 Уроков

Подробнее

Урок 1. HTML5: Семантические элементы.

Обзор HTML5, Новые семантические элементы HTML5, Новый способ структурирования страниц. Семантика текстового уровня. Настройка редактора , практические примеры применения семантических тегов, для создания структуры сайта. Знакомство с плагинами ускоряющими вёрстку сайта.

Урок 2. Позиционирование элементов, Практическая вёрстка.

Позиционирование элементов, расположение элементов на странице (позиционирование элементов по вертикали, по горизонтали). Рассмотрим самые популярные css генераторы, какие они бывают, для чего применяют каждый из них.

Урок 3. HTML5 формы. Добавление Аудио и Видео на страницу.

Рассмотрим и подробно разберем на практических примерах данные особенности. Усовершенствование традиционных форм (добавление подсказок, фокусировка на элементе и т.д.). Проверка форм на ошибки заполнения. Новые типы элементов (адреса электронной почты, URL-адреса и т.д.). Добавим в наш проект видео и аудио информацию, посмотрим как все это реализуется на практике. Рассмотрим работу тэгов <VIDEO> <AUDIO>. Задание классов, разбор технологии БЭМ

Урок 4. Параметры CSS для фона. Использование SVG.

Создание множественного фона для сайта. Задание фоновых изображений для адаптивных сайтов. Создание градиентного фона для сайт. Знакомство со спрайтами и иконочными шрифтами. Модернизируем наш проект в соответствии с новыми возможностями CSS3. Добавим необходимые элементы и эффекты. Знакомство с форматом svg.

Урок 5. Работа с текстом. Границы в CSS3

Работа с шрифтами. Веб-шрифты GOOGLE. Размещение текста в несколько колонок. Рассмотрим механизмы представления текстовой информации: оформление, выравнивание, отступы. Переключаемые вкладки для создания меню.Рассмотрим основы Canvas. Рассмотрим работу с границами в CSS, способы создания рамок элементов. Создание прозрачных рамок, теней, скругленных углов, градиентов.

Урок 6. Эффекты перехода и трансформации CSS3.

Эффекты перехода. Применение трансформации. Поворот элементов при наведении на него. Создание анимации средствами в CSS3. Узнаем для чего нужна данная технология и где ее следует применять. Добавим анимацию для некоторых элементов нашего сайта.

Урок 7. Адаптивная вёрстка (Часть 1).

Рассмотрим понятие адаптивного дизайна. Для чего и в каких случаях применяется. Основы синтаксиса и примеры. Придадим дизайну современный вид.

Урок 8. CSS3 Углубленное изучение.SASS. Flexbox.

Рассмотрим новое свойство flex, для создания гибкой структуры внутренних блоков сайт. Сделаем финальный проект со всеми доработками и нововведениями представленными CSS3, С использованием одного из самых популярных препроцессоров SASS.

Вы научитесь

Знаниям и умениям применять на практике HTML5;

Использовать самые последние новшества CSS3;

Верстать статические сайты;

Использовать тени, скругленные углы блоков без использования изображений;

Создавать текстовые эффекты;

Использовать на своих сайтах нестандартные загружаемые шрифты

Определять поддерживаются ли возможности HTML5/CSS3 в браузере пользователя;

Использовать встроенные возможности браузера для воспроизведения аудио и видео на веб-страницах.

Свернуть

JavaScript. Уровень 1

Интерактивные веб-приложения

1 месяц

8 Уроков

Подробнее

Урок 1. Основы языка JavaScript

Синтаксис; структура кода; внешние скрипты и порядок их исполнения; переменные и типы данных; Hello world; современные стандарты.

Урок 2. Основные операторы JavaScript

Операторы и операнды; приоритет операций; условные операторы; функции; рекурсия; практикум; игра «Угадай число».

Урок 3. Циклы, массивы, структуры данных

Циклы в JavaScript; массивы в JavaScript; структуры данных; практикум; игра «Быки и коровы».

Урок 4. Объекты в JavaScript

Знакомство с понятием объектов; объекты в JavaScript; работа с объектами; перебор значений; практикум; игра «Квест».

Урок 5. Введение в DOM

Понятие DOM; DOM в JavaScript; манипуляции с DOM в JavaScript; практикум; игра «Квест 2.0».

Урок 6. Обработка событий в JavaScript

Понятие события; обработка нажатий; браузерные события; практикум; игра «Крестики-нолики».

Урок 7. Урок-практикум

Реализация игры «Змейка».

Урок 8. Анонимные функции, замыкания

Углублённое изучение работы функций; функции и функциональные выражения; анонимные функции; замыкания; действия браузера по умолчанию.

Вы научитесь

Разбираться в языке JavaScript и писать код, соответствующий стандартам;

Использовать инструменты разработки и отладку в браузере;

Управлять структурой страницы DOM;

Создавать и реагировать на различные события в браузере.

Свернуть

JavaScript. Уровень 2

Продвинутый курс

1 месяц

8 Уроков

Подробнее

Урок 1. ООП в JavaScript

Prototype; жизненные циклы объекта; прототипный и функциональный стиль: минусы и плюсы; наследование; встроенные классы.

Урок 2. AJAX

XMLHttpRequest; типы запросов; форматы JSON и XML.

Урок 3. Регулярные выражения в JavaScript

Паттерны и флаги; Regexp и String; квантификаторы; наборы и диапазоны.

Урок 4. Введение в jQuery

Селекторы; события; AJAX в jQuery; работа со стилями и анимация.

Урок 5. Взаимодействие компонентов страницы, практика

Соглашения и документация; разработка модулей.

Урок 6. jQuery UI и другие расширения jQuery

Виджеты; Поведения; дополнительная анимация; подключение и использование объекта Carousel.

Урок 7. Полезные библиотеки, сборщики и шаблонизаторы

Таск-менеджеры; сборщик Gulp.

Урок 8. Тестирование: куда дальше?

Типы тестирования; тестирование в JavaScript; Jasmine.js; дальнейшее развитие.

Вы научитесь

Объектно-ориентированной парадигме в JavaScript;

Писать Ajax-запросы;

Создавать графические интерактивные приложения;

Использовать библиотеку JQuery;

Использовать Gulp, Grunt.

Свернуть

Видео-курс: основы баз данных

Язык SQL

20 Уроков

Подробнее

Урок 1. Реляционные базы данных

Чем отличается БД от СУБД; какие базы данных называются реляционными; обзор современных СУБД.

Урок 2. Установка СУБД

Установка СУБД MySql и графического приложения Mysql Workbench.

Урок 3. Проектирование базы данных, нормальные формы

Проектирование данных в Excel; нормальные формы; первичный ключ.

Урок 4. SQL-команда CREATE

Создание таблиц в графическом интерфейсе MySql Workbench; команда CREATE; типы данных; работа в консоли.

Урок 5. SQL-команда INSERT

Заполнение таблиц данными с помощью графического интерфейса; команда INSERT; AUTO INCREMENT.

Урок 6. SQL-команды SELECT и WHERE

Получение и фильтрация данных с помощью SQL-команд SELECT и WHERE; проверка на NULL; фильтрация данных по нескольким условиям.

Урок 7. SQL-команды DISTINCT, ORDER BY, LIMIT

Получение и фильтрация данных с помощью SQL-команд DISTINCT и LIMIT; сортировка с помощью команды ORDER BY.

Урок 8. SQL-команды DELETE и UPDATE

Обновление и удаление данных с помощью SQL-команд DELETE и UPDATE; фильтрация данных с помощью WHERE IN.

Урок 9. Согласованность данных

Понятие согласованности или консистентности данных.

Урок 10. Внешний ключ

Понятие внешнего ключа и ограничений на значения столбцов; FOREIGN KEY CONSTRAINTS.

Урок 11. Создание таблиц с отношением “многие ко многим”

Добавление корзины в базу данных интернет-магазина.

Урок 12. Составной первичный ключ

Использование составного первичного ключа при проектировании таблицы с отношением “многие ко многим”.

Урок 13. Объединение данных из нескольких таблиц

Получение данных из нескольких взаимосвязанных таблиц; несостоятельность подхода с использованием нескольких SELECT-ов.

Урок 14. Оператор INNER JOIN

Объединение данных из нескольких таблиц с помощью оператора INNER JOIN.

Урок 15. Операторы LEFT JOIN, RIGHT JOIN

Объединение данных из нескольких таблиц с помощью операторов LEFT JOIN и RIGHT JOIN.

Урок 16. Оператор UNION

Объединение результатов нескольких SQL-запросов с помощью оператора UNION.

Урок 17. Агрегирующие функции

Агрегирующие функции COUNT, SUM, MIN, MAX.

Урок 18. Оператор GROUP BY

Группировка выбранного набора строк с использованием оператора GROUP BY.

Урок 19. Индексы

Фильтрация в GROUP BY с использованием HAVING; увеличение скорости выполнения запросов с использованием индексов.

Урок 20. Транзакции

Понятие транзакции; оператор TRANSACTION; требования ACID к транзакционной системе.

Вы научитесь

Проектировать базы данных;

Писать SQL-запросы;

Устанавливать и работать с СУБД MySql;

Использовать MySql Workbench.

Свернуть

%d0%90%d0%bd%d0%b3%d0%bb%d0%b8%d0%b8%cc%86%d1%81%d0%ba%d0%b8%d0%b8%cc%86 %d0%b4%d0%bb%d1%8f it

Английский для IT-специалистов

Видео-курс

10 Уроков

Подробнее

Урок 1. IT resume sample

Составляем резюме на английском.

Урок 2. Job interview: questions and answers

Проходим собеседование на английском.

Урок 3. Effective Teams

Говорим о командной работе и процессах на английском.

Урок 4. Workplace communication

Английский для общения по телефону и Skype.

Урок 5. Business e-mails

Ведём переписку на английском.

Урок 6. Requirement Specifications (SRS)

Читаем и составляем техническое задание на английском.

Урок 7. Stand-Up meetings

Становимся идеальным спикером.

Урок 8. Deadline

Выполняем работу в срок и по-английски.

Урок 9. Challenge

Описываем и решаем проблемы по-английски.

Урок 10. Start up

Рассказываем о своём проекте и представляем команду на английском.

Вы научитесь

Проходить собеседования и писать CV;

Обсуждать проекты и проводить переговоры;

Переписываться в чате, составлять тех. задания и писать деловые письма;

Понимать носителей языка и читать зарубежные блоги.

Свернуть

ReactJS

Профессиональная frontend-разработка

1 месяц

8 Уроков

Подробнее

Урок 1. Введение в ReactJS: современный Javascript

Знакомство с ReactJS; сравнение с другими технологиями; современный JS; что нового в ES6 и как это использовать; классы, наследования, модули rest/spread, параметры, промисы, модули.

Урок 2. Настройка среды разработки

Настройка и конфигурирование Webpack; определение структуры проекта; создание заглавной страницы проекта.

Урок 3. Первое приложение на ReactJS

Что же такое ReactJS и как с ним работать; JSX, ReactComponent, ReactDOM.render, Render function; создаём и отрисовываем первый компонент; добавляем Layout компонент; определяемся с набором компонентов нашего приложения; реализуем заготовки компонентов системы.

Урок 4. ReactJS под капотом

Virtual DOM; состояние компонентов; как задавать состояние компонента по умолчанию; как изменять состояние компонента; основные этапы жизненного цикла компонента; встраиваем стили в компоненты.

Урок 5. Взаимодействие в ReactJS

Как организуется взаимодействие компонентов; отрисовка и события в ReactJS; передача параметров в компоненты с помощью свойства props; связываем обработчики событий с методами; связываем обработчики событий с методами; как отрисовать несколько компонентов в рамках одного компонента (дочерние компоненты).

Урок 6. Роутинг в ReactJS приложении

Что такое роутинг; добавляем ReactRouter в наше приложение; основные возможности ReactRouter; организуем роутинг в нашем приложении; параметры роутинга.

Урок 7. Концепция Flux на примере использования Redux

Что такое Flux; FluxDispatcher; EventEmitter; Store; что такое Redux и для чего он нам нужен; Reducers; Redux EventEmitter и Store.

Урок 8. Знакомство с NodeJS, EpxressJS и MongoDB

Что такое NodeJS; что такое ExpressJS; что такое MongoDB; устанавливаем и настраиваем NodeJS; подключаем ExpressJS; организуем обработку входящих запросов при помощи ExpressJS Router; устанавливаем и настраиваем MongoDB; типизируем наши схемы, подключаем Mongoose.

Вы научитесь

Применять на практике ES6;

Настраивать сборку приложения при помощи Webpack;

Работать с библиотекой ReactJS;

Настраивать и применять роутинг в ReactJS-приложении;

Использовать концепцию Flux с применением библиотеки Redux;

Разбираться в реализации backend на примере использования NodeJS, ExpressJS и MongoDB.

Свернуть

Большинство начинающих программистов не имеют опыта разработки в команде, что является первой причиной отказа в трудоустройстве. Вторая причина - отсутствие портфолио. Гарантированная стажировка от GeekBrains - это 2 месяца командной разработки и полноценный кейс для портфолио. Выпускники проходят весь путь от зарождения идеи проекта до его реализации, учатся эффективно взаимодействовать с другими разработчиками и совместными усилиями выпускают готовый продукт.

Компании-партнёры GeekBrains берут выпускников на стажировку с возможностью трудоустройства. Условия везде свои: стажировка в офисе компании или удалённая работа. Ты начнешь карьеру в IT сразу после обучения, если успешно выполнишь тестовое задание и пройдешь собеседование.

В разделе “Карьера” есть проекты наших выпускников, участвовать в которых сможет любой студент GeekBrains, соответствующий требованиям. Если ты хочешь попробовать себя в роли стартапера, найди единомышленников и преврати свою идею в успешный проект!

Преподаватели

Наша команда - это более 100 профессиональных практикующих программистов, каждый из которых обладает отличным профильным образованием, длительным стажем работы по специальности, большим опытом разработки сервисов и приложений для крупных компаний.

3d76f8851020b8fada3788f47b93d725d40f9b2c

Елена Пяташова

5.0/5

2856aeb082f83d051ac6ba802210162e799560d0

Таша Соколова

5.0/5

52c16618590e6e69acb31a76014af48996e4698e

Сергей Сизов

4.9/5

0bd912589fa86d8213c7b6972253bf1be8a4b596

Екатерина Рудыка

4.9/5

Алексей Степченко

4.9/5

Александр Пряхин

4.9/5

Adaf3006a95cf1f2526daf87de88c2b6a94a8f30

Александр Фисунов

4.9/5

Ab86ba6c78f9b379fb9a94ef91469c607bf6e3b4

Иван Овчинников

4.9/5

091c6bf0ab8926698039ea2a9529dd8ccd4f6779

Эдуард Арсентьев

4.9/5

Павел Тарасов

4.9/5

E8e12c5cdc76c731c04c2f6d0c56859a3c36771e

Алексей Кадочников

4.9/5

Александр Павлють

4.9/5

Отзывы

Мы просим выпускников оценивать преподавателей и учебные программы по пятибалльной шкале для того, чтобы совершенствовать качество обучения. Абсолютно все отзывы публикуются без изменений и без модерации.

Средние показатели на основе всех 4197 оценок

4.6

Преподаватели

4.0

Программа

Распределение оценок

72%

20%

Подарки

Программистам без английского никуда, поэтому мы дарим всем студентам

Подведём итоги

Ваше резюме после обучения

Брендан Эйх

Frontend-разработчик

Желаемая зарплата

114 000 ₽/мес

Опыт работы

Менее 1 года

Владение технологиями
Ключевые навыки
Личные качества

HTML5

CSS3

JavaScript

Twitter Bootstrap

Less

GIT

JQuery

Ajax

Gulp

Grunt

Webpack

ReactJS

Вёрстка сайтов с использованием HTML5 и CSS3;

Разработка с применением Twitter Bootstrap;

Умение создавать интерактивные страницы на JavaScript;

Применение IDE, полезных приёмов и средств автопроверки кода;

Использование инструментов разработки и отладки в браузере;

Делегирование событий и управление структурой DOM;

Знания внутреннего устройства интерпретатора JavaScript;

Использование встроенных возможностей браузера для воспроизведения аудио и видео на веб-страницах;

Контроль процесса выпуска различных версий программ (GIT);

Опыт написания Ajax-запросов;

Создание графических интерактивных приложений;

Использование библиотеки JQuery;

Разработка профессионального frontend-а на ReactJS, Flux, Redux;

Навыки работы с Gulp, Grunt, Webpack, Mustache и Underscore.

Пунктуальность

Планирование реальных сроков вёрстки и их соблюдение

Аккуратность

Способность качественно выполнять кропотливую и ответственную работу

Работа в команде

Опыт эффективного взаимодействия с командой разработчиков

Личная эффективность

Умение быстро решать поставленные задачи как в работе, так и в личной жизни

Часто задаваемые вопросы

Как проходит обучение?

Уроки проходят в формате Online-трансляций, несколько раз в неделю в вечернее время по мск. Преподаватель объясняет темы, все его действия отображаются на экране. Студенты задают вопросы и обсуждают материал в чате. В конце каждого урока студенты получают домашние задания. Преподаватель оценивает их и обсуждает плюсы и минусы на следующем занятии.

Что делать, если я не могу учиться Online?

Для тех, кто не смог вовремя присутствовать на уроке, мы записываем каждое занятие. Видеозаписи всегда доступны в разделе обучения. Также к каждому уроку мы разработали методички, с помощью которых можно лучше подготовиться к занятиям и получить дополнительные знания.

Можно ли делать перерывы в обучении?

Между курсами можно делать перерывы и регулировать интенсивность своего развития по мере усвоения знаний. Мы рекомендуем не записываться на все курсы сразу, а проходить их последовательно и работать на результат.

Кто преподаёт в GeekBrains?

Преподавать в GeekBrains могут только специалисты с большим опытом реализации проектов. Мы проводим жёсткий отбор кандидатов с помощью программ аттестации и внутреннего обучения. Студенты оценивают уровень преподавателя и качество программы по пятибалльной шкале. Таким образом, мы улучшаем образовательный процесс ежедневно.

Кто такие наставники?

Наставником может стать любой студент GeekBrains, который пройдёт нашу систему тестирования. Основная задача наставников - помогать студентам осваивать профессиональные навыки, отвечать на вопросы, касающиеся домашних заданий и учебных проектов.

Помогаете ли вы с трудоустройством?

В программу обучения входит гарантированная стажировка, которая даёт компетенции, необходимые для старта карьеры. Основная задача - получить опыт командной разработки. Также выпускники курсов могут стажироваться в компаниях-партнёрах, которые предлагают различные варианты трудоустройства в разделе “Карьера”.

Что делать, если у меня проблема или срочный вопрос?

Если вы являетесь студентом платных курсов и у вас возникли вопросы, связанные с образовательным процессом, свяжитесь с нами: sales@geekbrains.ru или 8-800-700-68-41 (звонок бесплатный). По остальным вопросам пишите нам на support@geekbrains.ru.

Какой требуется опыт для обучения?

Наши образовательные программы ориентированы на тех, кто хочет с нуля освоить профессиональные навыки. Для обучения начальной подготовки или базовых знаний не требуется.

Начало обучения

8 августа

6 сентября

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

Вт, Пт в 20:00 (GMT+03:00) Москва

Срок обучения

7 месяцев

Возможна банковская рассрочка без первоначального взноса и переплат

7 141 ₽/мес

Cвободно 13 мест

Бесплатный звонок по России 8 800 700-68-41

Отправляя заявку, Вы принимаете условия договора-оферты.

Сертификация

Мы проводим обучение на основании государственной лицензии № 038188. По результатам успешного завершения обучения выдаем выпускникам свидетельство установленного образца о завершении курсов и именной электронный сертификат на портале GeekBrains.