Основи Front-End
Курс верстки сайтів для новачків

3 місяці навчання по курсу
Основи FrontEnd і ти зможеш створювати сайти і розуміти супутні технології

Якщо ти хочеш навчитися програмувати "з нуля", то варто почати з нашого курсу зі створення сайтів для початківців.

- З чого почати вивчення веб програмування?
Звісно ж з основ!

- Що таке основи веб програмування?

Це розуміння як працює комп'ютер, сервер, інтернет. Як відбувається спілкування між користувачами і сайтами. Які фактори впливають на швидкість взаємодій.

Серед розробників існує розподіл областей розробки, такі як Front-End i Back-End. Що це означає?

Фронтенд розробник розробляє інтерфейси для користувачів. Вигляд, оформлення, анімація, відображення на моніторі, позіціонування, адаптивні додатки - це все відповідальність "фронтендщиків".

Бекенд розробник відповідає за роботу сайту на серверній стороні, формування сторінок сайту, запити до баз даних, керування безпекою, розробка логіки і функціоналу сайту.

Курс Основи ФронтЕнд від нашої академії дозволить почати свій шлях на просторах "фрілансу", а саме робота в інтернеті, виконання невеличкіх проектів від замовників з усього світу і допоможе з'орієнтуватися в подальшому напрямку свого розвитку. А набуття досвіду в розробці надасть можливість для вдосконалення своїх навичків.


Програма курсу
Основи Front-End

Що таке веб-розробка?
Front-end і back-end - в чому різниця?
Статичні та динамічні веб-сайти
Процес веб-розробки
Що таке WWW?
Принцип роботи 'клієнт-сервер'
Браузери
Консоль розробника
Загальний огляд редакторів
Online редактори
Offline редактори
HTML/CSS валідатори
Взаємодія HTML & CSS & JS
Простий приклад HTML сторінки

Загальний огляд HTML та CSS Архітектура проекту
Базова структура HTML документа
Правила написання коду
Базові теги
Коментарі в HTML
Синтаксис CSS
Способи додавання CSS до HTML-сторінки
Детальне знайомство з панеллю розробника
Блочні та лінійні елементи

Основні елементи HTML + HTML5 Content categories
Div, span
Заголовки
Семантичні елементи
Використання тегів HTML5 для формування структури шаблону
Розгляд, призначення тегів HTML5 і їх переваги

Робота з посиланнями і якорями
Робота з зображеннями
Нумеровані та ненумеровані списки
HTML entities
Розробка сторінки резюме

Порядок застосування стилів
Селектори, важливість селекторів
Вкладеність, успадкування та групування властивостей
Нормалізація і скидання стилів. Reset CSS
Відносні і статичні одиниці вимірювання
Робота зі шрифтами (сімейства, стилі, розміри, насиченість). Іконочні та користувацькі шрифти
Зображення (jpg, png, gif, svg, webp). Спрайти. Font Awesome

Методології BEM, SMACSS, OSCSS. Правила іменування класів по BEM
Псевдо-елементи та псевдо-класи
Розробка навігаційного меню

Модель позиціонування CSS - Box model
Базові параметри блоку (width, height, padding...)
Спеціальні параметри блоку (overflow, background)
Відступи (margin, padding) та границі (border)
Block, inline, inline-block
Робота з фоном та градієнтом
Позиціонування елементів. Float. Static. Relative. Absolute. Fixed. Sticky. Z-index
Робота з властивостями float і clear. Поняття «сітки»

Нарізка макета
Основні інструменти
Поняття сітки
GIT:
Встановлення git
Налаштування git
Основні команди git

Робота з FlexBox
Застосування flex для створення сітки

Способи адаптивного дизайну
Поняття адаптивної і чуйною верстки, основні правила створення адаптивного сайту
Mobile/desktop first
Медіа-запити
Логічні оператори, що застосовуються в медіа-запитах
Медіа-функції
Pixel Perfect
Кросбраузерність

Таблиці в HTML
Основні проблеми табличної верстки

Хостингові і доменні панелі
Файловий менеджер (Filezilla)
Структура проекту. Валідність і семантика
Основи SEO
Публікація сайту. Check list розробника

Каркаси CSS (CSS Frameworks)
Встановлення фреймворка
Система сіток
Налаштування сітки
Огляд вбудованих компонентів
Основний контейнер - класси container та container-fluid
Підхід до позиціонування на основі рядків та колонок
Примусове позиціонування на сітці - push, pull. Offset
Адаптивність - xs, xl, …
Поняття навігаційного меню та вимоги до нього
navbar в bootstrap
Додавання логотипу в navbar
Додавання пунктів меню
Створення класичного “gamburger”-меню для мобільної версії

CSS анімація, ефекти
Ефекти анімації при наведенні
Анімації дочірніх елементів
Ефекти зображення
Transform, transition, animation, gradient

JS як мова програмування
Консоль JS в браузерах
Базове поняття про DOM
Змінні і вирази, ES5/ES6
Умовні інструкції, знайомство з jQuery та jQuery UI
Цикли
Об'єкти і масиви, ES5/ES6
Функції (scope), ES5/ES6
Функції (замикання, рекурсія)
Контекст виконання функцій, способи передачі контексту, ES5/ES6
Прототипи, ООП в прототипному стилі, розширення вбудованих методів прототипів
Історія, причини та мета створення формату JSON
JSON як більш складний варіант масиву об’єктів
Побудова front-end логіки на основі даних
Архітектура взаємодії web-сторінки з API
jquery як база для стандартних рішень задач front-end
Практика на jQuery, робота з DOM, стилі Bootstrap
Практика на jQuery, плагіни Bootstrap

Форми вводу даних. Стандартні елементи
Валідація (перевірка) даних на боці клієнта
Стилізація елементів форм на JavaScript і на CSS
Збереження даних на боці клієнта - localstorage, session storage
Побудова логіки сторінки, орієнтованої на роботу з даними
Отримання даних з серверу за допомогою AJAX
Надсилання команд та даних на сервер
Приклади взаємодії з серверами, що надають інформацію в публічний доступ (новини google або NY Times, котування валют, тендери prozorro, PrivatBank API)
Основи роботи з Node.js та фреймворком Express
Обробка даних на сервері

Налаштування проекту
Знайомство з препроцесорами SCSS та PUG
GULP task для SCSS
Функціонал і можливості GULP, SCSS, PUG

Огляд JavaScript фрейморків
Робота з Vue.js
Рендерінг, директиви і події
Components, Props і Slots
Vue-cli
Анімації

Вартість курсу 6500 грн за курс.
Графік занять:
понеділок, середа, п'ятниця на 18:30 (2години)
Початок навчання: січень 2020 року

ЗАЛИШИЛИСЬ ЗАПИТАННЯ?
вкажіть своє ім'я, номер телефону та свій Email і ми зв'яжемось з Вами протягом 15 хвилин
Адреса

м. Івано-Франківськ
вул. Галицька, 67

Контакты

Email: academy@circle.if.ua
Телефон: +38 097 494 23 94