Курсы Frontend Developer: HTML и CSS

Подборка лучших курсов Frontend Developer, которые познакомят вас с современными практиками разработки сайтов. Вы сможете усвоить с нуля основные технологии для верстки сайтов: HTML, CSS, JavaScript и Bootstrap. Продвинутые Frontend разработчики также найдут для себя подходящие обучающие программы.
Читать далее

Сравнение всех курсов

Фильтр
Курс
Формат
Online
Начало занятий
Дата формується
Длительность
4 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
уточняйте
Вечерние занятияВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Beetroot Academy
  • Frontend
Подробнее

На курсі ти зможеш опанувати інструменти, що знаходяться на передовому рівні та використовувати останні стандарти веб-розробки. Під час навчання отримуватимеш практичні завдання над проєктами як в команді, так і самостійно, створиш кілька веб-сайтів і веб-застосунків, а також зможеш верстати сайти для мобільних пристроїв. Після завершення курсу, твоє портфоліо буде готовим для того, щоб зробити перші кроки в кар'єрі Front-End розробника.

Програма курсу

HTML & CSS

  • Вступний урок, знайомство
  • Що таке сайт. Налаштування робочого процесу. Вступ до HTML
  • Системи контролю версій Git та сервіс GitHub
  • Семантика, посилання і HTML5 теги
  • Figma для Front-End розробника
  • Побудова форм
  • Знайомство з CSS
  • CSS-селектори
  • Блокова модель документа (CSS Box Model)
  • Flexbox, Bootstrap
  • Вебшрифти, Font Face
  • CSS-позиціювання і трансформація
  • Масштабована векторна графіка (SVG)
  • Робота з пре- і постпроцесорами
  • (optional) Підходи до організації та архітектури CSS-коду: SMACSS або BEM
  • Респонсивний вебдизайн (RWD)
  • Респонсивна навігація
  • Адаптивна графіка
  • Система компонування в CSS (CSS Grid Layout)
  • CSS-анімації
  • Стилізація форм CSS
  • Практика - верстання макета
  • Проєкт 1. Перший вебсайт з HTML та CSS

JavaScript

  • Основи JavaScript
  • Типи даних та оператори
  • Цикли й умови
  • Події
  • Об’єкти
  • Document Object Model (DOM)
  • Масиви
  • Функції
  • Вебсховище
  • Знайомство з jQuery та плагінами Slick Slider/Swiper
  • Асинхронний JavaScript та XML (AJAX)
  • Проєкт 2. Архітектура - базовий вебсайт + JS

Front-end бібліотеки та плагіни

  • Gulp. Набір інструментів JavaScript з відкритим вихідним кодом. Знайомство з Webpack, пакетним модулем JavaScript з відкритим кодом
  • Класи
  • Класи. Наслідування
  • Знайомство з React
  • React state та props
  • React: Routing
  • List & Conditional rendering
  • React: Hooks
  • Stateful vs Stateless components. Forms, events. Popular libraries for React
  • Проєкт 3 - Responsive Website with JS
  • Презентація фінального проєкту
  • Випускний

Бонус: Навички роботи з ШІ для кар'єри майбутнього

  • Що таке штучний інтелект?
    • Чому ШІ важливий?
    • Що насправді означає ШІ та як він працює?
    • Що може і чого не може ШІ?
  • Корисні інструменти та приклади використання:
    • Deepl
    • ChatGPT
    • Bard
    • Grammarly
    • clipdrop.co
    • Adobe Firefly
    • Photoshop
    • Perplexity.ai
  • Як використовувати ШІ для зручного пошуку роботи
    • Сайти вакансій з елементами штучного інтелекту
    • Покращення твого CV за допомогою ШІ
    • Приклади ефективних резюме та супровідних листів
    • Підготовка до інтерв'ю
  • Підбірка ШІ тулзів для пошуку роботи:
    • Bard та ChatGPT
    • Kickresume
    • JobProfile.io
    • Resumaker.ai
    • Jobscan
    • Yoodli
    • Interviewsby.ai
    • Interview Warmup
    • Interviewing.io
  • Корисні матеріали, які допоможуть розширити та заглибитись в тему (статті, відео та безплатні курси)
  • Де варто/не варто використовувати ШІ?
  • Штучний інтелект: переваги, ризики та обмеження
  • Інструменти ШІ для веброзробників
  • Дослідження можливостей GitHub Copilot для Front-End
  • Створення додатка за допомогою Copilot та React

Бонус. English club

  • Під керівництвом викладача англійської
  • Фокус на розмовну англійську
  • Формування словникового запасу англійської для ІТ
  • Написання СV та підготовка до співбесіди в іноземній компанії
  • Поділ на групи відповідно до рівня:
    • A1-A2
    • A2-B1
    • B1-B2/C

Бонус. Кар'єрне консультування

  • Навчишся створювати конкурентоспроможні резюме і супровідний лист та отримаєш на них фідбек від професійного рекрутера
  • Підготовка до інтерв'ю. Типові питання та підводні камені
  • Створиш зразковий профіль в LinkedIn
  • Дізнаєшся, де знаходити круті вакансії та як на них подаватися

Особливості курсу

  • Вечірні заняття в зумі
  • Теорія вивчається самостійно, а на заняттях розглядається лише практика
  • Навчання в командах під керівництвом викладача як тімліда
  • Три проєкти протягом курсу
  • Сертифікат після успішного завершення курсу

Викладачі курсу

  • Роман Нікіфоров - Freelancer Full-Stack Developer
  • Олександр Коваленко - Full-Stack Web Developer в webdesign.net.ua
  • Віктор Дєгтярьов - Досвід роботи 18+ років
  • Тетяна Науменко - Досвід роботи 5+ років
  • Ростислав Скиба - Досвід роботи 6+ років
  • Олексій Полчанов - Front-end/Middle Developer at Beetroot
  • Олег Марченко - Frontend Developer в Lexogrine
  • Артур Солодкий - Angular developer в Proffiz
  • Дмитро Климчук - Front-End Developer у Valtech
  • Ігор Кукоба - FrontEnd Developer в Fintex
  • Ігор Снісар - Senior Front-end Developer at Jamworks
  • Ілля Краєвський - Team Lead Front-end
  • Олександр Колесник - Layout Engineer at SpaceWhale
  • Олександр Щербина - Front-end Developer у Beetroot
  • Юрій Алєксєєв - Front-End Developer в VARTEQ Inc
  • Володимир Сенко - Front End Developer at COAX Software
  • Олексій Усанін - Senior Front-End developer в CodeIT
  • Іван Василенко - Front-End Developer в Yellow Stone
  • Олександр Підгородецький - HTML/CSS/JS Developer at Vilmate
  • Олександр Ратушний - Front-end Developer at Namecheap
Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
-
Уровень
Для опытных
Язык обучения
Ukrainian
Стоимость
1 230 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
ITGid
  • React
  • Frontend
Подробнее

Вивчаємо з простих прикладів (JSX, props, state) до хуків, redux (redux + redux toolkit). Робота з API, інтеграція з backend. Проект. Deploy на хостінг.

Програма курсу

Вивчаємо:

  • create-react-app
  • Структура програми React
  • Структура компонента React
  • JSX
  • Роутінг React
  • SPA, MPA
  • Події та функції React
  • ref
  • state, render
  • Життєвий цикл компонента
  • Створення елементів DOM
  • Хуки
  • redux, redux toolkit
  • Інтеграція React та backend (PHP)
  • Інтеграція React та backend (Node.JS)
  • Проєкт

Спринти

  • Створюємо перший додаток на React, вивчаєм структуру проєкту, знайомимось з JSX, компонентами
  • Компоненти. Створення компонентів і вкладених компонентів
  • Роутинг. Створення SPA і багатосторінкових сайтів
  • Події і функції. Отримуємо значення з input
  • Вивчаємо state в React
  • Життєвий цикл компонентів в React
  • Refs і DOM
  • Створення елементів React
  • Хуки
  • Redux і redux toolkit (частина 1)
  • Redux - store, reducers, action (частина 2)
  • Redux (частина 3). Виводимо товари інтернет-магазину
  • Redux (частина 4). Виводимо корзину інтернет-магазину
  • React і PHP
  • React і Node.js
  • Огляд проєкту по курсу
  • Проєкт. Налаштовуємо і запускаємо бекенд
  • Проєкт. Створюємо компоненти і роутинг. Компонент Create
  • Проєкт. Компонент Note, створення і збереження повідомлень. Форми, видимість блоків
  • Проєкт. Робимо активну навігацію, добавляємо Bootstrap
  • Deploy проєкту на хостинг. Розгортаємо React і Node.js на сервері

Вимоги до проходження курсу

  • Впевнені знання JavaScript, або проходження курсу JavaScript 2.0
  • Рекомендовано пройти курс "Методи масивів"

Проєкт

Розробляємо проєкт - створення сайту для обміну нотатками з можливістю видалення нотатки після перегляду. MPA додаток з роутером, створенням нотаток та занесенням їх до бази даних, отриманням нотатки з хешу, видаленням після перегляду. Оформлення - фреймворк Bootstrap.

Особливості курсу

  • 21 спринт 87 тасок
  • Проєкт
  • Допомога та підтримка
  • Розбір та усунення багів
  • Доступ без обмежень по часу
  • Сертифікація
Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
-
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
738 UAH за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
ITGid
  • Frontend
Подробнее

Вивчаємо HTML та CSS з нуля. Вчимо теги, стилі, властивості, верстаємо сторінки. Робимо адаптацію під мобільні пристрої, анімацію. Проєкт - сайт резюме.

Програма курсу

Вивчаємо:

  • Теги html
  • Види тегів
  • Верстка HTML сторінки
  • CSS, класи, id, стилі
  • Блокові та рядкові елементи
  • Позиціонування елементів
  • float, flex, grid
  • Адаптивна верстка
  • Медіазапити
  • HTML5, валідація коду
  • Семантична верстка
  • Псевдокласи та псевдоелементи
  • Анімація, @keyframe
  • gulp
  • bootstrap
  • Проєкт
  • Деплой сайту на хостинг

Спринти:

  • Основні теги HTML
  • Основи CSS. Поняття класів, стилів. Написання CSS коду
  • Правильна організація CSS коду
  • Позиціонування елементів. Таблична верстка
  • Позиціонування елементів. Властивість Position
  • Позиціонування - практика
  • Позиціонування елементів. Float
  • Позиціонування елементів. Flex
  • Позиціонування елементів. Grid Layout
  • Структура сайту. HTML 5 теги. Семантика
  • Адаптивність сайту. Перебудова сайту під мобільні пристрої
  • Псевдоелементи та псевдокласи
  • Основи анімації
  • Готовимо Gulp для проєкту
  • Починаємо проєкт
  • Розгортаємо проєкт. Bootstrap і скелет
  • Проєкт. Блок фото, контактів, навичок, досягнень
  • Проєкт. Верстаємо правий блок з досвідом роботи
  • Проєкт. Адаптуєм під мобільні пристрої
  • Заливаємо проєкт на безплатний хостинг
  • Робимо вивід інформації за домопогою JavaScript

Проєкти:

  • Верстка сторінки "Підводний човен" - для роботи з класами та id
  • Верстка сторінки плаката
  • Проєкт курсу створення сайту резюме із заповненням даними на основі JavaScript. Верстка із застосуванням фреймворку Boostrap. Складання проєкт, мінімізація файлів CSS, JS за допомогою збирача Gulp

Вимоги до проходження курсу

Базові навички роботи з комп'ютером.

Особливості курсу

  • 21 спринт та 125 тасок
  • Проєкт в портфоліо
  • Допомога та підтримка
  • Розбір та усунення багів
  • Доступ без обмежень по часу
  • Сертифікація
Больше информации
Курс
Формат
Online
Начало занятий
Дата формується
Длительность
6 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
уточняйте
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Dev Education
  • Frontend
Подробнее

Програма курсу

Теми:

  • Basic FE
  • Базові інструменти верстки
  • Інструменти просунутуї верстки
  • Базові знання з JS
  • Системи контролю версій
  • Просунутий рівень JS
  • ООП в JS
  • Методології розробки ПЗ
  • Інструменти управління процесом розробки задач
  • HTML 5 animation
  • Робота веб-з'єднань
  • Асинхронний JS
  • Базовий React
  • Просунутий React
  • Менеджер станів Redax
  • React routes
  • React hoocks
  • Регулярні вирази та шаблони проєктування
  • Бази даних
  • Node.js
  • Nest.js

Особливості курсу

  • Можливість вчитися з будь-якої точки світу у зручний час
  • Практика з перших занять та створення портфоліо
  • Навчання систематизовано та проводиться досвідченими IT-фахівцями
  • Сертифікат про проходження курсу
  • Грант у розмірі 50% від ціни курсу
Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
50 занятий
Уровень
Для опытных
Язык обучения
Ukrainian
Стоимость
1 840 UAH за курс
Занятия целый деньВыдаётся диплом/сертификат
Powercode Academy
  • Frontend
Подробнее

Пройшовши цей курс, ви поглибите своє розуміння JavaScript: ви освоїте взаємодію з сервером, дослідите оновлені версії ECMAScript, ознайомитесь з NPM репозиторіями, вивчите бібліотеку React і введенням в Redux.

Програма курсу

  • Що таке JavaScript. Специфікація ECMAScript. Web Console
  • Оголошення змінних let, const, var
  • Структура і типи даних
  • Оператори
  • Приведення типів
  • Числа Рядки
  • Практика
  • Умовні інструкції if else, switch
  • Цикли
  • Практика
  • Функції
  • Практика
  • Робота з масивами, для чого вони потрібні, методи перебору і сортування
  • Об’єкти, спадкування. Відмінності від масивів, оператори
  • Розбір практичного прикладу, завдання
  • DOM звернення до елементів
  • DOM стилі
  • Події в Javascript
  • Замикання і рекурсії
  • Серіалізація даних, розгляд форматів xml і json
  • Основні поняття асинхронного програмування
  • Практика
  • Методи взаємодії з сервером, види запитів Ajax
  • Пояснення концепції SPA
  • Робота з модулями, оптимізація роботи Javascript
  • Розгляд нових версій ECMAScript
  • NPM репозиторії, навіщо вони потрібні і як взаємодіяти з js ком’юніті
  • Взаємодіємо з реальним сервером
  • Практика
  • Огляд сучасних напрямків і фреймворків Javascript, серверний JS і інтерфейси десктоп
  • Знайомство з React
  • Webpack, для чого він потрібен, базовий шаблон webpack
  • Поглиблення в веб пак, як ми можемо використовувати ще недоступні функції ECMAScript
  • Налаштування оточення, використання create react app, JSX
  • Virtual DOM як основа React, інтерактивність сторінки, як її домагаються
  • Заглиблюємося в компоненти що таке props, state, як оживити нашу сторінку
  • Компоненти в React, життєвий цикл компонентів, функціональні компоненти
  • Види стилізацій React додатків, робота зі styled components
  • Роутінг, взаємодія з адресним рядком
  • State менеджери, їх необхідність, види, і як масштабувати великі проєкти
  • Context
  • Введення в Redux, створення редюсеров, екшенів, цикл який проходять всі дані в redux
  • Debug React додатків, робота зі статичними даними
  • Створюємо проєкт на React. Сторінка з продажу байків
  • React. Сторінка з продажу байків:
    • Верстка простих елементів
    • Верстка слайдера
    • Вибір кольору товару та контактна форма
    • Підключаємо сервер
    • Deploy на heroku
  • Що робити далі розробнику-початківцю?

Особливості курсу

  • 50 відеоуроків тривалістю 10-30 хв
  • Для успішного проходження курсу необхідні базові знання HTML, CSS та Javascript
  • Доступ до всіх матеріалів протягом 6 місяців
  • Додаткові посилання на статті та кейси для опрацювання
  • Сертифікат про закінчення курсу (при 80% засвоєного матеріалу)
Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
50 занятий
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
1 840 UAH за курс
Занятия целый деньВыдаётся диплом/сертификат
Powercode Academy
  • Frontend
Подробнее

На курсі можна опанувати сучасні методи верстки адаптивних сайтів за допомогою HTML та CSS. Протягом курсу Ви навчитесь писати адаптивні веб-сторінки з використанням HTML, CSS, вивчите основи Javascript та опануєте систему контролю версій Git.

Програма курсу

Frontend Base

  • Введення
  • Налаштування середовища розробника, вибір редактора коду
  • Що таке HTML? Структура елементів HTML
  • Метадані
  • Основи редагування тексту: Назви, параграфи. Списки
  • Створення гіперпосилань. Абсолютні та відносні URL
  • Структура елементів веб-сайту
  • Термінові, блокові елементи
  • Верстка Резюме. Базовий шаблон
  • Робота із зображеннями
  • Верстка Резюме. Додаємо фото та векторні зображення
  • Робота з таблицями, як створюються сучасні таблиці
  • Робота з формами
  • Навіщо CSS? Синтаксис у CSS
  • Веб-шрифти
  • Стилізація тексту, списків, посилань
  • Селектори, типи селекторів. Комбінатори
  • Додавання CSS у Резюме. Підключення шрифтів
  • Каскадність та успадкування
  • Псевдокласи та псевдоелементи
  • Блокова модель документа
  • Розміщення елементів на сторінці
  • Flexbox – як один із сучасних форматів блокової верстки
  • Верстка резюме Додавання стилів
  • Стилізація зображень. Фонові зображення
  • Верстаємо картку товару
  • Препроцесори та постпроцесори – для чого вони необхідні і як спрощують стилізацію
  • Верстаємо форму відправлення
  • Властивості CSS для анімації
  • Grid Layout
  • Верстаємо галерею товарів
  • Media queries – адаптація сайтів до всіх видів екранів
  • Верстка адаптивного меню
  • Figma, Zeplin, Avocado вилучення необхідних стилів
  • Практичне заняття, верстаємо просту сторінку
  • Оптимізація верстки. Розбір питань та ситуацій
  • Система контролю версій git
  • Поглиблений аналіз git підключаємо локальний git до github
  • Javascript – введення в мову
  • Робота зі змінними, відмінності let, const, var
  • Типи даних
  • Оператори
  • Числа Рядки
  • Умовні інструкції
  • Цикли
  • Функції Javascript, види оголошення функцій, їх аргументи
  • Робота з масивами, для чого вони потрібні, методи перебору та сортування масивів
  • Об’єкти, робота з об’єктами

Особливості курсу

  • 50 відеоуроків тривалістю 10-20 хв
  • Доступ до всіх матеріалів протягом 6 місяців
  • Додаткові посилання на статті та кейси для опрацювання
  • Сертифікат про закінчення курсу (при 80% засвоєного матеріалу)
Больше информации

Страницы

Читайте нас в Telegram, чтобы не пропустить анонсы новых курсов.

Відгуки про курси

Отзывы о курсах

Євген   15.11.2024

Загалом курсом задоволений, інформації багато, іноді навіть занадто багато, але з часом все вкладається. Плюс завжди є можливість звернутися до наставника або куратора по допомогу.

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Галина   16.10.2024

В курсе есть все необходимое, и если все вдумчиво изучить и делать конспекты, у вас есть очень хорошие шансы вырасти в будущем в отличного специалиста

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Марина    12.10.2024

Навчаюся на курсі Front-end . Я новачок в IT. Багато читала і дозріла. Вчуся місяць. Поки що все виходить. Але хочу відзначити величезну підтримку від викладачів і куратора

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Сергій   17.09.2024

Курси насичені, цікаві, корисні. Якщо ви все ще сумніваєтеся, то сподіваюся мій відгук допоможе вам визначитися з вибором)

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend
Лиза   17.08.2024

На данный момент от начала учебы прошло больше месяца и могу сказать, что это уверенный курс для старта карьеры.

Рекомендации: Рекомендую
5
Средняя: 5 (1 голос)
Курсы Frontend

Страницы