Курс веб-розробки в Харкові Front-end Developer

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>
• Логічні
• Остаточні вирішальні питання