Focus IT College

Frontend розробник

У Focus IT College ми пропонуємо унікальні курси розробки інтерфейсу, які допоможуть вам стати експертом у створенні інтерактивних і візуально привабливих інтерфейсів користувача для веб-додатків. Незалежно від вашого рівня знань, наші курси підходять як для початківців, так і для досвідчених розробників, які прагнуть розширити свої навички.

Почати навчання
6 місяців 2 рази на тиждень
Живі заняття у вечірній час
До 15 учнів у класі
Матеріали курсу та заняття ведуться англійською мовою
Від новачка до професіонала
Технології та програмне забезпечення, які ви додасте до свого інструментарію
html [#124]Created with Sketch.
HTML5
CSS3
JavaScript
react
React
git
Git
visual_studio [#005FEE]Created with Sketch.
Visual Studio

Модулі

HTML & CSS

1. Що таке веб-сайт:

  • Що таке веб-сайт, його складові та принципи роботи.
  • Налагодження робочого процесу веб-розробника.
  • Введення в HTML: теги, структура документа, семантика.

2. Системи контролю версій:

  • Ознайомлення з системами контролю версій.
  • Git та GitHub: базові команди, гілки, pull requests.

3. HTML5:

  • Детальний розгляд тегів HTML5: структура, семантика, атрибути.
  • Введення в ARIA та доступність веб-сайтів.

4. CSS:

  • Введення в CSS: синтаксис, селектори, властивості.
  • Flexbox: гнучка система розмітки веб-елементів.
  • Bootstrap: популярна CSS-бібліотека.

5. Коробкова модель CSS:

  • Внутрішній устрій HTML-елементів: відступи, рамки, поля.
  • Позиціонування елементів на сторінці.

6. Фігма:

  • Інструменти для дизайну інтерфейсів: Figma.
  • Створення прототипів та макетів веб-сайтів.

7. Пре- та постпроцесори:

  • SASS/SCSS: розширення можливостей CSS.
  • Webpack: автоматизація збирання та обробки ресурсів.

8. БЕМ:

  • Методика БЕМ: методологія для написання CSS-коду.

9. Шрифти:

  • Шрифти в Інтернеті: web-шрифти, системні шрифти.
  • @font-face: підключення та налаштування web-шрифтів.

10. Трансформації та анімації:

  • Трансформація позиції CSS: зміщення, обертання, масштабування.
  • CSS анімація: створення динамічних ефектів.

11. Створення форм:

  • HTML-теги для створення форм: input, textarea, select.
  • Перевірка валідності даних, JavaScript.

12. Макет сітки CSS:

  • CSS Grid: система для створення складних макетів.
  • Адаптивні макети з використанням Grid.

13. SVG:

  • Масштабована векторна графіка (SVG): можливості та принципи роботи.
  • Створення та редагування SVG-зображень.

14. Чуйність та адаптивність:

  • Чуйна навігація: адаптація меню під різні пристрої.
  • Адаптивна графіка: заміна зображень залежно від роздільної здатності.

15. SEO та кросбраузерність:

  • Заснови SEO: оптимізація веб-сайтів для пошукових систем.
  • Кросбраузерність: тестування та оптимізація для різних браузерів.

16. Проект:

  • Створення простого веб-сайту для портфоліо.
  • Застосування набутих знань та навичок на практиці.
JavaScript

  • Основи JavaScript:

    • Типи даних та оператори:
      • Частина 1
      • Частина 2
      • Частина 3
    • Цикли та умови:
      • Частина 1
      • Частина 2
    • Функції
    • Масиви
    • Об’єкти
    • Класи:
      • Частина 1
      • Частина 2
      • Частина 3
    • Модель документа (DOM)
    • Події
    • Вступ до Slick Slider та jQuery
    • Створення власних карт на прикладі Google Maps API. AJAX
    • Локальне сховище (Web Storage)
    • Проект 2. Архітектура: базовий веб-сайт + JS
Front-end: React
  • Вступ до React:
    • Частина 1
    • Частина 2
  • Стан та властивості React. Методи життєвого циклу:
    • Частина 1
    • Частина 2
  • Списки та умовний рендерінг:
    • Частина 1
    • Частина 2
  • Компоненти з станом та без стану. Форми, події. Популярні бібліотеки для React
  • React Хуки
  • React маршрутизація
  • Проект 3. Адаптивний веб-сайт з JS:
    • Частина 1
    • Частина 2
    • Частина 3
    • Частина 4
  • Презентація проекту
  • Випускний

Хто такий розробник Frontend?

Фронтенд-розробник — це творець користувальницьких інтерфейсів у веб-просторі, основним завданням якого є створення привабливих, інтуїтивно зрозумілих і функціональних веб-додатків.

Фронтенд-розробник відповідає за:

  • Розробка та впровадження дизайнів у веб-формати з використанням мов розмітки, стилів і сценаріїв.
  • Оптимізація продуктивності та доступності веб-додатків для різних браузерів і пристроїв.
  • Тісна співпраця з дизайнерами, бекенд-розробниками та іншими членами команди для досягнення цілей проекту.
React

Безкоштовна індивідуальна консультація

Ми тут, щоб відповісти на будь-які ваші запитання. Отримайте уявлення про наш підхід до технічної освіти та дізнайтеся, що можливо, навчаючись у нас.