Маркетинговые стратегии и продающие сайты

Курс Frontend-разработчик (HTML + CSS + JS + jQUERY + Parallax + Bootstrap + SASS)

Старт сразу после вашей заявки

Курс -  Frontend-разработчик (HTML + CSS + JS + jQUERY + Parallax + Bootstrap + SASS)

Получите новую компетенцию и востребованную профессию с нуля! Языки и технологии, изучаемые на курсе: HTML, CSS, JavaScript, jQUERY, Parallax, Bootstrap, SASS.

Продолжительность Результат Цена  Формат
40 уроков
(160 ак.часов)
Компетенция: Frontend-разработчик  60т.руб. - в группе
160т.руб. - индивид.
онлайн и оффлайн в удобное время

Запишитесь на курс

 

Можно записаться также по телефону, WhatsApp или Telegram  +79184184222

Этот курс для вас, если вы:

Новичок

  • Даже не имея опыта в программирования вы научитесь разрабатывать сайты ( от простого лендинга до сложного корпоративного сервиса)

Начинающий программист

  • Освоите продвинутые навыки вёрстки, JavaScript и фреймворки. Исключите проблемы в знаниях и станете Frontend разработчиком уровня Middle

Фрилансер

  • Сможете сменить или добавить новые навыки к своей профессиональной деятельности, увеличите заработок и построите карьеру в мире IT

На рынке web не хватает профессиональных frontend-разработчиков

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

Смотрите сами

3 900 компаний

прямо сейчас ищут frontend-разработчиков только на одном hh.ru

140-240 тыс.руб.

одна из самых высоких зарплат Frontend-разработчика - вызвана борьбой компаний за профессионалов

Преподаватель курса

Александр Дарбинян

  • Опыт работы преподавателем с 2000 года
  • Опыт работы предпринимателем с 2007 года
  • Создатель и руководитель веб-студии в Краснодаре «Профессионал»
  • Сертифицированный веб-разработчик
  • Преподавал в таких крупных компаниях, как: Лукойл, ИнжГео, КубаньЭнерго, Роснефть, Термнефть.
  • Провёл более 700 семинаров в индивидуальной форме или в группах от 6 до 50 человек.
  • Разрабатывал портал для ФК Краснодар
  • Преподавал в Академии Ворлдскиллс Россия.

Варианты обучения

ВАРИАНТ. Индивидуальное обучение в студии или онлайн посредством Zoom или Skype и Тимвивер или Anydesk

ВАРИАНТ. Групповое обучение в студии или онлайн посредством Zoom или Skype и Тимвивер или Anydesk

ВАРИАНТ. Корпоративное обучение на территории Заказчика  или онлайн посредством Zoom или Skype и Тимвивер или Anydesk

Документы об окончании - сертификат

Получите сертификат об окончании курса Frontend-разработчик (HTML + CSS + JS + jQUERY + Parallax + Bootstrap + SASS)

Сертификат подтвердит что вы прошли обучение в действующей веб-студии и получили навыки frontend-разработчика с двумя проектами, разработанные во время обучения 

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

Программа обучения

Блок 1. Эффективное использование инструментов разработки
  • Инструменты: браузеры, редакторы, плагины
  • Установка и настройка Notepad++   и  VS Code - редактора разработки сайта от Microsoft
  • Методика поиска ошибок в коде
  • Emmet и правила для HTML/CSS, Beautify
  • Кодировки (повторение)
  • Accesebility (доступность)
БЛОК 2. ВЕРСТКА САЙТА И ЛЕНДИНГА С ИСПОЛЬЗОВАНИЕМ HTML5 И CSS3

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

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

Введение в HTML    

  • Структура страницы
  • Основные HTML теги
  • Структура проекта
  • Создание гиперссылок и работа с ними
  • Размещение текстов и изображений
  • Формы для сбора данных
  • Верстка таблиц

Основы каскадных таблиц стилей CSS 3

  • CSS стили.
  • Макетирование страницы с CSS
  • CSS  эффекты
  • Градиенты
  • Трансформации
  • Анимация
БЛОК 3. Создание интерактивных элементов с помощью JavaScript+jQuery+Paralax
  • Карусель - подключение и настройка
  • Табы, вкладки и переключатели
  • Многоуровневая навигация
  • Галерея фотографий
  • Модальные окна
  • Сортировка и фильтрация элементов
БЛОК 4. ИНТЕГРАЦИИ, ФРЕЙМЫ И ИНФОРМЕРЫ
  • Интеграции карты Яндекс
  • Вставка информера погоды, курса валют, разработка он-лайн заявки и др
  • Интеграция с социальными сетями,  автоматические отображение постов из Инстаграм на сайте и др.
  • Работа с Google Maps, вставка карт на сайт
БЛОК 5. ПОДГОТОВКА, ПУБЛИКАЦИЯ И ПОДДЕРЖКА САЙТА В СЕТИ
  • Регистрация доменов
  • Регистрация хостинга.
  • Работа с FTP. Программа FileZilla
  • Копирование сайта на сервер
  • Администрирование сайтов
  • Защита информации
  • Создание бэкапов
Блок 6 Изучение программ для работы с макетом - Photoshop и Figma
  • Работа с Photoshop
  • Работа с Figma
Блок 7. Финишная вёрстка макета
  • Нарезка макета
  • Сохранение изображений
  • Создание структуры страницы
  • Практическая работа: Вёрстка PSD-макета
  • Практическая работа: Создание мобильной версии страницы
Блок 8. JavaScript. Разработка клиентских сценариев с использованием. Язык программирования
  • Сценарии, выполняемые на стороне клиента.
  • Что такое JavaScript?
  • История создания JavaScript.
  • Различия между JavaScript и Java, JScript, ECMAScript.
  • Версии JavaScript.
  • Понятие Document Object Model.
  • Понятие Browser Object Model.
  • Внедрение в HTML документы. Редакторы кода JavaScript.
  • Тег <noscript>.
  • Основы синтаксиса.
    • Регистрозависимость.
    • Комментарии.
    • Ключевые и зарезервированные слова.
  • Переменные. Правила именования переменных.
  • Типы данных.
  • Операторы.
    • Арифметические операторы.
    • Операторы отношений.
    • Логические операторы.
    • Оператор присваивания.
    • Битовые операторы.
    • Приоритет операторов.
    • Оператор typeof.
  • Ввод/вывод данных. Диалоговые окна.
  • Условия.
    • Что такое условие?
    • if
    • if else
    • Тернарный оператор ?:
    • switch
  • Что такое цикл?
    • while
    • do while
    • for
    • break
    • continue
    • Понятие метки.
  • Что такое функция?
    • Синтаксис объявления функции.
    • Параметры функции.
    • Возвращаемое значение функции. Ключевое слово return.
  • Объект arguments.
    • Цель и задачи объекта.
    • Свойство length.
  • Область видимости переменной. Ключевое this.
  • Рекурсия.
Блок 9. JavaScript. Объект. Массивы. Объект Array. Строки. Объект String. Объект Date. Объект Math. Введение в ООП
  • Объекты.
    • Что такое объект?
    • Введение в объектный тип данных.
    • Объект Object.
    • Ключевое слово new.
    • Понятие свойства.
    • Добавление свойств. Синтаксис добавления свойств.
    • Синтаксис обращения к свойствам.
  • Массивы.
    • Что такое массив?
    • Объект ArrayСоздание массива.
    • Обращение к элементам массива.
    • Свойства и методы Array.
  • Строки.
    • Объект String.
    • Свойства и методы String.
  • Задержки и интервалы. Периодический вызов функций.
  • Объект Date. Обработка даты и времени.
  • Объект Math. Свойства и методы. Случайные числа.
  • Что такое ООП?
  • Три фундаментальных принципа ООП.
    • Инкапсуляция.
    • Наследование.
    • Полиморфизм.
  • Понятие класса и объекта в терминах JavaScript.
  • Свойства.
  • Методы.
  • Свойства-акссесоры.
    • get–свойства (геттеры).
    • set–свойства (сеттеры).
  • Конструктор.
  • Понятие prototype.
  • Что такое prototype.
  • Цели и задачи prototype.
  • Наследование
Блок 10. JavaScript. Обработка событий
  • Что такое событие?
  • Что такое обработчик события?
  • Обработка событий в сценариях.
  • Управление стилями элементов web-страницы.
  • Объект event и его свойства.
  • Обработчики событий по умолчанию (стандартные обработчики), запрет вызова стандартного обработчика.
  • Объект Image. Управление рисунками и ролловерами
Блок 11. JavaScript. Browser Object Model. Document Object Model
  • Что такое Browser Object Model?
  • Объекты Browser Object Model.
    • Объект Window. Открытие, перемещение и изменение размера окон.
    • Объект Navigator. Управление браузером.
    • Объект Screen. Свойства экрана.
    • Объекты Location и History. Перемещение по страницам.
    • Коллекция Frames. Управление фреймами.
  • Что такое Document Object Model?
  • Отличия DOM от BOM.
  • Представление HTML-документа в виде дерева.
  • Объекты модели DOM. Иерархия узлов.
  • Свойства и методы модели DOM. Модель событий DOM.
  • Изменение дерева DOM.
  • Знакомство с объектами Document и Link.
  • Управление выделением и текстовым диапазоном: объекты Selection и TextRange.
  • Особенности DOM в HTML5.
Блок 12. JavaScript. Формы
  • Применение форм. Размещение элементов формы в HTML.
  • Коллекция Forms. Создание и программирование элементов формы.
    • Кнопки: элементы Button, Submit, Reset
    • Текстовые поля: элементы Text, Password, File Upload, Textarea.
    • Скрытое поле формы: общее понятие об элементе Hidden.
    • Флажок: элемент Checkbox.
    • Переключатель: элемент Radio.
    • Список: элементы Select, Option.
  • Проверка достоверности форм. Использование Cookie
    • Объект RegExp. Правила записи регулярных выражений.
    • Методы объектов String и RegExp для работы с регулярными выражениями.
    • Проверка достоверности данных формы.
    • Что такое cookie?
    • Преимущества и недостатки cookie.
    • Создание, использование и удаление cookie.
Блок 13. JavaScript. Рисование с помощью canvas, поддержка медиа возможностей
  • Что такое canvas?
  • Базовые возможности.
    • Заливка.
    • Операции с графическими примитивами. Рисование точек, линий, прямоугольников, кругов, кривых Безье и т. д.
    • Вывод текста.
    • Вывод изображений.
    • Работа с тенями и градиентом.
  • Поддержка медиавозможностей.
    • Использование тега <video>.
    • Использование тега <audio>.
    • Практические примеры.
Блок 14. JavaScript. JSON, AJAX
  • Что такое JSON?
  • Цели и задачи JSON.
  • Синтаксис JSON.
    • Переменные.
    • Объекты.
    • Массивы.
  • Объект JSON.
    • Что такое сериализация?
    • Что такое парсинг?
    • Методы stringify и parse.
  • Настройка пользовательской сериализации в JSON. Метод toJSON.
  • Синхронные и асинхронные запросы.
  • Что такое AJAX?
  • Объект XMLHttpRequest.
    • Создание через ActiveX объект.
    • Создание через объект XMLHttpRequest.
  • Методы и свойства XMLHttpRequest.
  • Понятие HTTP заголовка.
  • Использование метода GET. URL кодирование.
  • Использование метода POST.
Блок 15. JavaScript. ECMAScript 6, ECMAScript 11
  • Что такое ECMAScript 6?
    • История возникновения.
    • Переменные.
    • Тип данных Symbol.
    • Функции-стрелки.
    • Использование строк.
    • Объекты и классы.
    • Модули.
    • Другие возможности ECMAScript 6.
  • Что такое ECMAScript 11?
    • История возникновения.
    • BigInt.
    • globalThis.
    • Оператор ??
    • Оператор ?.
    • Другие возможности ECMAScript 11.
Блок 16. JavaScript. Модульное тестирование
  • Что такое модульное тестирование?
  • Цели и задачи модульного тестирования.
  • Необходимость модульного тестирования.
  • Обзор инструментов для модульного тестирования.
  • Практические примеры использования.
Блок 17. JavaScript. Паттерны проектирования
  • Что такое паттерны проектирования.
  • Причины возникновения паттернов проектирования.
  • Понятие паттерна проектирования.
  • Принципы применения паттернов проектирования.
  • Принципы выбора паттернов проектирования.
  • Принципы разделения паттернов на категории.
  • Введение в UML.
    • Диаграмма классов.
    • Диаграмма объектов.
    • Диаграмма взаимодействия.
  • Использование UML при анализе паттернов проектирования.
    • Диаграмма классов.
    • Диаграмма объектов.
    • Диаграмма взаимодействия.
  • Порождающие паттерны.
  • Что такое порождающий паттерн?
  • Цели и задачи порождающих паттернов.
  • Обзор порождающих паттернов.
  • Разбор порождающих паттернов:
    • Abstract Factory:
      • цель паттерна;
      • причины возникновения паттерна;
      • структура паттерна;
      • результаты использования паттерна;
      • практический пример использования паттерна.
    • Builder:
      • цель паттерна;
      • причины возникновения паттерна;
      • структура паттерна;
      • результаты использования паттерна;
      • практический пример использования паттерна.
    • Factory Method:
      • цель паттерна;
      • причины возникновения паттерна;
      • структура паттерна;
      • результаты использования паттерна;
      • практический пример использования паттерна.
    • Prototype:
      • цель паттерна;
      • причины возникновения паттерна;
      • структура паттерна;
      • результаты использования паттерна;
      • практический пример использования паттерна.
    • Singleton:
      • цель паттерна;
      • причины возникновения паттерна;
      • структура паттерна;
      • результаты использования паттерна;
      • практический пример использования паттерна.
  • Структурные паттерны.
    • Что такое структурный паттерн?
    • Цели и задачи структурных паттернов.
    • Обзор структурных паттернов.
    • Разбор структурных паттернов:
      • Adapter
      • Composite
      • Facade
      • Proxy
      • другие структурные паттерны.
  • Паттерны поведения.
    • Что такое паттерны поведения?
    • Цели и задачи паттернов поведения.
    • Обзор паттернов поведения.
    • Разбор паттернов поведения:
      • Command
      • Iterator
      • Observer
      • Strategy
Блок 18. JavaScript. Паттерн MVC
  • Что такое паттерн MVC?
  • Цели и задачи паттерна Model-View-Controller.
  • Model.
    • Что такое Model?
    • Цели и задачи Model.
  • View.
    • Что такое View?
    • Цели и задачи View.
  • Controller.
    • Что такое Controller?
    • Цели и задачи Controller.
  • Примеры использования паттерна MVC
Блок 19. JavaScript. Принципы проектирования классов SOLID
  • Обзор проблем, встречающихся при проектировании и разработке классов.
  • Принципы проектирования классов SOLID.
    • Принцип единственности ответственности (The Single Responsibility Principle).
    • Принцип открытости/закрытости (The Open Closed Principle).
    • Принцип подстановки Барбары Лисков (The Liskov Substitution Principle).
    • Принцип разделения интерфейса (The Interface Segregation Principle).
    • Принцип инверсии зависимостей (The Dependency Inversion Principle).
  • Примеры использования принципов SOLID
Блок 20. JavaScript. Введение в jQuery
  • Что такое jQuery?
  • Цели и задачи jQuery.
  • История создания jQuery.
  • Версии jQuery.
  • Подключение jQuery.
  • Доступ к элементам страницы при помощи функции $.
  • Понятие селектора.
  • Типы селекторов.
    • CSS селекторы.
    • jQuery селекторы.
  • Взаимодействие с DOM.
    • Создание новых элементов DOM.
    • Вставка элементов DOM.
    • Передвижение элементов DOM.
    • Копирование элементов DOM.
    • Traversing. Методы обхода DOM. Метод filter, next, nextAll, prev, prevAll, siblings и др.
  • События и jQuery.
    • Создание обработчиков событий с использованием jQuery.
    • Удаление обработчиков событий.
    • Практические примеры.
  • Анимация и jQuery.
  • AJAX и jQuery.
    • JSON.
    • Механизмы AJAX внутри библиотеки jQuery.
    • Использование метода GET.
    • Использование метода POST.
    • События и AJAX в рамках jQuery.
    • Обработка ошибок.
  • Использование jQuery плагинов.
    • Понятие плагина.
    • Подключение плагина.
    • Примеры плагинов.
Блок 21. Parallax

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

Блок 22. Bootstrap
  • Знакомство с Bootstrap. Установка
  • Классы container и container-fluid
  • Тестирование
  • Grid System. Класс row
  • Тестирование
  • Интерактивное задание
  • Grid System. Позиционирование блоков
  • Классы для позиционирования при разных размерах экрана
Блок 23. SASS
  • Использование препроцессора в больших проектах
Блок 24. Рекомендации по поиску клиентов и работе с Заказчиками
  • Каналы продаж
  • Правильная работа с Заказчиком
  • Документация
    • Договор
    • Акты выполненных работ
    • Акты передачи
Блок 25. Путь от разработчика к профессии ПМ (проект менеджер)

Методологии управления (обзоры)

  • Angle
  • Scram
  • Kanban

Управление командой разработчиков

  • Постановка задач - сроки. графики, риски
  • Проверка выполненных объемов
  • Выход из сложных ситуаций

Гарантии

Мы даем 100% гарантию, что вы станете Frontend-разработчиком, который сможет быть конкурентоспособным и начать зарабатывать на полученных знаниях. Во время обучения мы с вами разработаем несколько проектов для вашего портфолио. Работаем по договору.

Вопрос - ответ

Подойдет ли мне профессия?

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

Смогу ли я выучиться, если никогда ранее не программировал?

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

Сколько времени нужно будет уделять курсу?

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

Когда я смогу начать обучение?

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

Где проходит обучение?

Курс можно пройти онлайн с использованием Skype или AnyDesk или офлайн в нашем офисе.

Можно ли оплачивать курс в рассрочку?

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

Запишитесь на курс. 

 

Можно записаться также по телефону, WhatsApp или Telegram  +79184184222

Яндекс.Метрика