Курс Front End
Описание курса
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
27. Как составить резюме и пройти собеседование
- Структура резюме
- Часто задаваемые вопросы
- Как вести себя на собеседовании
- Основные ошибки на собеседовании
- Урок английского языка №1
- Урок английского языка №2
- Урок поиска работы
Минимальные требования:
- Вы — новичок и хотите освоить профессию с невысоким порогом вхождения
- Вы хотите обрести творческую профессию и оставить свою скучную работу
- Вы уже работаете в IT, но хотите сменить профиль или расширить знания
- Вы занимаетесь сами, но вам необходимо упорядочить знания
Лекторы:
Курсы Front end в Ташкенте
* Указанные скидки не суммируются с другими действующими акциями и специальными предложениями. Если у Вас возникли вопросы, обращайтесь за консультацией к нашим менеджерам!