Програма курсу "Frontend Developer (Фронтенд розробник)"

Програма курсу "Frontend Developer (Фронтенд розробник)"

Основи інтернет-технологій, введення в мову розмітки HTML (структура документа)

• Огляд знань, якими повинен володіти front end developer (фронтенд розробник)
• Що таке тег, атрибути тега, правила оформлення HTML документа
• Розмітка тексту, заголовків і абзаців
• Види і застосування гіперпосилань
• Створення таблиць і списків (нумерованих і маркованих)
• Графіка в HTML. Формати зображень, що використовуються в WEB-е, використання спецсимволов
• Форми і їх елементи (кнопки, поля введення, перемикачі та ін.)

Оформлення зовнішнього вигляду сайту. Каскадні таблиці стилів (CSS)

• Синтаксис CSS
• Основні селектори і властивості
• Пріоритет правил, псевдоелементи і псевдокласи
• Одиниць вимірювання в CSS
• Робота з текстом (+ шрифти)

Фотошоп і передпідготовка

• Базові інструменти фотошопа необхідні для спеціальності front end developer (фронтенд розробник)
• Аналіз макета = структура сайту
• Розкрій макета (що і як зберігати?)
• Цифрова інформація з макета (де брати дані для піксель перфект верстки?)

Сучасні методи і способи Front end HTML5 + CSS3

• Шаблон / каркас / структура сайту
• Теги HTML5 і їх застосування
• багаторівневі меню
• Атрибути для форм
• Застосування валідатора
• Проблема «кросбраузерності» грамотна, універсальна верстка
• Таби і акордеони без JS
• Медіа контент (аудіо і відео)
• Генерується вміст (створення вмісту на боці стилів)
• Адаптація сайту під моб. пристрою
• Canvas

Інструменти front end розробника

• Emmet
• Bootstrap 3/4
• Атрибути для форм
• Pug (препроцесор HTML)
• Less / Sass (препроцесори CSS)

Web програмування на мові JavaScript (в рамках курсу front end developer)

• Бібліотека jQuery
• Вивчаємо селектори для роботи з DOM
• Вводимо поняття колекції і фільтрів
• Маніпулюємо CSS властивостями
• Висновок на сторінку
• пошук і виправлення помилок в коді
• Події, обробка подій
• Отримання об'єкта події
• Спливання і перехоплення
• Дії браузера за замовчуванням
• Виділення. делегування подій
• Події миші і клавіатури
• Drag'n'drop
• Події форм
• Примітивні типи даних, змінні, оператори
• Основні алгоритми: порівняння, цикли
• Методи і функції
• Розподіл завдань на підзадачі
• Особливості оголошення функцій
• Області видимості змінних
• Параметри функцій
• Класи і об'єкти (переходимо від простих типів даних до масивів, рядків, вивчаємо об'єкти і особливості роботи з ними)
• Документ і об'єкти сторінок
• Створюємо і модифікуємо елементи на сторінці
• Працюємо зі структурою HTML
• Пишемо калькулятор
• Таймери (працюємо з таймерами, запускаємо і зупиняємо таймери)
• Робимо анімацію на сторінці. управляємо анімацією
• Пишемо слайдер
• Координати (прокрутка вгору і Паралакс)
• Валідація форм (форми і регулярні вирази)

Розміщення сайту в Інтернеті

• Що таке хостинг і доменне ім'я
• Завантажуємо сайт на хостинг. Працюємо з FTP-сервером
• Збірка проекту (отримання вмісту файлу в DOM)
• AJAX (Вчимося отримувати і обробляти дані з боку сервера. Обробка відповіді сервера, робота з JSON)

Web-програмування на мові PHP (базові знання необхідні для front end developer високого рівня)

• Обробка POST і GET запитів
• Відправка листів
• Робота з cookie на сторінці
• Висновок в консоль
• Робота з сесія на сайті
• Збірка проекту по моделі MVC

Основи роботи з CMS (на прикладі Wordpress)

• Основи роботи з CMS системами
• Установка Wordpress (на прикладі безкоштовного хостингу)
• Створення простого сайту на Wordpress
• Підключення і настройка модулів