Практический курс Frontend разработки в Алматы

HTML/CSS

Тема 1. Общая структура.

• Знакомство с базовыми тегами и атрибутами.
• Создание текстовых и блочных элементов, добавление изображений и ссылок.
• Ознакомление с основными функциями редактора Brackets и создание первой страницы.

Тема 2. Знакомство с CSS.

• Знакомство с CSS, его синтаксисом и способом объявления.
• Использование браузерной консоли и обнаружение ошибок.
• Селекторы CSS и подключение стилей к странице.

Тема 3. Блочная верстка, сочетание селекторов CSS.

• Правильное построение HTML страницы, уровни вложения.
• Верстка первого макета сайта по образцу.
• Стилизация шрифтов и свойства, изменяющие вид текста на странице.

Тема 4. Фон и цвет, слои фона и новые теги HTML5.

• Виды позиционирования элементов на странице и их особенности.
• Важность цвета и визуального восприятия на странице.
• Модели фона и изображений.
• Font Awesome, Flaticon.

Тема 5. Flexbox, form i table.

• Flexbox и его применение.
• Знакомство с тэгами формы, таблиц.
• Шрифтовые иконки, их предназначение и применение.
• Создание различных видов меню для сайтов.
• Создание выпадающего меню и "гармошки".

Тема 6. Псевдоклассы и псевдоэлементы.

• Знакомство с современными методами в CSS и интересными анимационными изменениями элементов.
• Управление визуальными изменениями на странице с помощью стилей.
• Использование продвинутых методов доступа к элементам страницы.

Тема 7. Photoshop, Avocode.

• Виды графических форматов и дизайнов.
• Основы фотошоп для верстальщика.
• Работа с PSD макетами с помощью Photoshop и Avocode.
• Спрайты, Pixel perfect.

Тема 8. Адаптивная верстка.

• Создание адаптивной страницы с помощью @media запросов в CSS.
• Создание "резиновых" сайтов.
• Свойства CSS, которые специфичны для различных браузеров.
• Проблема кроссбраузерности.

Тема 9. Анимация в CSS3.

• Что такое анимация и как она работает в CSS3?
• Создание живой и динамической страницы с помощью @keyframes анимации.

Тема 10. Препроцессоры SASS/SCSS, LESS.

• Что такое препроцессоры и их виды для HTML и CSS.
• Преимущества использования препроцессоров.
• Знакомство с SASS/SCSS.
• Применение препроцессора на практике.

Тема 11. Фреймворки Bootstrap, Animation.css, Semantic-UI.

• Знакомство с тем, что такое CSS-фреймворк.
• Преимущества и недостатки использования фреймворков.
• Знакомство с Bootstrap, его основными элементами.
• Bootstrap grid.

Тема 12. Закрепление материала.

• Принципы progressive enhancement и graceful degradation, что такое mobile first.
• Что такое Host и для чего нужна FileZilla.
• Как писать меньше и получать больше оптимизируя код.

Основы программирования

Тема 1. Введение в программирование.

• Создание переменных, знакомство с основными правилами языков программирования (JavaScript).
• Знакомство с основными операторами и типами данных.

Тема 2. Условные операторы.

• Манипулирование условиями, создание простых логических путей сценария.
• Примеры сценариев с условными операторами.
• Развет и нелинейное исполнение кода.

Тема 3. Циклы.

• Циклы, виды циклов, их отличия и способы применения.
• Роль циклов в сценарии. Примеры использования циклов.

Тема 4. Функции.

• Различные варианты создания функций, знакомство с синтаксисом.
• Особенности и роль функций в сценариях.

Тема 5. Массивы.

• Что такое массивы? Работа с массивами и их роль в сценарии.
• Использование циклов с массивами.

Тема 6. Логические задачи и закрепление материала.

• Закрепление материала на практических занятиях.
• Разбор ключевых вопросов данного этапа.

JavaScript

Тема 1. Что такое JavaScript.

• Общая информация о языке JavaScript и его особенностях.
• Как вызвать JavaScript? С чем взаимодействует JavaScript?
• Типы данных и типов.

Тема 2. Conditional Statements.

• If, else if, else.
• Конструкция switch.
• Решение логических задач на JavaScript.

Тема 3. Loop.

• Циклы for, while, do while.
• Break and continue.
• Решение математических уравнений с помощью циклов.

Тема 4. Functions.

• Function Expression, Function Declaration.
• Область видимости функции.
• Рекурсия, замыкание и другие интересные вещи.

Тема 5. String.

• Создание строк, специальные символы.
• Методы строк.
• Практические задания для поиска, замены, удаления данных из строк.

Тема 6. Array.

• Способы объявления массива и работа с ним.
• Методы массивов и их польза.
• Работа с большим и разнообразным количеством данных.

Тема 7. Object.

• Способы объявления и работа с объектом.
• Объекты и их польза для сценария.
• Работа с объектами на практике.

Тема 8. Document Object Model.

• Что такое DOM?
• Структура документа DOM.
• Работа с DOM с помощью JavaScript.

Тема 9. Работа с интерфейсом.

• Изменяем стили с помощью скрипта, взаимодействие сайта с пользователем.
• Логика страницы.

Тема 10. Mouse events.

• Click, mouseover, mouseout, focus, blur и другие события.
• Примеры работы с событиями и динамичностью страницы.

Тема 11. Keyboard events.

• Keyup, keydown, keypress.
• Примеры работы с событиями и динамичностью страницы.

Тема 12. SetTimeout и setInterval.

• Что такое setTimeout и setInterval.
• Объект Math и работа с ним.
• Объект Date и работа с ним.
• Пример часов, таймера, секундомера на JavaScript.

Тема 13. Базовые элементы страницы.

• Создание слайдера на JavaScript.
• Валидация форм на стороне клиента.

Тема 14. Что такое JQuery?

• Где скачать и как подключить?
• Работа с DOM с помощью JQuery.
• Селекторы и иерархия JQuery.

Тема 15. Аналогия между JQuery и CSS.

• Фильтры в JQuery.
• Примеры сложных фильтров в JQuery.

Тема 16. JQuery events.

• Как работают события в JQuery?
• Использование событий на практике.

Тема 17. JQuery UI.

• Где скачать и как установить.
• Draggable, droppable.

Тема 18. Анимация в JQuery.

• Что такое parallax scrolling?
• Применение parallax scrolling на практике.

Тема 19. Логические задачи и закрепление материала.

• Испытание усвоенного материала на практике, выполняя разные логические задания.
• Написание различных алгоритмов и тренировка логического мышления.

JavaScript Advanced

Тема 1. ООП.

• Понятие ООП в JavaScript.
• Что такое наследование, его использование и примеры.
• Практика в объектно-ориентированном стиле программирования.
• This и шаблоны вызова функций.

Тема 2. RegExp.

• Поиск регулярных выражений.
• Использование регулярных выражений для валидации.
• Правила поиска текста.

Тема 3. Система сборки проекта Gulp, Webpack.

• Что такое Gulp, Webpack и зачем они нужны.
• Установка и настройка конфигурационных файлов.
• Установка дополнительных плагинов.
• Использование сборки на практике.

Тема 4. Git.

• Что такое Git?
• Git Bash.
• Базовые команды.
• Работа с ветвями.

Тема 5. JSON.

• Формат JSON, метод JSON.parse, JSON.stringify.
• Передача данных с помощью объектной записи JavaScript.

Тема 6. Сохранение данных в браузере.

• LocalStorage/SessionStorage.
• Cookies
• Проект с использованием средств хранения данных.

Тема 7. Перехват ошибок, "try..catch".

• Конструкция try…catch.
• Объект ошибки.
• Примеры применения на практике.

Тема 8. AJAX.

• HTTP запросы. Что это? Как работают?
• Взаимодействие "Клиент-Сервер".
• Использование методов AJAX для отправки и получения данных.

Тема 9. Frameworks.

• Что такое фреймворк Angular, React и зачем они нужны.
• Подключение к странице фреймворка и работа с Angular или React.
• Двустороннее связывание.
• Роутинг.
• Фильтры.
• Валидация.
• компоненты.
• HTTP запросы.
• Создание невероятных веб-приложений, напоминающих Desktop.

Тема 10. Database.

• Знакомство с базами данных.
• Принципы работы SQL и NoSQL БД.
• Пример создания и манипуляции данных в БД.

Тема 11. Node.js.

• Что такое серверный JavaScript?
• Какие преимущества? Как работать с Node.js?

Тема 12. Ключевые профессиональные навыки.

• Уверенное владение языком Javascript.
• Понимание концепции DOM.
• Работа с библиотекой JQuery.
• Знания AJAX и HTTP запросов.
• Знание JSON.
• Умелое применение регулярных выражений.
• Понятие серверного JavaScript (Node.js).
• Владение фреймворком.
• Построение красивого и динамичного сайта.

Тренинг "Собеседование в IT"

Тема 1. Этапы процесса рекрутинга.

• Скрининг профайлов / CV
• Скрининг интервью (phone call/skype call)
• Интервью
• Оценка кандидата
• Принятие решения
• Фидбек от предыдущих работодателей (не всегда!)
• Job offer
• Процесс найма
• Онбординг кандидата

Тема 2. Этапы собеседования.

• HR интервью
• Техническое интервью
• Интервью с клиентом

Тема 3. Варианты проведения тех. интервью.

• Технические и нетехнические
• Опрос
• Практические кейсы
• Вопрос - ответ (по проектам, указанным технологиям, сертификации)
• Техническое задание на время
• Домашнее техническое задание на время

Тема 4. Интервью вопросы.

• Традиционные
• Поведение
• Культурные/li>
• Логические
• Окончательные решающие вопросы