Курс Front End

Старт обучения

Дату уточните у администрации

90 час. по 2-3 раза в неделю

Запись на курс

Единоразовая оплата

8 592 000 5 155 200 UZS.

Оплата частями

3 293 600 1 976 150 UZS. x3

Описание курса

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

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

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

После курса вы сможете:

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

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

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 способа использования)
ES6 стандарт (стрелочные функции)
ES6 let / const + var + hoisting
Использование 'call', 'apply'
Дескрипторы, геттеры и сеттеры свойств
Шаблон проектирования 'Singletone' через замыкание
Сборщик мусора

21. Работа с системой контроля версий

22. Глобальный объект Window и работа с DOM

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

23. События

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

24. Формирование страницы в браузере

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

25. HTTP

Введение в HTTP протокол
Преимущества и недостатки протокола
Работа с AJAX
Общая информация про RESTful API
JSON
CORS
Promise + async await

26. Способы хранения данных в браузере

Cookies
Localstorage / Sessionstorage
IndexedDB (import / require)
Manifest
ServiceWorker
Progressive Web Application

Минимальные требования:

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

Лекторы:

Курсы Front end в Ташкенте

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

Рекомендуемые курсы

-40%