Курс Front End

Старт обучения
Дату уточните у администрации
90 час. по 2-3 раза в неделю

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

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 в Ташкенте

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

spinner-it

На жаль, у звязку з війною ІТЕА завершила свою діяльності в Україні.

This will close in 20 seconds