Старт після оплати
Онлайн
Станьте розробником сучасної IT професії, опануйте HTML/CSS, JavaScript, Hard & Soft Skills, і почніть заробляти вже через 3 місяці в $ на роботі мрії
Це програміст, який розробляє інтерфейси – елементи вебсайтів, програм та застосунків, які дозволяють людині з ними працювати
Перспектива розвитку
в будь-якому IT-
напрямку
Великий зростаючий
попит
на фахівців
у всьому світі
Висока ЗП
(близько 1 000$ на старті
і до 3 000$ - 6 000$ через 1-2 роки)
Робота у великих ІТ-компаніях, вільний графік, соц. пакети та інші бонуси
Це професія, яка зараз швидко освоюється
та має великий зростаючий попит
на фахівців
у всьому світі
Якщо вчитися – то лише у найкращих! Дивіться хто буде передавати вам свій досвід та знання протягом 3 місяців
Дивіться повну програму курсу
Ви отримаєте структуровані знання,
тотальну практику та досвід найкращих
спікерів у своєму напрямку.
1
Розробка інтерфейсів з нуля
Модуль №1. Розробка інтерфейсів з нуля
В результаті :
опануєте базові навички про роботу веб-сайту і дізнаєтесь як завантажується веб-сторінка. На занятті розберемо чим займається HTML/CSS фахівець та які напрямки розвитку доступні після проходження курсу.
Пам’ятка студента
Словник із термінами
Корисні матеріали
Конспект уроку
Презентація уроку
2
Початок роботи
Модуль №2. Початок роботи
В результаті :
завантажите програми для початку роботи і налаштуєте комфортне середовище розробки для подальшого навчання. На занятті розберемо як завантажити першу сторінку в інтернет, і як здавати домашнє завдання.
Корисні матеріали
Конспект уроку
Презентація уроку
3
Введення у HTML
Модуль №3. Введення у HTML
В результаті :
дізнаєтесь про основи HTML, як працюють теги та атрибути. На занятті виконаємо першу розмітку сайту для сучасної пекарні “SHOP bakery”, розберемо як працювати із зображеннями і інтерактивними елементами.
Корисні матеріали
Конспект уроку
Презентація уроку
4
Продовження HTML
Модуль №4. Продовження HTML
В результаті
продовжите вивчати HTML, і працювати з інструментами розробника в браузері. На занятті виконаємо розмітку таблиці, додамо на сайт мапу з Google Maps та відео з YouTube.
Корисні матеріали
Конспект уроку
Презентація уроку
5
Введення в CSS
Модуль №5. Введення в CSS
В результаті :
дізнаєтесь як підключати стилі до HTML сторінки і вперше зміните зовнішній вигляд сайту. На занятті розберемо як правильно писати стилі, поговоримо про каскадність, специфічність і наслідування стилів. Також, додамо перші CSS-змінні.
Корисні матеріали
Конспект уроку
Презентація уроку
6
Шрифти
Модуль №6. Шрифти
В результаті
дізнаєтесь як працюють шрифти в браузері. На занятті підключимо шрифти із сервісу Google Fonts на сайт, а також завантажимо шрифти локально в проект. Також, додамо базові стилі шрифту до текстових елементів.
Корисні матеріали
Конспект уроку
Презентація уроку
7
Блокова модель
Модуль №7. Блокова модель
В результаті :
зрозумієте, що таке блокова модель елемента і як браузер відображає блокові і рядкові елементи. На занятті додамо зовнішні і внутрішні відступи до секцій, кнопок, посилань, заголовків і тд.
Корисні матеріали
Конспект уроку
Презентація уроку
8
Flexbox
Модуль №8. Flexbox
В результаті :
навчитесь гнучко розміщати елементи за допомогою розкладки флексів. На занятті зробимо першу флекс-розмітку, і розмістимо елементи у відповідності з макетом.
Корисні матеріали
Конспект уроку
Презентація уроку
9
Розкладка CSS Grid
Модуль №9. Розкладка CSS Grid
В результаті
На цьому занятті ми навчимося працювати із декором в СSS, а також розглянемо, які є типи зображень. Розберемо як додавати різні декоративні ефекти і елементи.
Основні теми:
1. Типи зображень
2. Фон і градієнт
3. Тінь елемента
4. Псевдолементи
Корисні матеріали
Конспект уроку
Презентація уроку
10
Декоративні ефекти
Модуль №10. Декоративні ефекти
В результаті :
зрозумієте, які бувають типи зображень і як додавати декоративні ефект на сайт. Наприклад, тінь, градієнт, або фонове зображення елемента. Також, на занятті попрацюємо із псевдоелементами для додавання декоративних елементів.
Корисні матеріали
Конспект уроку
Презентація уроку
11
Графіка
Модуль №11. Графіка
В результаті :
опануєте навички роботи із растровою і векторною графікою на сайті. На занятті розберемо як додавати SVG іконки на сторінку і правильно їх використовувати.
Корисні матеріали
Конспект уроку
Презентація уроку
12
Позиціонування
Модуль №12. Позиціонування
В результаті
дізнаєтесь, як позиціонувати елементи на сторінці. Наприклад, зробити шапку сайту фіксованою у верхній частині, або розмістити текст поверх зображення. Також, на занятті поговоримо про порядок накладання елементів один на одний і керування відображенням вмісту елемента.
Корисні матеріали
Конспект уроку
Презентація уроку
13
Анімація
Модуль №13. Анімація
В результаті
додасте першу плавну анімацію на сайт. На занятті набумо навичок роботи із обертанням, масштабуванням і викривленням елементів. Також, додамо плавні переходи зміни кольору при наведенні.
Корисні матеріали
Конспект уроку
Презентація уроку
14
Створення веб-форм
Модуль №14. Практика: тестування API
В результаті :
створите першу форму на сайті. На занятті дізнаємось як працюють форми, і виконаємо розмітку полів введення на сторінці.
Корисні матеріали
Конспект уроку
Презентація уроку
15
Валідація веб-форм
Модуль №15. Валідація веб-форм
В результаті :
додасте перевірку введених значень у полях форми. Навчитесь робити поля обовʼязковими для заповнення і додасте валідацію полів за різними критеріями.
Корисні матеріали
Конспект уроку
Презентація уроку
16
Препроцессори
Модуль №16. Препроцессори
В результаті
опануєте навички роботи із препроцесором. На занятті розібʼємо файл стилів на окремі файли для візуальної структури і зручної навігації по проєкту.
Корисні матеріали
Конспект уроку
Презентація уроку
17
СSS Методології
Модуль №17. СSS Методології
В результаті :
дізнаєтесь, як додають імена класів для HTML-елементів, коли над проєктом працює ціла команда, і зміните назви класів відповідно методології БЕМ. На занятті розглянемо основні методології для зручності майбутньої підтримки сайту.
Корисні матеріали
Конспект уроку
Презентація уроку
18
Адаптивність і Адаптивна графіка
Модуль №18. Адаптивність і Адаптивна графіка
В результаті :
зробите сторінку красивою для відображення на мобільних пристроях і планшетах. На занятті розберемо за допомогою чого можна зробити адаптивну верстку. Також виконаємо розмітку мобільного меню на сайті
Корисні матеріали
Конспект уроку
Презентація уроку
19
Екзамен HTML/CSS
20
Введення
Модуль №20. Введення
В результаті
На цьому уроці ви ближче познайомитись з командою та спікерами, що будуть проводити ваше навчання, також дізнаєтесь історію виникнення професії, її цілі, завдання та принципи. Складемо портрет розробника та поговоримо про варіанти кар’єрного розвитку.
Корисні матеріали
Конспект уроку
Презентація уроку
21
Оператори
Модуль №21. Оператори
В результаті
В результаті цього уроку ви дізнаєтесь , що таке: оператори, вивід данних/ ввід данних, вирішення логічних задач та побудова алгоритмів, умови if/els та switch/case
Корисні матеріали
Конспект уроку
Презентація уроку
22
Масиви i цикли
Модуль №22. Масиви i цикли
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: масиви, цикли, методи присвоєння, методи масиву, області видимості
Корисні матеріали
Конспект уроку
Презентація уроку
23
Функції
Модуль №23. Функції
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: функції, стрілочні функції, лексичне оточення, контексти і виклики
Корисні матеріали
Конспект уроку
Презентація уроку
24
Замикання this
Модуль №24. Замикання this
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: замикання, this, call, apply, bind, практика
Корисні матеріали
Конспект уроку
Презентація уроку
25
Об'єкти та класи
Модуль №25. Об'єкти та класи
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: ооп, класи, об'єкти, інкапсуляція, абстракція, наслідування, поліморфізм
Корисні матеріали
Конспект уроку
Презентація уроку
26
ES6
Модуль №26. ES6
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: конструктори, внутрішні методи, прототипи, ES6, ES9, якість коду
Корисні матеріали
Конспект уроку
Презентація уроку
27
DOM
Модуль №27. DOM
В результаті
В результаті цього уроку ви дізнаєтесь,, що таке: DOM, Навігація по DOM, Властивості, Робота з DOM- вузлами
Корисні матеріали
Конспект уроку
Презентація уроку
28
Події
Модуль №28. Події
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: події, форми, event propagation, Drag'n'Drop
Корисні матеріали
Конспект уроку
Презентація уроку
29
Local Storage & node.js
Модуль №29. Local Storage & node.js
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: Local Storage, практика, Node.js, додавання - видалення бібліотек
Корисні матеріали
Конспект уроку
Презентація уроку
30
Асинхронний Js & дата
Модуль №30. Асинхронний Js & дата
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: складання проектів: WebPack, робота з бібліотеками, практика
Корисні матеріали
Конспект уроку
Презентація уроку
31
Протоколи передачі данных
Модуль №31. Протоколи передачі данных
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: Асинхронний Js, Синхронність, асинхронність, багатопотоковість, setTimeout и setInterval, Дата, Promise
Корисні матеріали
Конспект уроку
Презентація уроку
32
REST API
Модуль №32. REST API
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: TCP/IP, HTTP, HTTPS, Коди відповіді, помилки і обробка
Корисні матеріали
Конспект уроку
Презентація уроку
33
WebPack, Gulp
Модуль №33. WebPack, Gulp
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: REST API, Ajax, Fetch, практика
Корисні матеріали
Конспект уроку
Презентація уроку
34
React
Модуль №34. React
В результаті
В результаті цього уроку ви дізнаєтесь, що таке: Основи популярної бібліотеки, Створення зборки, використання React на прикладах
Корисні матеріали
Конспект уроку
Презентація уроку
35
Екзамен з JavaScript
36
Що таке soft skills?
Модуль №36. Що таке soft skills?
Чек лист: оцінка своїх soft skills
37
Soft skills для IT спеціаліста
Модуль №37. Soft skills для IT спеціаліста
Перелік книг для читання
38
Цілі і їх досягнення
Модуль №38. Цілі і їх досягнення
Шаблон: Колесо балансу + трекер цілей
39
Емоційний інтелект/Емпатія
Модуль №39. Емоційний інтелект/Емпатія
Чек лист: Як розвивати в собі емпатію
40
Основи комунікації
Модуль №40. Основи комунікації
41
Конфліктологія
Модуль №41. Конфліктологія
42
Ораторське мистецтво
Модуль №42. Ораторське мистецтво
43
Ефективне навчання
Модуль №43. Ефективне навчання
44
Основи фінансової грамотності
Модуль №44. Основи фінансової грамотності
Шаблон: розрахунок свого бюджету
Перелік додатків для ведення особистих витрат
45
Планування і таймменеджмент
Модуль №45. Планування і таймменеджмент
Шаблон: Визначення пріоритетності задач
Перелік додатків для планування і трекінгу
46
ФІНАЛЬНА РОБОТА
Модуль №46. ФІНАЛЬНА РОБОТА
Розробка власного проекту на вибір:
Практичні домашні завдання
Ми подбали про те, щоб ви якомога
легше та продуктивніше освоїли нову
професію та відточували свої навички
на практиці
Куратори, ментори-практики
Ви перейматимете досвід людей, які працюють
у великих IT-компаніях і розуміють як подати
матеріал у зрозумілому для тебе алгоритмі.
У тебе завжди буде підтримка та допомога.
За групою буде закріплена людина,
яка допомагатиме у процесі навчання
Навчання у зручний час
Уроки проходять наживо – 2-3 рази на тиждень.
Після кожного уроку ти отримуватимеш його
запис, який буде доступний в особистому
кабінеті 24/7
Можливість вчитися з 0
Ми склали програму таким чином, щоб вона
була зрозуміла людині, яка не має технічної
або IT-освіти! Ми почнемо з самих азів —
вивчимо базові технічні поняття, а потім перейдемо
до самих способів та особливостей розробки.
Диплом
Після закінчення навчання у вас є можливість
отримати диплом (за підсумками виконання ДЗ
та тестування). Це в рази збільшить шанси
на успішне працевлаштування.
Коучинг з працевлаштування
Методологія курсу побудована таким чином,
що наприкінці навчання ти матимеш можливість
приєднатися до занять з працевлаштування,
де фахівець розбере твоє резюме, дасть поради
та тренує тебе до проведення інтерв'ю.
Працевлаштування
Наша компанія дає можливість після закінчення
навчання, за умови відвідування всіх занять
та виконання ДЗ у термін, проходження коучингу
з працевлаштування, отримати роботу з великою
вірогідністю протягом 3 місяців
1
Теорія + практика
Ви дивитеся заздалегідь підготовлені відеоуроки та отримуєте практичні завдання, засновані на матеріалі уроку, та шаблони їх виконання.
2
Д/З + тестування
Протягом усього курсу за вами закріплений ментор та куратор, які перевіряють ваші домашні завдання, дають зворотній зв'язок та відповідають на запитання.
3
Живі Q&A-сесії
Спікери курсу проводять сесії “Питання-відповідь” в онлайн-форматі, де ви можете поставити запитання та отримати розгорнуті відповіді у реальному часі.
4
Диплом
Після закінчення навчання ви проходите додаткове тестування та отримуєте диплом, який підтверджує, що ви – професійний Frontend-розробник.
Просто кілька скріншотів із сайтів пошуку роботи:
власники, керівники та співробітники провідних компаній
Почніть навчатися вже зараз, а оплату вносьте частинами. Комфортний формат розстрочки: від 2 до 6 місяців* *На Вашій картці повинен бути відкритий кредитний ліміт на суму повного платежу.
Пропозиція
діє до:
Як сплатити частинами?
Старт після оплати
Онлайн
Щоб першим забронювати участь та підключитися до лімітованої групи на кращих умовах, заповніть форму
Чому мені варто вибрати професію Frontend-розробника?
IT захоплює нові сфери, а бізнес переходить в онлайн. Фронтендники потрібні майже в кожному проєкті, тому IT-компанії розширюють команди зі швидкістю 20-30% на рік. Ця професія буде жити й трансформуватись найближчі 50 років
Чи вирішуються на курсі реальні завдання?
Основний акцент в процесі навчання ми робимо на практику. За підсумками кожного уроку вам треба буде виконати кілька практичних завдань для відпрацювання отриманих навичок.
Frontend Developer - хто це та що він робить?
Це програміст, який створює інтерфейси вебсайтів та програм. Наприклад, промосторінки та лендинги, інтернет-магазини, онлайн-сервіси для перегляду погоди чи планування завдань.
Фронтендщик бере готові дизайн-макети та створює (верстає) ту частину вебсторінки, яку бачить користувач: блоки, параграфи, зображення, кнопки, форми, текст тощо. Це цікава та відповідальна робота, оскільки його код впливає на кінцевий вигляд та роботу продукту.
Що таке Frontend та Backend? У чому різниця?
Frontend – це видима частина продукту, з якою користувач взаємодіє у браузері. Уяви сторінку сайту, картинки, текст, форми, кнопки, анімацію – все це стосується фронтенду. Завдання програміста – “перенести” макет дизайнера на вебсторінку. Це й означає “зверcтати сайт”.
Backend – це внутрішня частина продукту або “начинка”, яка прихована від користувача. Наприклад, коли купуєш кросівки в інтернет-магазині, то програма посилає запит на сервер, обробляє дані та надсилає іншу інфу про те, що товар оплачений. Продумати всю цю логіку, написати код та налаштувати обмін даними – робота бекендника.
Що складніше: Frontend чи Backend?
У попередньому пункті ми розповіли, чим відрізняються ці два напрями. Початківцям простіше працювати над візуальною частиною програми (Frontend), тому що можна одразу побачити всі зміни програмного коду на вебсторінці.
Є розробники, яким подобається створювати внутрішню частину програми (Backend) – базу даних, архітектуру, програмну логіку. Для цього, крім HTML/CSS та JavaScript, потрібно знати додаткову мову програмування. Наприклад, Java або Python.
Що потрібно знати Frontend-розробнику?
Початківець Frontend-розробник повинен знати мову розмітки HTML та мову стилів CSS, а також мову програмування JavaScript. Потрібно вміти працювати із системою контролю версій (Git) та розуміти інтерфейс графічного редактора Figma. Це hard skills, яким тебе навчать у Genius Space.
Одних технічних навичок недостатньо, ще важливі soft skills. Це особисті якості людини, які допомагають працювати в команді, грамотно спілкуватися, ставити цілі та виконувати завдання. До soft skills також відносять кар’єрні навички та англійську мову. Все це ти також прокачаєш на курсі.
Як опанувати професію Frontend-розробник з 0?
Потрібно володіти певними технічними та м’якими навичками. Якщо вчити Frontend самому, займаючись по 2-3 години на день, на один лише JavaScript знадобиться 12-18 місяців.
На курсі Frontend online ти опануєш професію за 3 місяці. Чому така різниця? Просто ти навчаєшся за актуальною програмою, працюєш із ментором та викладачем, ставиш їм запитання, отримуєш фідбек.
Крім цього, під час навчання тобі допомагають зробити резюме та сторінку в LinkedIn. Ти підтягуєш англійську, тренуєшся проходити співбесіди (технічна та з рекрутером).
Якими навичками необхідно володіти, щоб успішно пройти навчання?
Необхідно бути впевненим користувачем інтернету. Бути в міру уважним. Легко формулювати питання і не боятися труднощів, а також не приховувати проблеми і бути готовим покликати на допомогу, коли вона буде потрібна.
Як сплатити курс з іншої країни чи від компанії?
Ми приймаємо платежі з усього світу. Також ми зможемо оформити рахунок на європейську чи українську компанію. Залишіть заявку і менеджер запропонує Вам зручний варіант оплати.
Диплом про навчання від Genius Space
Після складання всіх домашніх завдань та фінального іспиту студенти отримають електронний диплом англійською мовою.
Чи допомагаєте випускникам із працевлаштуванням?
В рамках Genius Space Ви дізнаєтесь як потрапити в топові IT-компанії, ми розповімо покроково як треба знайомитись з вимогами, етапами співбесід та технологіями, які використовує компанія. Таким чином Ви знатимете, які компетенції варто розвивати, щоб працевлаштуватися в ту чи іншу компанію. Ви матимете реальну можливість поспілкуватися з рекрутерами та HR-ами, а також з менеджерами проектів або технічними фахівцями. Також в компанії Genius Space працює унікальний відділ топових рекрутерів, які вам будуть допомогати в пошуку компанії вашою мрії.
Чи можна сплатити курс частинами, чи є у Вас розстрочка?
Так, курс можна сплатити безвідсотково частинами через Monobank або PrivatBank. Щоб дізнатися про це більше, залиште контакти – ми передзвонимо та розповімо подробиці.