Frontend разработка

Обучение Front-end разработке: JavaScript, HTML, CSS

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

JavaScript — главный язык frontend-разработчиков в web, на котором они программируют пользовательские интерфейсы. Им часто приходится заниматься версткой сайтов: написанием HTML-кода и CSS-стилей для представления нужной информации. Именно поэтому для качественного фронтенда важно хорошее знание языков программирования, чистота кода и творческий подход к задачам.

В ходе курса вы освоите структуру страницы и существующие стили, научитесь работать с HTML и CSS, узнаете, как призадать странице тот или иной вид. После вы будете готовы к изучению более сложных вещей, таких как язык JavaScript, его синтаксис и возможности, фреймворки и другие дополнительные инструменты, способы решения различных задач. А после окончания обучения сможете смело претендовать на должность Junior Frontend Developer.

Длительность курса 90 часов (30 занятий). График занятий: по 2-3 раза в неделю в вечернее время.

Целевая аудитория

Данный курс для вас если:

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

Приобретаемые знания и навыки

На курсе вы научитесь:

  • Придавать продуктам эффектный внешний вид, применяя HTML, CSS и JavaScript
  • Разбираться в основных инструментах и особенностях JavaScript
  • Работать с консолью разработчика и проверять код на предмет ошибок
  • Создавать анимации, прочие интерактивные элементы и добавлять их в продукт
  • Влиять на процесс оптимизации загрузки страницы и делать код более читабельным
  • Выгодно презентовать себя работодателю

Курс включает

  • 30 занятий — от теории к применению знаний на практике
  • Контроль знаний — практические работы и тесты
  • Опыт работы в команде
  • Интерактивный личный кабинет с доступом к материалам курса
  • 2 занятия по английскому, на которых проверите знание языка и пополните словарный запас
  • Урок по поиску работы в сфере IT и «продвижению» себя
  • Сертификат об окончании

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

1. ВВЕДЕНИЕ В ВЕБ-ТЕХНОЛОГИИ

  • Предназначение технологий
  • Стек разработки для сайта
  • Принцип работы «клиент-сервер»
  • Консоль разработчика
  • Текстовый редактор и IDE
  • Что такое HTML, CSS, JS и их взаимодействие

2. HTML

  • Базовые принципы верстки
  •  Знакомство с понятием тега и атрибута
  •  Обязательная структура любой веб-страницы
  •  Понятия строчных и блочных элементов веб страницы
  •  Понятия парных и непарных тегов;
  •  Семантические теги
  •  Спецсимволы
  •  Работа с тегами и атрибутами
  •  Работа с ссылками и якорями
  •  Работа с текстом и комментариями
  •  Работа с различными системами цветов в HTML
  •  Работа с изображениями
  •  Нумерованные и маркированные списки
  •  Работа с блоками (div)
  •  Таблицы
  •  Формы
  •  Элементы форм (инпуты)
  •  Айфреймы
  •  Подключение разных модулей к документу HTML
  • Форматирование элементов HTML

3. CSS

  •  Что такое CSS?
  •  Базовые принципы написания стилей
  •  3 способа добавления CSS на HTML-страницу
  •  Внешние таблицы стилей
  •  Относительные и статичные единицы измерения
  •  Работа со шрифтами (семейства, стили, размеры, насыщенность)
  •  Работа с границами элементов (бордер, радиус, тени)
  •  Работа с отступами и размерами элементов
  •  Градиенты
  •  Работа со свойствами float и clear
  •  Flex box
  •  Работа с фоном (изображения и цвет, размеры, прозрачность)
  •  Селекторы
  •  Продвинутые селекторы
  •  Приоритеты стилей
  •  Перезапись стилей
  •  Псевдоклассы, псевдоэлементы
  •  Работа с анимацией элементов
  •  Валидация
  •  Медиазапросы

4. РАБОТА С БРАУЗЕРОМ

  • Установка полезных расширений для верстки
  • Отладчик кода

5. ХОСТИНГОВЫЕ И ДОМЕННЫЕ ПАНЕЛИ

  • Работа с Git и хостинг на Git 

6. РАЗНЫЕ ВИДЫ ВЕРСТКИ

  • Адаптивная верстка
  • Резиновая верстка
  • Pixel perfect верстка
  • Статичная верстка
  • Кроссбраузерная верстка
  • Смешанная верстка

7. FIGMA ДЛЯ РАЗРАБОТЧИКА

  • Понятие растровой и векторной графики
  • Преимущества и особенности Figma
  • Обзор панелей и инструментов
  • Сетки
  • Слои и компоненты
  • Экспорт параметров и графики
  • Редактирование элементов

8. GRID LAYOUT

  • Построение сетки
  • Работа с горизонтальным и вертикальным выравниванием
  • Объединение элементов
  • Методы работы с ячейками

9. ПРАВИЛА ИМЕНОВАНИЯ КЛАССОВ ПО BEM

10. БИБЛИОТЕКА BOOTSTRAP

11. SASS

  • Подключение
  • Правила и дерективы
  • Управляющие директивы и выражения
  • Использование миксинов
  • Применение на практике

12. ВВЕДЕНИЕ В JAVASCRIPT

  • Общая информация о языке и его особенности
  • Справочники, спецификации и ссылки на них
  • Консоль разработчика
  • Внешние скрипты и порядок их подключения
  • Переменные и правила их именования
  • Типы данных и приведение типов

13. ОСНОВНЫЕ ОПЕРАТОРЫ

  • Операторы сравнения и логические значения
  • Условные операторы
  • Логические операторы
  • Конструкция switch 

14. ЦИКЛЫ И ФУНКЦИИ

  • Циклы ‘for’, ‘while’, ‘do…while’
  • Рекурсия и понятие стека
  • Понятие и синтаксис функции
  • Функциональные выражения
  • Области видимости
  • Псевдомассив ‘arguments’
  • Функции обратного вызова (callback)

15. МАССИВЫ

  • Перебирающие методы
  • Внутреннее представление массивов

16. ОБЪЕКТЫ

  • Передача по ссылке
  • Перебор свойств
  • Стандартные встроенные объекты

17. РАБОТА С GIT

  • Работа с Git Bash
  • Workflow от создания репозитория до его отправки на удаленный сервер
  • Работа с ветками
  • Работа с конфигурационными файлами

18. ПРОТОТИПНОЕ НАСЛЕДОВАНИЕ

  • Прототип объекта
  • Свойство prototype
  • Встроенные классы
  • Функция - конструктор
  • Наследование классов
  • Внутреннее устройство метода 'extend' и полифилл 'Object.create'
  • Функциональное наследование

19. ООП

  • Общая информация про ООП
  • Инкапсуляция
  • Полиморфизм
  • Наследование
  • Абстракция данных
  • Понятие 'класс'

20. КОНТЕКСТ ВЫЗОВА И ЗАМЫКАНИЯ

  • Работа с 'this' (4 способа использования)
  • Использование 'call', 'apply'
  • Работа с 'bind', карринг и полифилл
  • Дескрипторы, геттеры и сеттеры свойств
  • Шаблон проектирования 'Singletone' через замыкание
  • Сборщик мусора

21. ГЛОБАЛЬНЫЙ ОБЪЕКТ WINDOW И РАБОТА С DOM

  • Общая информация про 'window', 'navigator', 'document', 'location', 'history'
  • Навигация по DOM элементам
  • Свойства узлов
  • Добавление и удаление узлов
  • Работа со стилями
  • Работа с координатами

22. СОБЫТИЯ

  • Введение в браузерные события
  • Порядок обработки событий (Event Loop)
  • Асинхронные события
  • Работа с SetTimeout/ SetInterval
  • Всплытие и перехват
  • Делегирование событий
  • События с использованием мыши, клавиатуры и прокрутка
  • Загрузка документа

23. ФОРМИРОВАНИЕ СТРАНИЦЫ В БРАУЗЕРЕ

  • Формирование DOM пошагово
  • Формирование Render Tree
  • Порядок формирования CSSOM
  • Оптимизация, минификация, работа с Http Cache.

24. СПОСОБЫ ХРАНЕНИЯ ДАННЫХ В БРАУЗЕРЕ

  • Cookies
  • Localstorage/Sessionstorage
  • IndexedDB
  • Manifest
  • ServiceWorker
  • Progressive Web Application

25. HTTP

  • Введение в Http протокол
  • Преимущества и недостатки протокола
  • Работа с AJAX
  • Общая информация про RESTful API
  • JSON
  • CORS
  • Работа с WebSocket
  • Протокол JSONP

26. КАК СОСТАВИТЬ РЕЗЮМЕ И ПРОЙТИ СОБЕСЕДОВАНИЕ

  • Структура резюме
  • Часто задаваемые вопросы
  • Как вести себя на собеседовании
  • Основные ошибки на собеседовании
  • Урок английского языка №1
  • Урок английского языка №2
  • Урок поиска работы

ДОКУМЕНТЫ ПО ОКОНЧАНИИ

  • Сертификат Учебного центра Softline
  • Справка об обучении установленного государством образца

Сертификат Softline_образец Cправка

Оставить отзыв

Информация о курсе

c 27 января
20:00 - 23:00

1740 бел. р. с НДС 20%

Вендор: Python, Java, JS, C#, C++
Код курса: Frontend
Продолжительность: 30 дней / 90 ак. часов
Направление: JavaScript, TypeScript
Экзамен:
Записаться на курс

Название курса и комментарии*

Имя*

Фамилия*

Отчество*

Компания

Телефон*

Email*

Настоящим, в соответствии с ч.2.ст.18 Закона Республики Беларусь от 10.11.2008 N 455-З(ред. от 11.05.2016) "Об информации, информатизации и защите информации" и Законом Республики Беларусь от 7 мая 2021 г. № 99-З «О защите персональных данных», отправляя данную форму, вы подтверждаете свое согласие на сбор, обработку и хранение ООО «СофтЛайнБел» Ваших персональных данных. ООО «СофтЛайнБел» гарантирует конфиденциальность получаемой от Вас информации. Сбор, обработка и хранение персональных данных осуществляется в целях эффективного оказания услуг и исполнения договоров.