Логотип Glo Academy

Обучаем веб-разработке с 2016 года
Уже больше 5 000 выпускников

Фронтенд-разработчик онлайн-курс для новичков
с опытом до одного года

Научитесь разрабатывать современные сайты и веб-приложения с нуля. 14 недель, 7 проектов в портфолио и подготовка к трудоустройству или старту на фрилансе

Записаться на курс
  • Подходит для тех, кто ничего не знает о программировании и разработке сайтов
  • Результат уже в конце первой недели обучения — свёрстанная страничка
  • Для обучения нужен простой ноутбук или компьютер с доступом в интернет
Старт обучения

12 октября

До повышения цены

Работодатели каждый день ищут фронтенд-разработчиков — это ваша возможность

Это скриншот только из одной фриланс-биржи: 
4 проекта за последние 20 минут. Спрос на вёрстку и разработку сайтов есть. Это не значит, что все заказы будут ваши, жизнь так не работает.

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

Студии готовы платить от 30 000 руб. верстальщикам, которые готовы работать и развиваться. Конкретная сумма зависит от работодателя, региона и ваших договорённостей.

А если идти фронтенд-разработчиком, то обычно ставка начинается от 50 000 руб. Работодатели ищут качественных новичков

Как можно развиваться во фронтенд-разработке

После обучения студенты обычно выбирают один из трех вариантов развития

Работа в студии

Заработок от 50 000 рублей на старте

  • Занимаетесь вёрсткой, администрированием проектов компании
  • График и геолокацию работы определяет работодатель
  • Оплата стабильная, фиксированная. Идеально для смены профессии и стабильного заработка

Работа на фрилансе

Заработок
30 000 — 90 000

  • Ищете клиентов на
    фриланс-биржах или в соцсетях и выполняете их проекты
  • Можете работать из любой точки мира, где есть интернет
  • Зарабатываете столько, сколько отработаете. Вы сами отвечаете за результат

Своя команда

Заработок
70 000 — 200 000 рублей

  • Вы управляете небольшой командой верстальщиков, контролируете работу и занимаетесь продажами
  • Можете работать из любой точки мира, где есть интернет
  • Зарабатываете больше за счет большего количества проектов. Нужно брать риски на себя

После обучения можно попасть на работу в команду кураторов Glo Academy

+

Учим от простого к сложному. Первый блок — разработка сайтов

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

Последнее обновление материалов и уроков: август 2021

Уровень 1: Разработка сайтов. Подготовительный модуль. Отрасль

Тайм-менеджмент для фрилансера

Содержание урока
  • Эффективность обучения
  • Техника помодоро
Результат

Понимание правильного подхода к обучению

Дополнительные материалы
  • Схема - Техники Помодоро
  • Схема - Что учить новичку
  • Схема - Как учиться эффективно

Какие бывают сайты

Содержание урока
  • Виды сайтов
  • Исследование интернета
Результат

Понимание терминов: лендинг, квиз, интернет-магазин, корпоративный сайт, сайт-блог, информационный сайт, веб приложение.

Дополнительные материалы
  • Схема из видеоурока

Редактор кода

Содержание урока
  • Настройка редактора кода
  • Плагины, которые нам пригодятся для старта
Результат

Настроенное рабочее пространоство: редактор кода VS Code

Дополнительные материалы
  • Секретные хаки VS Code
  • 10 возможностей VS Code для ускорения
  • Статья с комбинациями клавиш VS code

Результат модуля

Полностью готовое к курсу рабочее место и чаты с ламповой атмосферой. Еще понимание, какие спецы нужны при разработке сайта.

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

Базовый модуль

Основы HTML

Содержание урока
  • Структура HTML5-документа.
  • Элементы HTML разметки. Теги.
  • Виды тегов. Парные/непарные теги.
  • Служебные «невидимые» теги.
  • Видимые теги для работы.
  • Атрибуты тегов.
  • Атрибуты специального назначения.
  • Атрибуты общего назначения.
  • Текстовые теги. Преобразование текста.
  • Теги картинок и ссылок.
Результат

Знания базовых основ языка форматирования документа HTML

Дополнительные материалы
  • Материалы для домашнего задания
  • Плейлист HTML для самых маленьких
  • Статьи + справочник
  • Подробный справочник на русском
  • Справочник MDN
  • Абсолютные и относительные пути
  • Документация emmet
  • Cправочник на английском
  • Правила написания HTML

Основы CSS

Содержание урока
  • Варианты подключения таблиц стилей.
  • Абсолютный и относительный путь.
  • Селекторы CSS (id, class, вложенные элементы).
  • Наследование и группирование свойств.
  • Приоритеты применения стилей.
  • Работа с текстом в CSS.
  • Цвета в CSS.
Результат

Знания базовых основ языка оформления документа CSS

Дополнительные материалы
  • Материалы для домашнего задания
  • Наследование, каскадирование, специфичность
  • Все сокращения Emmet для HTML и CSS
  • Статьи + справочник
  • Подробный справочник на русском
  • Справочник MDN
  • Cправочник на английском

Как работать с дизайн-макетами

Содержание урока
  • В каком формате дизайнеры передают макет
  • — PSD или Adobe XD
  • — Avocode, Zeplin или Figma
  • Навык работы с дизайн-макетом для разработчика
  • Работа со слоями, папками
  • Фотошоп онлайн
  • Графика для web (gif, png, jpeg, svg)
  • Avocode для быстрой работы с графикой
Результат

Навык работы с современной графикой и дизайн-макетами

Дополнительные материалы
  • Материалы для домашнего задания
  • Сайт программы Figma
  • Программа для работы с макетами Avocode
  • Бесплатный аналог Avocode
  • Сайт Фотошоп

Блочная модель CSS

Содержание урока
  • Строчные и блочные элементы
  • Поля, границы, отступы, содержимое
  • Padding, margin, border, content
Результат

Понимание блочной модели CSS

Дополнительные материалы
  • Материалы для домашнего задания
  • Схлопывание вертикальных margin
  • Фильтры по блочным и строчным элементам
  • Схлопывание вертикальных margin
  • Статья про отступы Margin и Padding

Хостинг. Домен. Гит.

Содержание урока
  • Как работает интернет
  • Что такое доменное имя сайта
  • Как опубликовать сайт на хостинге
  • Как привязать домен к хостингу
  • Как давать ссылку на свой сайт
  • Что такое SSL сертификат и как его выпустить
  • Установка Git и Git Bash
  • Регистрация в Github
  • Создание репозитория
  • Основные команды Git: add, push, commit
  • Работа с гитом через интерфейс браузера и через консоль
Результат

Работа с хостингом и публикация сайта.

Дополнительные материалы
  • Хостинг из видеоурока
  • Разница между HTTP и HTTPS

Flexbox CSS

Содержание урока
  • Свойство display: flex
  • Выравнивание элементов по горизонтали justify-content
  • Выравнивание элементов по вертикали align-items
  • Направление главной оси flex-direction
  • Многострочность элементов flex-wrap
  • Многострочное выравнивание align-content
  • Порядок отображения элементов order
  • Базовая ширина элемента flex-basis
  • Растяжение элементов flex-grow
  • Сужение элементов flex-shrink
  • Выравнивание отдельных элементов align-self
Результат

Верстка промо-сайта книги на Flexbox CSS

Дополнительные материалы
  • Описание flex свойств
  • Полное руководство flexbox
  • Основные понятия flexbox
  • Изучение Flexbox на MDN

Практика верстки макета

Содержание урока
  • Знакомство с Figma на примере макета
  • Разница между normalize и reset
  • Практический урок по верстке макета
Результат

Навык владения версткой

Дополнительные материалы
  • Библиотека стилей Normalize

Шрифты на сайте

Содержание урока
  • Узнаем шрифты из макета
  • Подключение шрифтов через Google Fonts
  • Подключение нестандартных шрифтов
  • Параметры для шрифтов в CSS: font-weight, font-style, font-display, font-family, font-size
Результат

Умение работать со шрифтами

Дополнительные материалы
  • Конвертер шрифтов Transfonter
  • Конвертер шрифтов
  • Веб шрифты
  • Шрифты от Google
  • Свойство font-display
  • Свойство font-display: swap
  • Свойство font-display

Адаптивная верстка

Содержание урока
  • Знакомство с адаптивом, медаизапросами
  • Своя сетка на em
  • Практический урок по верстке макета
Результат

Практика по адаптивной верстки

Дополнительные материалы
  • Подробная статья про CSS3 Media

Практика верстки: доступность, переполняемость, кроссбраузерность

Содержание урока
  • Доступность
  • Переполняемость
  • Кроссбраузерность
  • Практика верстки
Результат

Навык владения версткой

Дополнительные материалы
  • Код из видеоурока

Позиционирование

Содержание урока
  • Виды позиционирования
  • — Абсолютное
  • — Релятивное
  • — Фиксированное
  • — Липкое
  • Правила позиционирования
  • Принцип карточной колоды
  • z-index, слои в верстке
Результат

Понимание модели работы с css position

Дополнительные материалы
  • Подробно про позиционирование
  • Полезно про позиционирование

Результат модуля

В этом модуле разбираем базовые основы. Тут мы работаем с графикой, языками HTML, CSS и jQuery. После этого модуля вы будете уметь делать несложную верстку и добавлять в нее интерактив.

Полноценная практика

БЭМ-нейминг

Содержание урока
  • Введение в БЭМ
  • Что такое блок, его свойства
  • Элементы — примеры
  • Модификаторы состояний
  • Соглашение по именованию
  • Файловая структура
  • Проверка на правильную структуру бэм-дерева
  • Практика над новым макетом
Результат

Навык работы с неймингом БЭМ

Дополнительные материалы
  • Материалы для домашнего задания
  • Полезные статьи и видео по БЭМ
  • Сайт БЭМ
  • Статья: БЭМ для начинающих
  • Проверка кода на БЭМ

GULP

Содержание урока
  • Что такое Gulp?
  • Установка и настройка файла gulp.js
  • Адаптируем наш проект для работы с Gulp
  • Практика нового макета
Результат

Навык работы с неймингом БЭМ

Дополнительные материалы
  • Материалы для домашнего задания

CSS препроцессоры. Миксины.

Содержание урока
  • Чем полезны препроцессоры
  • Виды препроцессоров
  • Миксины, переменные, функции
  • Переводим наш макет на SCSS
  • Переводим наш макет на SCSS
  • Меняем адаптив с сетки на em на медиазапрос на vw
  • Отрабатываем на практике наш макет
Результат

Навык работы с препроцессорами CSS

Дополнительные материалы
  • Материалы для домашнего задания
  • Схема из видеоурока
  • Документация SCSS на русском
  • Документация SCSS на английском

Практика: Продолжаем работу с макетом

Содержание урока
  • Знакомство с “Pixel Perfect”
  • Продолжаем работу над версткой макета
Результат

Навык работы с Figma

Дополнительные материалы
  • Материалы для домашнего задания

CSS Grid - теория

Содержание урока
  • Рассмотрим теоретическую часть CSS Grid
  • gap
  • grid-template-*
  • grid-auto-*
  • auto-fill, auto-fit, minmax(), repeat()
  • Grid line, grid cell, grid track
Результат

Навык работы с CSS Grid

CSS Grid - практика

Содержание урока
  • Применим знания на практике
  • Сверстаем еще один блока макета
Результат

Навык работы с CSS Grid

Псевдоэлементы. Псевдоклассы. Пишем свой сброс и нормализацию стилей

Содержание урока
  • Псевдоэлементы
  • Псевдоклассы
  • Сбрасываем и нормализуем стили, уходим от normalize
  • Продолжаем работу с макетом
Результат

Навык работы с псевдоклассы и псевдоэлементами CSS

Знакомство с JavaScript

Содержание урока
  • Разбираем синтаксис и правила написания кода
  • Как подключить js код к документу html
  • На примере выпадающего списка на практике разбираем некоторые конструкции js для работы с DOM
Результат

Навык работы с JavaScript

Дополнительные материалы
  • Современный онлайн-учебник по JavaScript
  • Справочник JavaScript

Карты для сайта

Содержание урока
  • Карты от Google
  • Конструктор карт от Яндекс
  • Yandex Maps API
  • Применяем в нашей верстке полученные знания
Результат

Навык работы с картами на сайте

Дополнительные материалы
  • Ресурс для определения координат на yandex-карте
  • Работа с меткой на yandex-карте
  • Работа с описанием метки ("балун")

Мобильное меню

Содержание урока
  • Как скрыть элементы html c помощью css
  • Стилизация мобильного меню
  • Продолжаем работу с нашим макетом
Результат

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

Модальное окно

Содержание урока
  • Практика верстки модальных окон
  • Пишем скрипт для работы с модальным окном
Результат

Навык работы с модальным окном

Слайдеры на сайте

Содержание урока
  • Знакомство с Swiper-Слайдером
  • Делаем слайдер в нашем макете
Результат

Навык работы с модальным окном

Стилизация элементов формы

Содержание урока
  • Рассмотрим на примере формы как работать с input, checkbox (radiobutton), button, form
Результат

Навык работы с модальным окном

Отправка писем PHP

Содержание урока
  • Что такое PHP
  • Open Server Windows
  • MAMP для Mac OS
  • Базовый PHP
  • Отправка писем через PHP
Результат

Навык работы с PHP

Дополнительные материалы
  • Документация PHP
  • Сайт MAMP
  • Сайт Open Server
  • Инструкция к PHPMailer

Анимация на CSS3

Содержание урока
  • Ключевые кадры анимации
  • Название анимации, длительность, задержка и т.д.
  • Временная функция анимации
  • Множественные анимации
    Keyframes: пишем покадровую анимацию
  • Подключение анимации animate.css
  • Срабатывание анимации при скролле страницы
Результат

Умение добавлять анимацию к элементам сайта

Дополнительные материалы
  • Статья про CSS3 анимацию
  • Статья про CSS3 трансформации
  • Статья про CSS3 трансформации 3D
  • Библиотека Animations on scroll

Знакомство с jQuery

Содержание урока
  • Что такое jQuery
  • Подключение к сайту
  • Пример работы скриптов
Результат

Умение оптимизировать сайты

Дополнительные материалы
  • Материалы для практики

Валидация форм

Содержание урока
  • Что такое валидация?
  • Форматы валидации?
  • Реализация валидации на формах из макета
Результат

Умение настраивать валидацию форм

Дополнительные материалы
  • Материалы для практики

Оптимизация скорости сайта

Содержание урока
  • Практика оптимизации верстки для Google Page Speed
Результат

Умение оптимизировать сайты

Дополнительные материалы
  • Материалы для практики

Простая админка для лендинга

Содержание урока
  • Практический урок по работе с Textolite
Результат

Навык работы с Textolite

Дополнительные материалы
  • Сайт Textolite

Работа с изображениями

Содержание урока
  • Практический урок по оптимизации изображений
  • Svg, спрайты, picture
Результат

Навык работы с изображениями

Дополнительные материалы
  • Генератор SVG-спрайтов
  • Оптимизация под Retina
  • Тег picture MDN

Wordpress

Содержание урока
  • Что такое Wordpress
  • Практика работы с Wordpress
Результат

Настройка админпанели для верстки с помощью Wordpress

Дополнительные материалы
  • Сайт о Wordpress на русском
  • Сайт Wordpress

Результат модуля

Применяем все полученные знания сразу на практике. Верстаем настоящий сайт. Учимся, сразу набивая руку и получая нужные навыки еще во время обучения.

Первые деньги на веб-разработке

Как считать стоимость своей работы на примере

Содержание урока
  • Практический урок расчету стоимости своей работы
Результат

Навык подсчета стоимости проекта

Дополнительные материалы
  • Таблица расчета стоимости верстки
  • Схема из видеоурока

Развитие себя как специалиста

Содержание урока
  • Какие навыки стоит прокачивать в 2019-2020 году.
  • Области роста для веб-разработчика
  • Сценарии развития: студия и фриланс (подробно)
  • Как оформлять свое портфолио, где нужно быть зарегистрированным
  • БлогБастер. Почему нужно вести блог. Где это лучше делать.
  • YouTube, behance, dribbble - источники заказов
  • Фриланс-биржи - оформление профиля
  • Как оформить портфолио
  • Что значит «Я до тебя доберусь»
  • Ваша страница в соц сетях - это тоже портфолио
  • Нужен ли свой сайт. Какой он должен быть?
  • Где еще разместить свои работы. Где не нужно?
  • Примеры хорошо оформленных портфолио
  • Фейковые работы? Зачем?

Поиск заказчика

Содержание урока
  • Как позвонить незнакомцу и подружиться
  • Работа с агентствами.
  • Сценарий разговора с клиентом из Авито
  • Зачем не нужно продавать в лоб
  • Уводим клиента на встречу
  • Скрипт разговора на встрече. Какие материалы брать с собой
  • Партнерские продажи
  • Кто такие «Партнеры»
  • Кому надо написать, чтобы дали заказ
  • Таблица исполнителей. Как заполнять, зачем нужна.
  • Как завести промоутеров и кто это в нашем случае
  • При чем тут ИП?

Результат модуля

Портфолио, подготовленное и опубликованное на всех необходимых площадках. Грамотно оформленная страница в социальных сетях. Первые заработанные деньги.

Второй блок — JavaScript и полноценный фронтенд. Разбираем на простых примерах, чтобы понял каждый

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

Последнее обновление материалов и уроков: август 2021

Основы JavaScript

Введение в язык, подключение javascript. Правила написания кода.                          Основы работы с Git.

Содержание урока
  • Варианты подключения javascript
  • Правила написания кода
  • Основы работы с Git
Результат

Понимание правильного написания кода и основы работы с Git

Дополнительные материалы
  • Статья - Правильный выбор имени переменной
  • Статья - Объект консоль
  • Статья - Интерактивный тур по git

Типы данных, операторы, методы и свойства

Содержание урока
  • typeof
  • Тип Boolean
  • Тип Number
  • Тип String
Результат

Понимание типов данных и перевод из одного типа в другой.

Дополнительные материалы
  • Типы данных
  • Выражения и операторы
  • Условный (тернарный) оператор

Динамическая типизация данных в Javascript. Условия, ветвления.

Содержание урока
  • Методы взаимодействия с пользователем
  • Преобразование типов данных
Результат

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

Дополнительные материалы
  • Неявное преобразование типов данных
  • Преобразование типов для примитивов
  • Приведение типов в JS - Магия или простые правила?

Функции, анонимные функции, callback - функции, чистые функции.

Содержание урока
  • Виды функций
  • Чистые функции
Результат

Понимание функций. Пишем первые функции, используя разные виды функций.

Дополнительные материалы
  • Функции
  • Callback функции

Циклы. Рекурсия.

Содержание урока
  • Рекурсия 
  • Цикл While
  • Цикл Do While 
  • Цикл For
Результат

Понимание работы циклов. Цикл с пред и пост условием. Работа с рекурсией.

Дополнительные материалы
  • Как работает рекурсия

Функции. Область видимости и замыкание.

Содержание урока
  • Область видимости
  • Замыкание
Результат

Понимание, что такое область видимости. Работа с замыканием.

Дополнительные материалы
  • О замыкании
  • Область видимости и замыкания

Знакомимся с объектами и массивами,  методы переборов и псевдомассивы.

Содержание урока
  • Альтернативный способ обращения к свойствам obj
  • Массивы
  • Методы для работы с массивами
  • Псевдомассивы
Результат

Понимание, что такое массивы и объекты.

Дополнительные материалы
  • Работа с объектами
  • Методы для работы с объектами
  • Методы и свойства массивов

Подготовим наш проект для работы со страницей.

Содержание урока
  • Подготовка верстки к работе
Результат

Приготовим верстку и начнем добавлять интерактив

Результат модуля

Изучите основы JavaScript, необходимы чтобы двигаться дальше. Узнаете как строится архитектура программы используя объектно ориентированное программирование. Придет понимание как работает JavaScript будете готовы к  изучать API браузера и ООП.

ООП, JavaScript на практике

Доступ к элементам на странице DOM (часть 1). Отладка кода

Содержание урока
  • Доступ к элементам на странице
  • Отладка кода в Dev tools
Результат

Научимся получать элементы на странице и работать с ними. Разберемся, как дебажить код.

Дополнительные материалы
  • Дерево DOM
  • Отладка кода

Работа с DOM, работа с элементами DOM  (часть 2)

Содержание урока
  • Методы вставки элементов на странице
  • Добавление классов при помощи JavaScript
Результат

Продолжаем работать со страницей. Добавление элементов на страницу. Добавление классов при помощи JavaScript.

Дополнительные материалы
  • Изменения документа (LearnJS)
  • DocumentFragment
  • Используем DOM как Pro

Загрузка документа, События в JS, обработчики событий и особенности их работы, события мыши и клавиатуры.

Содержание урока
  • Стандартный слушатель addEventListener
  • Удаление слушателя по условию
  • Удаление слушателя по условию
  • События при работы с формами (input)
  • Метод event.preventDefault()
  • Метод отмены правого клика на странице
  • Всплытие - Перехват
Результат

Понимание работы событий в JavaScript

Дополнительные материалы
  • EventTarget.addEventListener()
  • Браузерные события
  • События изменение
  • Всплытие - Перехват
  • Создание и вызов событий

Storage. localStorage, sessionStorage, cookie

Содержание урока
  • Storage
  • LocalStorage
  • SessionStorage
  • Cookie
Результат

Понимание работы стореджей и куки.

Дополнительные материалы
  • Демка LocalStorage
  • Web Storage API
  • Cookie Learn JS
  • Cookie
  • Json

Контекст вызова - this

Содержание урока
  • Стек вызова (call stack
  • Привязка по умолчанию
  • Неявная привязка
  • Явная привязка apply() и call()
  • Жесткая привязка
  • Явная привязка bind()
  • Пример из нашего приложения
Результат

Понимание этого страшного this.

Дополнительные материалы
  • Как работает this
  • Bind, Call и Apply
  • Контекст выполнения и стек вызовов в JavaScript

ООП - Наследование, прототипы, конструкторы и классы

Содержание урока
  • Понятие ООП
  • Понятие прототип
  • Создание объекта из прототипа
  • Функция-конструктор
  • Классы ООП
Результат

Понимание ООП в JavaScript

Дополнительные материалы
  • ООП в прототипном стиле
  • GetComputedStyle, cssText

Особенности современного стандарта ES6. Шаблонные строки,интерполяция, Стрелочные функции, Геттеры, Сеттеры и Классы

Содержание урока
  • Особенности современного стандарта ES6 Интерполяция. Стрелочные функции
  • DefineProperty, Геттеры, Сеттеры
  • Классы ES6
Результат

Понимание ES6. Переход на новый синтаксис.

Дополнительные материалы
  • DefineProperty
  • ES6 КЛАССЫ
  • Поля классов LEARNJS
  • Поля классов MDN

ООП ES6+. Rest, spread, Деструктуризация, Коллекции Map и Set

Содержание урока
  • Rest, spread, Деструктуризация
  • Коллекции Map и Set
Результат

Понимание новых возможностей ES6.

Дополнительные материалы
  • ES6: Операторы Spread и Rest
  • EcmaScript 10
  • ES6 Features
  • Set, Map, WeekSet, WeekMap

Способы перебора массивов

Содержание урока
  • Метод map
  • Метод filter
  • Метод some
  • Метод every
  • Метод every
  • Метод reduce
Результат

Понимание способов перебора массивов

Дополнительные материалы
  • Тест - Язык JavaScript
  • Тест - DOM, Работа со страницей

Результат модуля

Изучишь ООП, Написанный и полностью готовый таймер для сайта на JS. Ты сможешь манипулировать содержимым страницы браузера, писать анимации, наконец-то поймешь, что такое этот this.

Углубленное изучение JavaScript. Современные стандарты и дополнительные технологии

Настраиваем сборщик Webpack. Модульный JavaScript

Содержание урока
  • Модули в JS
  • Установка Webpack
  • Настройка Webpack
Результат

Настройка Webpack для применения в модульной разработке.

Дополнительные материалы
  • Модули ES6
  • Еще о Модулях
  • Топчик о модулях
  • Browserify
  • Webpack
  • Babel

Скрипты и время выполнения. setTimeout, setInterval и requestAnimationFrame. Объект Date​. Пишем таймер

Содержание урока
  • SetTimeout
  • SetInterval
  • ClearTimeout и clearInterval
  • Простая анимация
  • requestAnimationFrame()
  • Класс Date()
Результат

Понимание таймаутов и интервалов. Написание собственного таймера.

Дополнительные материалы
  • requestAnimationFrame
  • RAF

Параметры документа, окна и работа с ними. Пишем Меню и Модальное окно

Содержание урока
  • Объект screen
  • Объект documentElement
  • Работа с элементами на странице
  • Скрипт раскрытия блока с прокруткой во всю ширину
  • ScrollTop и scrollLeft
  • ScrollBy()
  • ScrollTo()
  • Получение координат элемента на странице getBoundingClientRect()
Результат

Навык работы со страницей. Написание меню и модального окна.

Дополнительные материалы
  • Визуальное представление свойств HTML элемента
  • Свойство innerWidth

Делегирование. Пишем Табы

Содержание урока
  • Пример обработчика без делегирования
  • Чем плох обработчик без делегирования
  • Делегирование
  • Практика - пишем табы
Результат

Понимание делегирование. Написание собственных табов

Дополнительные материалы
  • Делегирование статья
  • Делегирование LearnJS

Пишем Слайдер (делегирование)

Содержание урока
  • Написание собственного слайдера
Результат

Понимание, как работает слайдер. Написание собственного слайдера.

Практика ООП, гараж с машинами в стиле NFS

Содержание урока
  • Практика ООП
Результат

Практика ООП. Работа в портфолио.

Работа с атрибутами, Дата Атрибуты. Регулярные выражения

Содержание урока
  • Работа с атрибутами
  • Работа с классами
  • Data атрибуты
  • Data атрибуты в скрипте
  • Проверка на наличие в строке
  • Проверка на начало строки
  • Метод match()
  • Поиск нескольких вариантов / группировка
  • Метод replace()
  • Метод search()
  • Регулярное выражение для email
  • Регулярное выражение для phone number
  • Метод split()
  • Работа с input на практике
  • Валидация
Результат

Навык работы с регулярными выражениями.

Дополнительные материалы
  • HTML атрибуты
  • Сервис для проверки регулярных выражений
  • Сервис для визуализации регулярок
  • Подробная статья про регулярные выражения

Работа с формами и валидация

Содержание урока
  • Практика - написание валидатора
Результат

Понимание валидации. Повторение работы с регулярными выражениями.

Дополнительные материалы
  • Формы Learn JavaScript
  • валидация формы

Работа с JSON, AJAX. Получение и отправка данных на сервер

Содержание урока
  • Работа с JSON, AJAX. Получение и отправка данных на сервер
  • Установка и настройка Open Server
  • Практика - получение и отправка данных на сервер
Результат

Получение навыка работы с сервером. Отправка и получение данных.

Дополнительные материалы
  • JSON
  • AJAX
  • Заголовки HTTP
  • FormData
  • Скачать OpenServer
  • Скачать Wamp (windows)
  • Скачать Xampp (любая ОS)
  • Скачать Mamp (Windows, macOS)

try...catch - перехват ошибок

Содержание урока
  • Работа с перехватом ошибок
Результат

Понимание, как обрабатывать ошибки и исключить поломки приложения.

Дополнительные материалы
  • Статья - перехват ошибок

Асинхронный JS. Promise. Контекст выполнения, асинхронное выполнение, стек вызовов и event loop.

Содержание урока
  • Контекст выполнения, асинхронное выполнение, стек вызовов и event loop
  • Promise. Теория
  • Promise. Практика
Результат

Понимание асинхронности в JavaScript.

Дополнительные материалы
  • Как работает JavaScript
  • Jsonplaceholder для практики
  • Промисы на примере бургер-вечеринки
  • Что за чертовщина такая event loop?

Подробно про Fetch API

Содержание урока
  • Осуществление запросов с сервера через fetch()
  • Фильтр значений throw
  • Объект response
  • Объект настроек fetch()
  • Отправка данных через Promise
  • Отправка данных через fetch()
Результат

Еще один метод отправки/получения данных.

Дополнительные материалы
  • Fetch MDN
  • Руководство по fetch API

Результат модуля

Готовый скрипт - обработчик формы обратной связи. Постигнешь асинхронный JavaScript, Promise, Fetch Узнаешь последние тренды JavaScript. Изучишь современные технологии сборки проектов. Научишься делать свой код кроссбраузерным.

Первые деньги на веб-разработке

Как считать стоимость своей работы на примере

Содержание урока
  • Практический урок расчету стоимости своей работы
Результат

Навык подсчета стоимости проекта

Дополнительные материалы
  • Таблица расчета стоимости верстки
  • Схема из видеоурока

Развитие себя как специалиста

Содержание урока
  • Какие навыки стоит прокачивать в 2019-2020 году.
  • Области роста для веб-разработчика
  • Сценарии развития: студия и фриланс (подробно)
  • Как оформлять свое портфолио, где нужно быть зарегистрированным
  • БлогБастер. Почему нужно вести блог. Где это лучше делать.
  • YouTube, behance, dribbble - источники заказов
  • Фриланс-биржи - оформление профиля
  • Как оформить портфолио
  • Что значит «Я до тебя доберусь»
  • Ваша страница в соц сетях - это тоже портфолио
  • Нужен ли свой сайт. Какой он должен быть?
  • Где еще разместить свои работы. Где не нужно?
  • Примеры хорошо оформленных портфолио
  • Фейковые работы? Зачем?

Поиск заказчика

Содержание урока
  • Как позвонить незнакомцу и подружиться
  • Работа с агентствами.
  • Сценарий разговора с клиентом из Авито
  • Зачем не нужно продавать в лоб
  • Уводим клиента на встречу
  • Скрипт разговора на встрече. Какие материалы брать с собой
  • Партнерские продажи
  • Кто такие «Партнеры»
  • Кому надо написать, чтобы дали заказ
  • Таблица исполнителей. Как заполнять, зачем нужна.
  • Как завести промоутеров и кто это в нашем случае
  • При чем тут ИП?

Результат модуля

Портфолио, подготовленное и опубликованное на всех необходимых площадках. Грамотно оформленная страница в социальных сетях. Первые заработанные деньги.

Как проходит обучение на курсе Фронтенд-разработчик

Курс длится 14 недель. Уроки выходят на учебной платформе, по пятницам проводим прямые трансляции с преподавателем, всё общение в общем чате и отдельных группах с кураторами.

Смотрите уроки и выполняете задания

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

В каждом уроке две домашки: простая обязательная и усложнённая для тех, кто хочет большего. Домашка — небольшое практическое задание по просмотренному уроку. Вы отрабатываете знания не на простых тестах вроде «поставьте один тег, чтобы код заработал», а на небольших реальных задачах. Например, сверстать карточку товара.

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

Обычный уровень ДЗ

Справится даже
новичок

Сложный уровень ДЗ

Для тех, кто хочет большего

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

На тарифах «Полный фарш» и «Лонг» вы учитесь с куратором. Куратор — старший товарищ, наставник и друг в одном лице. Он проверяет домашки, даёт комментарии в видео или тексте и помогает поддерживать боевой настрой.

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

Общаетесь с однокурсниками
в удобном чате

Всё общение по курсу проходит в закрытом чате в Дискорде. В нём сидят все студенты, кураторы и автор курса.

В чате удобная навигация: для каждой темы есть свои каналы. Например, есть канал «помощь», где можно попросить помощи по определённой теме, канал «общение», где можно просто поболтать, «полезные ссылки», куда кураторы скидывают полезные материалы.

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



Защищаете диплом

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

На каждом этапе есть дипломные проекты разной сложности: от простого лендинга и сложный интернет-магазина до веб-приложения. Если делать как попало, куратор не примет работу.

На тарифе «Всё сам» доступен только простые дипломные проекты.

Подготовка к трудоустройству или старту на фрилансе

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

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

Выбрать свой тариф

Что будет у вас после курса

Опыт, навыки и знания для успешной работы в студии или на фрилансе

Товарищи и друзья в чате студентов-разработчиков. Можно собирать первую команду

Семь работ в портфолио, которые можно показывать работодателю 

Именные сертификаты об обучении: по вёрстке сайтов и JavaScript

Выдаём электронные сертификаты на русском языке. Если хочется, его можно распечатать.

Сертификат поможет при трудоустройстве. Одним работодателям это скажет о том, что вы усердны, целеустремлённы, готовы учиться и даже вкладываете деньги в своё образование. Другие просто любят именно наших выпускников =)

Курс сделан так, чтобы вы учились увлекательно и легко

У нас были студенты в возрасте 62 лет, 16 лет, с небольшим опытом и совсем новички.
Чтобы все могли освоить вёрстку в комфортных условиях, мы разработали свою систему обучения.

Поддержка куратора

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

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

Ограничений на общение с куратором в чате или в голосовых созвонах нет. Созвоны в Скайпе формально проходят раз в неделю. В действительности в 90% случаях проходят чаще, но частоту определяет сам куратор. Помните, что куратор — это наставник, а не продавец в Макдональдсе.

Понятные примеры и приятная подача материала

Авторы курса — действующие разработчики. Автор блока по вёрстке — Артём Исламов — ведёт Ютуб-канал Glo Academy с 2016 года, выступает на конференциях и записывает уроки. Автор блок по JavaScript — Александр Ильясов — веб-разработчик, фрилансер, пишет сложные веб-приложения и менторит новичков.

Авторы умеют объяснять сложные вещи простым языком, чтобы было понятно всем: и полным новичкам, которые раньше никак не работали с вёрсткой, и опытным ребятам, которые не могут разобраться в определённой теме. Например, о блочной модели CSS рассказываем на примере бабушек у подъезда.

Умеренная, но интенсивная нагрузка

Курс длится 14 недель с перерывом между блоками. Первые пять — обучение на практических задачах. Шестая — работа над дипломным проектом. Мы не верим в эффективность подхода «сначала заучи всю теорию, а потом делай». За пять лет мы вывели идеальный алгоритм обучения через практику с постепенным повышением сложности. Блок по JavaScript проходим в таком же формате: семь недель учимся на практических заданиях, а восьмую — пишем диплом.

Почему так?

Уроки выходят пять раз в неделю, каждый день с понедельника по пятницу. На тарифе «Лонг» — три раза в неделю. Это уже записанные уроки, которые можно посмотреть в удобное время. В среднем урок длится 20-30 минут в зависимости от сложности темы. 

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

Обучение в формате игры и подарки лучшим

На тарифе с куратором есть балльно-рейтинговая система и внутреннее соревнование. 

Лучшие студенты получают призы и подарки.
Например, за первое место:

  • скидки на любые курсы Glo Academy 50%
  • специальный сертификат
  • дизайн-макет для верстки в портфолио еще одного проекта
  • рекомендательное письмо от куратора
  • рекомендательное письмо от Артема Исламова и Александра Ильясова
95%

9 из 10 студентов полностью довольны курсом по окончанию обучения

Что говорят наши выпускники

Это малая часть отзывов.
Больше на YouTube — 500 видео и ВКонтакте — 300+ текстовых

Влад Мансуров

Курс «Веб Старт»

Огромное спасибо за курс, эти два месяца для меня были очень насыщенными! Сам курс офигенный, Артем как всегда подает материал на высоте, все раскладывает по полочкам, разжевывает досконально, остается только проглотить и применить на практике.

читать отзыв полностью

Роман Габдрахманов

Курс «Веб Старт»

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

читать отзыв полностью

Валя Валиуллина

Курс «Веб Старт»

Обучение. Уроки максимально краткие, по существу, только нужная на практике информация (что в условиях цейтнота крайне ценно), а еще побуждает «гуглить», если хочется дополнений к материалу. А еще голос, интонация и темп автора, когда не хочется засыпать, как на лекциях когда-то в институте, а хочется с интересом смотреть и учиться дальше! Не люблю бубнящих, медленных лекторов

читать отзыв полностью

Стас Колоколов

Курс «Веб Старт»

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

читать отзыв полностью

Юрий Захаров

Курс «JavaScript»

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

читать отзыв полностью

Станислав Балыбин

Курс «JavaScript»

Пришел на курс с небольшим "багажом" знаний по JS. После курса, могу сказать однозначно, этот багаж стал намного больше, а самое главное структурированнее. Пришло понимание тех ошибок, которые совершал прежде и стало понятнее - куда двигаться дальше.

читать отзыв полностью

Алексей Троян

Курс «Веб Старт»

Большое спасибо Артёму Исламову и команде Glo Academy за курс. Спасибо моим кураторам Александру Семенову и Екатерине Новик за помощь в прохождении курса и диплома.

читать отзыв полностью

Юлия Емельянова

Курс «Веб Старт»

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

читать отзыв полностью

Алексей Чекалин

Курс «Веб Старт»

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

читать отзыв полностью

Иван Грознов

Курс «Веб Старт»

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

читать отзыв полностью

Алексей Чекалин

Курс «JavaScript»

Сейчас я понимаю, что один из проектов, который я делал ДВЕ НЕДЕЛИ!, можно было сделать другими средствами ЗА ОДИН ДЕНЬ! Вот это откровение перевернуло мой мир. Всем желаю успехов, применять полученные знания и развиваться дальше.

читать отзыв полностью

Антон Шахов

Курс «JavaScript»

Я пришел на курс с небольшими знаниями и целью изучить все аспекты языка, что-то подтянуть, что-то узнать новое. Самым важным на курсе является помощь куратора на тарифе "Полный фарш" — обратная связь по выполненным домашним заданиям, созвоны и разборы вопросов от куратора очень важные вещи, которые научат вас писать красивый и качественный код.

читать отзыв полностью

Женя Буковски

Курс «Веб Старт»

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

читать отзыв полностью

Ангелина Аллекс

Курс «Веб Старт»

Шла на курс с целью научиться верстать сайты, не больше не меньше. И получила больше) В конце сделала самостоятельно сайт, одностраничный, не сложный, но корректно отображающийся на разных разрешениях. Залила его на свой хостинг и могу даже показать свою проделанную работу кому-нибудь без проблем, это здорово!)

читать отзыв полностью

Юрий Захаров

Курс «Веб Старт»

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

читать отзыв полностью

Виталий Кравченко

Курс «Веб Старт»

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

читать отзыв полностью

Денис Васин

Курс «JavaScript»

Это второй курс от академии, который я прошел. Если вы сомневаетесь, что здесь чему-то можно научиться, то не стоит, но все зависит только от вас и вашего усердия. Мне курс дался оочень тяжело, т.к. программирование никогда не изучал, но это было до 4 недели примерно.

читать отзыв полностью

Христофор Алексеев

Курс «JavaScript»

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

читать отзыв полностью

Денис Васин

Курс «Веб Старт»

Я столько полезного узнал, настолько уверенно стал чувствовать себя в верстке, что кажется, что я могу вообще все) Артем, если ты это читаешь, спасибо тебе за курс. И не успев закончить курс, увидев мою работу, мною уже заинтересовались в качестве верстальщика и уже готовят мне тестовое задание.

читать отзыв полностью

Светлана Искадронова

Курс «Веб Старт»

За 6-7 недель освоить самостоятельно тот же объем – не реально. Всегда будет 100500 причин, чтобы не делать: заболела собака, интересная киношка вышла, усталость, надо с друзьями отдохнуть, «я прочитала 5 статей какая я молодец, ну, пожалуй, хватит на сегодня…» и многое другое. На курсе же нет времени тянуть резину. Всё четко, ясно и слажено. Материал подается порционно, планомерно и через месяц ловила себя на мысли: «эм… дак я верстаю сижу…»

читать отзыв полностью

Григорий Греков

Курс «Веб Старт»

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

читать отзыв полностью

Руслан Салимов

Курс «JavaScript»

До этого пытался учить JS по известным сайтам, честно говоря в голове была каша, такая теоретическая каша. А практики вообще ноль. На курс пришёл с такой целью - эту кашу разгрести, систематизировать знания, набраться практики. И, честно говоря, я это получил сполна. На тот код, который писал до курса теперь смотрю, как на детский какой-то))).

читать отзыв полностью

Виталий Шкарапута

Курс «JavaScript»

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

читать отзыв полностью

Анна Елиневич

Курс «JavaScript»

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

читать отзыв полностью

Стоимость обучения

Курс можно оплатить из любой страны разными способами. Если на странице оплаты нет удобного способа — напишите нам. 

Можно записаться в рассрочку до 12 месяцев через Тинькофф-банк или напрямую через Glo Academy с разбивкой на два платежа. В обоих случаях выходит без переплат.

Выберите подходящий тариф

43 990 руб.

Цена до 26 августа 65 990 руб.

В рассрочку на 12 мес. за 3 666 руб.

  • Доступ к видео-урокам
  • Общий чат с участниками
  • Проверка домашек куратором
  • Закрытый чат с куратором
  • Скайп сессии разбора домашек
  • Видеоразборы домашних работы
  • Еженедельный стрим с автором курса
  • Защита дипломной работы

31 990 руб.

Цена до 26 августа 46 990 руб.

В рассрочку на 12 мес. за 2 666 руб.

  • Доступ к видео-урокам
  • Общий чат с участниками
  • Еженедельный стрим с автором курса
  • Защита дипломной работы

57 990 руб.

Цена до 26 августа 79 990 руб.

В рассрочку на 12 мес. за 4 833 руб.

  • Доступ к видео-урокам
  • Общий чат с участниками
  • Проверка домашек куратором
  • Закрытый чат с куратором
  • Скайп сессии разбора домашек
  • Видеоразборы домашних работы
  • Еженедельный стрим с автором курса
  • Защита дипломной работы

Фронтенд и разработка сайтов — самый простой способ попасть в веб-разработку и развиваться дальше. 
На курсе мы даём знания на уровне крепкого джуна. Сможете зарабатывать первые деньги на фрилансе сразу после курса или устроиться в компанию

Тот самый «лысый из браузера» — твой проводник в мир веб-разработки :)

Отвечаем на частые вопросы

Если вы не нашли ответ на свой вопрос, напишите нам в чат на сайте или в социальных сетях. Ссылки есть в самом низу сайта. 

Останутся ли видеозаписи после прохождения курса?

Да, записи уроков останутся на учебной платформе.

Как сменить свой тариф?

Свяжитесь со старшим куратором или с отделом продаж и скажите, что хотите перейти на тариф «Полный фарш» или »Лонг». Вам отправят ссылку на оплату перехода на другой тариф. Попросить о переходе можно в ВК https://vk.me/glo_academy или в Телеграм https://t.me/gloacademy_bot

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

На тарифе «Всё сам» нет обратной связи. Попросить помощи можно в общем чате курса в Discord и в канале #вопросы_к_трансляции — на них ответит автор курса на ближайшей трансляции или сразу же текстом

Могу ли я поменять куратора в течение курса?

Да, куратора можно поменять. Напишите старшему наставнику на курсе, попросите поменять куратора и напишите причину.