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

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

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

Frontend development

At Focus IT College, we offer unique frontend development courses that will help you become an expert in creating interactive and visually appealing user interfaces for web applications. Regardless of your level of expertise, our courses are suitable for both beginners and experienced developers looking to expand their skills.

Start learning
6 months, 2 times per week
Live classes during evening hours
Up to 15 students per class
Course materials and classes are in English
From beginner to pro
Technologies and software you will add to your toolbox
html [#124]Created with Sketch.
HTML5
CSS3
JavaScript
react
React
git
Git
visual_studio [#005FEE]Created with Sketch.
Visual Studio

Modules

HTML & CSS
  • What is a website. Work process setup. Introduction to HTML.
  • Version Control Systems, Git and GitHub
  • HTML5 tags
  • Introduction to CSS
  • Flexbox, Bootstrap
  • CSS Box Model
  • CSS selectors
  • Figma
  • Working with pre- and post-processors
  • BEM methodology
  • Fonts in web, Font Face
  • Flexbox
  • CSS Position Transform. CSS Animation
  • Creating forms
  • CSS Grid Layout
  • Scalable Vector Graphics (SVG)
  • Responsive navigation. Adaptive Graphics
  • RWD. SEO. Cross-browser compatibility
 
  • Project 1. A simple website for your portfolio
 
JavaScript
  • JavaScript basics
  • Data types and operators. Part 1
  • Data types and operators. Part 2
  • Data types and operators. Part 3
  • Loops and conditions. Part 1
  • Loops and conditions. Part 2
  • Functions
  • Arrays
  • Objects
  • Classes. Part 1
  • Classes. Part 2
  • Classes. Part 3
  • Document Object Model (DOM)
  • Events
  • Introduction to Slick Slider and jQuery
  • Customized maps with an example of Google Maps API. AJAX
  • Web storage
  • Project 2. Architecture – basic web-site + JS
 
Front-end: React
  • Introduction to React. Part 1
  • Introduction to React. Part 2
  • React state and props. Lifecycle methods. Part 1
  • React state and props. Lifecycle methods. Part 2
  • Lists and conditional rendering. Part 1
  • Lists and conditional rendering. Part 2
  • Stateful vs Stateless components. Forms, events. Popular libraries for React
  • React: Hooks
  • React routing
  • Project 3. Responsive website with JS. Part 1
  • Project 3. Responsive website with JS. Part 2
  • Project 3. Responsive website with JS. Part 3
  • Project 3. Responsive website with JS. Part 4
  • Project presentation
  • Graduation
 

Who is a Frontend developer?

A frontend developer is the creator of user interfaces in the web space, whose main task is to craft attractive, intuitive, and functional web applications.

Frontend developer is responsible for:

  • Developing and implementing designs into web formats using markup languages, styles, and scripts.
  • Optimizing the performance and accessibility of web applications for various browsers and devices.
  • Collaborating closely with designers, backend developers, and other team members to achieve project goals.
React

Free individual consultation

We’re here to answer any questions you may have. Get an insight into our approach to tech education and learn what’s possible when studying with us.