Онлайн навчання

Профессія HTML верстальник

Отримай професію за 8 тижнів під керівництвом досвідченого наставника. Після курсу – працевлаштування до веб-студії або робота на фрілансі.

Коли:
8 Серпня —  8 Жовтня
Рівень:
З нуля
Старт 8 Серпня. Йде набір до групи 
Онлайн курс - Просунута верстка

Навчіться створювати сайти і заробляти на цьому від $700 на місяць, працюючи на фрілансі або в кращих IT компаніях світу.Отримайте професію HTML верстальник сайтів!

96
Годин
з ментором
40
домашніх
завдань
3
випускних
проекти
Курс - це можливість
Заробляти на фрілансі
Отримайте нове джерело доходу, почніть заробляти на фрілансі, застосовуючи знання отримані на курсі.
Здобути нову професію в IT
Випускники влаштовуються в IT компанії та веб студії. Збудуйте свою кар'єру
веб-розробника.
Запустити особистий проект
Інвестуйте у знання, зберігши час, гроші та незалежність від розробників. Ви створите функціональний та красивий сайт для себе або свого бізнесу.
Курс включає в себе
Технології, що вивчаються на курсі
HTML5, новые теги, семантичная верстка
HTML5: валідна
семантична верстка.
HTML5, новые теги, семантичная верстка
CSS3: адаптив,
ефекти та анімації.
HTML5, новые теги, семантичная верстка
Робота з макетами в Figma
i Photoshop.
HTML5, новые теги, семантичная верстка
SCSS - препроцесор
для зручної роботи з CSS.
HTML5, новые теги, семантичная верстка
Основи програмування:
JavaScript, jQuery, PHP.
HTML5, нові теги, семантична верстка
Найкращі практики верстки:
BEM naming, Flex и Grid CSS.
HTML5, новые теги, семантичная верстка
Мобільна верстка
та адаптивні сайти.
HTML5, новые теги, семантичная верстка
Bootstrap 4 для швидкої
та зручної верстки сайтів.
HTML5, новые теги, семантичная верстка
Як влаштований інтернет,
сервер та браузери.
HTML5, новые теги, семантичная верстка
Усі необхідні програми для верстальника:
VS Code, Avocode, Filezilla, Photoshop та інші...
HTML5, новые теги, семантичная верстка
Вражаючі проекти для
вашого портфоліо.
HTML5, новые теги, семантичная верстка
Постановка верстки на WordPress
із розміщенням на хостингу.
На навчання приходять із цілями
Навчитися розробляти сайти на замовлення
Стати веб-розробником та працювати в IT компанії
Працювати на фрілансі з будь-якої точки світу
Запустити проект для себе чи свого бізнесу
Отримати додаткове джерело доходу (від $300 до $1500 на місяць)
Бонуси на курсі
тільки для наших студентів
Редактори коду
  • Огляд редакторів коду
  • Встановлення та налаштування редактора
    Sublime Text
  • Плагіни для Sublime Text, package control
  • Тема Material Theme
  • Редактор Brackets
  • Visual Studio Code
HTML5 и CSS3 верстка
  • HTML теги
  • Основні HTML теги
  • Структура проекта
  • Верстка таблиць
  • CSS3 ефекти
  • Градієнти
  • Трансформації
  • Анімація
Налаштування сайту
  • Хостинг та домен
  • Работа сайту
  • Купівля домену
  • Купівля хостингу
  • Налаштування Домену та Хостингу
Інструменти
  • Автооновлення сторінки під час верстки
  • Firefox плагін AutoReload
  • Google Chrome LivePage
  • Стартовий шаблон для верстки
Веб-шрифти
  • Використання Google Fonts
  • Використання WebFont.ru
  • Генерація веб-шрифтів
  • Шрифтові іконки
Інтерактивні елементи
  • Карусель - підключення та налаштування
  • Таби, вкладки та перемикачі
  • Багаторівнева навігація
  • Галерея фотографій
  • Модальні вікна
  • Сортування та фільтрація елементів
  • Работа з Google Maps, розміщення мап на сайті
Фреймворк Bootstrap
  • Сітка Bootstrap
  • Підключення та використання
  • Швидке прототипування на Bootstrap
  • Використання та стилізація компонентів
Техніки верстки
  • Flex box верстка
  • Pixel Perfect верстка
  • CSS grid розмітка верстки
  • Мобільна верстка
  • Адаптивна верстка
  • Mobile first и desktop first підходи
  • Робота з сітками, створюємо свою сітку
  • Photoshop, нарізка графіки з макету
  • Основи юзабіліті
Оптимізація верстки
  • Спрайти
  • Оптимізація роботи із зображеннями
Прискорення роботи
  • Препроцесор LESS
  • Сніпетети Sublime Text
  • Gist заготовки коду
Ефекти
  • Анімація при прокручуванні сторінки
  • Паралакс ефекти
  • Прелоадери (ефект завантаження сторінки)
  • Плавне прокручування на сайті
Мобільна верстка
  • Mobile first підхід
  • Мобільна адаптивна навігація
JS, jQuery, PHP
  • Онлайн калькулятор
  • Форми зворотнього зв'язку
  • Надсилання листів із сайту
  • Валідація даних у формах
  • Підключення jQuery плагінів
  • Написання jQuery скриптів
Програмування
  • Основи PHP
  • PHP - основи ООП
  • Основи JavaScript (Перегляд)
  • JavaScript - модульний підхід
  • JavaScript - ООП
  • jQuery - бібліотека мови JS
  • ajax запити на сервер без оновлення сторінки
Git workflow - стандарт командної роботи
  • Контроль версій - Git
  • Сервіс GitHub
Програма курсу
Навчальна програма кожного тижня
Тариф Стандарт
Модуль 1. Основи HTML і CSS. Валідація. Хостинг та домен
  • Основи HTML і CSS
  • Веб-шрифти
  • Валідація
  • Семантика
  • Оформлення хостингу
  • Робота з FTP
  • VS Code і FileZilla
Модуль 2. Блочная верстка. Photoshop. PixelPerfect
  • Блочная модель
  • Абсолютне позиціонування
  • Псевдокласи в CSS
  • CSS трансформація
  • CSS Анімація
  • Figma
  • Верстка картки товарів, все в одну колонку
  • Flex-box модель
  • Вправи на FlexBox
  • PixelPerfect
  • Верстка картки
  • Робота з фотошопом
Модуль 3. Верстка сайту
  • Верстаємо головну сторінку
  • Верстаємо Контакти
  • Стилізація форми у Контактах
  • Вставка мапи Yandex / Google Maps на сайт
  • Верстаємо внутрішні сторінки
  • Перевірка з PixelPerfect, семантика
  • Opengraph для сайтів, SEO теги, семантика, фавіконка
Модуль 4. Адаптивна верстка для мобільних пристроїв
  • Адаптивна верстка для мобільних пристроїв
  • Adaptive (адаптивний) та responsive (чутливий) веб-дизайн
  • Desktop first and mobile first
  • Мобільна адаптація
Модуль 5. Кращі практики верстки. SCSS та BEM naming. Оптимізація графіки
  • BEM naming
  • SCSS препроцесор. (Приклад - переклад на SCSS)
  • Робота з SVG спрайтами
  • Оптимізація графіки для завантаження webp
  • Оптимізація під retina дисплеї
  • Верстка проекту
Модуль 6. Основи JS та скрипти для проекту
  • Основи JS
  • Основи DOM
  • Пишемо свої скрипти на JS
  • Підключаємо JS скрипти
  • Основи jQuery
  • Пишемо свої скрипти на jQuery
  • Підключаємо jQuery плагіни
  • Скрипти для лендінгу
  • Мобільна адаптація проекту
Модуль 7. PHP форми зворотного зв'язку. Оптимізація верстки. CSS Grid. Bootstap 5
  • Оптимізація швидкості завантаження сайту
  • Оптимізація Google Page Speed
  • Bootsrtrap 5 сітка та прототипування
  • CSS Grid, приклади використання
  • PHP форми зворотного зв'язку
Модуль 8. Працевлаштування та фріланс. Заробіток на веб-розробці
  • Працевлаштування та кар'єра
  • Складання резюме
  • Фріланс у веб-розробці
  • Перші гроші на веб-розробці
  • Як рахувати вартість своєї роботи. Приклад.
  • Як обґрунтовувати вартість проекту замовнику
  • Оформлення профілю на фрілансі
  • Відповіді на проекти
  • Пошук замовлень без фріланс бірж
  • Розвиток себе як фахівця
Преміум група
Модуль 9. JavaScript та jQuery плагіни для верстки сайтів
  • Каруселі
  • Модальні вікна
  • Валідація форми
  • Маска для номера телефону
  • Мобільна навігація
  • Page scroll progress bar
  • Smooth scroll
  • One Page Scroll
  • Паралакс ефекти
  • Таби
  • fetch з JS
  • Ajax з jQuery
Модуль 10. Основи PHP. Відправлення форм на пошту та збереження даних у БД
  • Тиждень PHP
  • Основи PHP
  • Сайт з шаблонами на PHP
  • Форми зворотного зв'язку на PHP, надсилання листів на пошту
  • Основи роботи з Базою Даних PHP
Модуль 11. Система керування сайтами WordPress
  • Знайомство з CMS WordPress
  • Постановка верстки на CMS WordPress
  • Створення теми на CMS WordPress
  • Кастомні загальні налаштування сайту
  • Тип користувача контенту
  • Користувацькі поля для контенту
Модуль 12. Додаткові інструменти. Контроль версій та складання проекту
  • Складання проекту за допомогою Gulp
  • HTML шаблонізатор Pug
  • Контроль версій Git та GitHub
Навчальні макети
які ви верстаєте під час навчання
Перший проект
Мобільна верстка
Сайт портфоліо
Як проходить навчання
технічні та організаційні моменти

Онлайн майстер-класи

Загальний дзвінок 3-4 рази на тиждень по 2.5 години, вивчення всих тем курсу. Навчайтеся з будь-якої точки світу.

Домашні завдання

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

Чат для спілкування

У чаті потоку учасники курсу спілкуються та допомагають один одному. Ми створюємо дружню атмосферу. Разом вчитися і досягати поставленої мети завжди легше, ніж поодинці.

Відео уроки

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

Три випускні проекти

Немає нічого кращого за практику. У процесі навчання ви зверстаєте кілька сайтів, та зробите підсумковий випускний проект.

Консультації з наставником

Виникли проблеми з проектом? Не біда! На індивідуальній консультації наставник докладно розповість і пояснить, що до чого.

Дружня спільнота
випускників нашого курсу
Клуб выпускников WebCademy

💁 Допомагаємо один одному Dopomahayemo ody

Після навчання ми продовжуємо спілкування із випускниками курсу. Допомагаємо один одному з питань верстки та веб-розробки.

👨‍💻 Вакансії та проекти

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

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

Ваше резюме
після проходження курсу
Фотография
Степан Андрійович Бандера
Посада: HTML-верстальник
Степан Андрійович Бандера
Посада: HTML-верстальник
Ключові навички
  • Повноцінна верстка сторінок сайту
  • Вільне володіння HTML та CSS
  • Bootstrap 3 / 4 / 5 + MDB
  • Препроцесор Sass
  • Знання Adobe Photoshop / Figma для роботи з макетами
  • Кросбраузерна верстка
  • Верстка для мобільних пристроїв (адаптивна та чутлива верстка)
  • Оптимізація під мобільні пристрої
  • Оптимізація роботи із зображеннями
  • Уміння розумітися на чужому коді
  • Розуміння основ юзабіліті
  • Основи Англійської
  • Основи JavaScript
  • Основи PHP
Бажана заробітна плата
30 000 грн
Досвід роботи
менше 1 року
Зарплата верстальника
від 15 000 до 60 000 грн на місяць

На курсі є блок з працевлаштування та фрілансу. Щоб ви змогли знайти гідну роботу та добре заробляти, застосовуючи навички та знання, отримані на курсі. Приклади вакансій із сайту rabota.ua

Записатися на потік
Старт 8 Серпня
Тривалість від 8-ми тижнів

Навчання у закритій групі з наставником. Доведення до результату.

Стандарт: 8 Серпня — 8 Жовтня (8 тижнів)
Преміум: 8 Серпня — 8 Листопада (12 тижнів)

Тест драйв
1-й тиждень навчання
Тільки перший тиждень 
  • Особистий кабінет на навчальній платформі
  • Домашні завдання
  • Перевірка ДЗ куратором
  • 3 проекти на курсі
  • Сертифікат користувача
  • Доступ до матеріалів курсу після завершення навчання
  • Щоденна підтримка куратора та викладача в чаті
  • Дипломна робота: сайт Портфоліо.
  • 15 годин англійської з репетитором
  • Фріланс коучинг. Отримання першого замовлення на фрілансі.
  • Підготовка до працевлаштування. Допомога у складанні резюме. Код-рев'ю тестових завдань.
  • Підготовка та проведення тестових співбесід перед працевлаштуванням.
1200 ₴/перший тиждень
Взяти тест-драйв
Стандарт
Навчання у групі
8 тижнів навчання
  • Особистий кабінет на навчальній платформі
  • Домашні завдання
  • Перевірка ДЗ куратором
  • 2 проекти на курсі
  • Сертифікат користувача
  • Доступ до матеріалів курсу після завершення навчання
  • Щоденна підтримка куратора та викладача в чаті
  • 10 годин англійської з репетитором
  • Дипломна робота: сайт Портфоліо.
  • Фріланс коучинг. Отримання першого замовлення на фрілансі.
  • Підготовка до працевлаштування. Допомога у складанні резюме. Код-рев'ю тестових завдань.
  • Підготовка та проведення тестових співбесід перед працевлаштуванням.
вартість курсу
300 $
Знижка до 8 серпня
250 $/за ввесь курс
8 тижнів навчання
оплата по частям

перший платіж 155 $
другий платіж 155 $

Записатись оплата двома частинами Системы оплаты
Преміум
Група + Наставник
12 тижнів навчання
  • Особистий кабінет на навчальній платформі
  • Домашні завдання
  • Перевірка ДЗ куратором
  • 3 проекти на курсі
  • Сертифікат користувача
  • Доступ до матеріалів курсу після завершення навчання
  • Щоденна підтримка куратора та викладача в чаті
  • Дипломна робота: сайт Портфоліо.
  • 15 годин англійської з репетитором
  • Фріланс коучинг. Отримання першого замовлення на фрілансі.
  • Підготовка до працевлаштування. Допомога у складанні резюме. Код-рев'ю тестових завдань.
  • Підготовка та проведення тестових співбесід перед працевлаштуванням.
вартість курсу
380 $
Знижка до 8-го серпня
340 $/за весь курс
12 тижнів навчання
оплата частинами

перший платіж 200 $
другий платіж 200 $

Записатися оплата двома частинами Системы оплаты
Відповіді на запитання
Загальні питання з курсу
Де відбувається навчання? Це курси онлайн?

Це курси онлайн. Для їх проходження та навчання вам не треба кудись їхати і витрачати час на дорогу. Проходити курси можна онлайн вдома або за робочим місцем. Все що потрібно - це комп'ютер та Інтернет. Під час проходження курсу ви дивитесь відео-уроки в онлайн кабінеті школи, ми спілкуємося в Zoom/Telegram/Skype чаті та в групах.

Як і коли проходять онлайн заняття?

Навчання відбувається онлайн у форматі відео-дзвінків. 3 рази на тиждень (Пн-Ср-Пт), з 10.00 до 12.30 відеодзвінок у групі.

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

Скільки занять у курсі?

В курсі буде більше 28 уроків з усіх основних тем у верстці сайтів та у веб-розробці. Крім відео-уроків, буде 8 онлайн майстер-класів для розбору практичних тем та відповідей на запитання.

Я мешкаю в іншому часовому поясі. Як це позначиться на моєму навчанні?

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

Годинний пояс ніяк не впливає на вашу ефективність навчання. На курсі навчаються люди із різних країн. Це і Україна, Польща, Чехія, Молдова, Казахстан, Німеччина, Естонія, Латвія, США, Канада та інші країни світу.

Питання щодо навчання
Кому я можу поставити запитання, якщо мені щось незрозуміло?

При проходженні курсу ви можете безпосередньо ставити запитання викладачеві у загальному навчальному чаті. Також можна поставити питання для розбору на майстер класі або в особистій онлайн-консультації з наставником.

Що робити, якщо у мене проблема, з якою я не можу впоратися?

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

Що робити, якщо я пропустив щотижневий онлайн майстер-клас?

Якщо ви пропустили щотижневий онлайн майстер-клас, завжди можете подивитися його в записі. Запис доступна наступного дня після проведення заняття. Якщо у вас з'являться питання щодо заняття, яке ви пропустили, завжди можна задати їх викладачеві в онлайн чаті.

Як організована практика?

Після кожного уроку ви отримуєте завдання для опрацювання отриманих знань на практиці. Готову роботу ви відправляєте викладачеві, він перевіряє та дає докладний розбір, код-рев'ю на вашу роботу. Пише Розгорнутий коментар: що добре, що погано, над чим варто попрацювати. Практичні завдання виконуються з урахуванням реальних макетів. Усі домашні завдання мають бути виконані під час проходження курсу.

Хто викладає ваші навчальні програми?

Усі наші викладачі — практикуючі експерти з досвідом роботи в ІТ компаніях. Це одна з головних цінностей, які ви отримуєте в рамках навчальної програми: навчайтеся у фахівців, задаєте їм питання та отримуєте від них індивідуальні рекомендації щодо своїх робіт.

Які знання та навички я отримаю?

Ви навчитеся самостійно верстати макети середньої складності та познайомитеся з основами front-end розробки.

Що потрібно для отримання сертифіката?

Всі учасники курсу отримують сертифікати. У сертифікаті ми робимо відмітку про те, наскільки студент освоїв матеріал курсу Є різні позначки: "курс прослухав", "курс пройшов" та "пройшов курс з відзнакою". Для отримання сертифіката "курс пройшов" і вище - необхідно здати всі домашні роботи у час проходження курсу.

Питання щодо технічних моментів
Я зовсім новачок і нічого не знаю про створення сайтів. Чи підійде курс?

Курс розрахований на новачків. Ми починаємо з самих азів і розбираємо все детально від початку. Для Ви повинні вміти користуватися інтернетом, браузером, електронною поштою, скайпом.

Чи потрібно встановлювати спеціальні програми?

1. Для навчання вам знадобиться браузер Google Chrome.

2. Текстовий редактор для написання коду ми розглянемо та встановимо на курсі. Рекомендований редактор для проходження курсу Visual Studio Code (VS Code).

3. Для роботи з дизайн макетами vs використовуватимемо редактор Figma та Photoshop. Усі програми ми встановимо та налаштуємо у процесі навчання.

У якому редакторі ми працюватимемо?

Ми працюватимемо в редакторі Visual Studio Code. Якщо у вас є переваги до іншого редактору, ви зможете використати його.

У мене немає комп'ютера та ноутбука. Чи можна навчатися з планшета або смартфону?

Курс і програми, які ми використовуємо на курсі, є тільки на комп'ютерах. Підійде система Windows, MacOs чи Linux. Але на планшетах з Android або iOS у вас не буде всіх потрібних програм. Тому для проходження курсу потрібен тільки комп'ютер або ноутбук. Планшет і смартфон – не підійдуть.

Який комп'ютер потрібний для навчання?

Підійде комп'ютер або ноутбук. Рекомендуємо використовувати ОС Windows 10. MacOs і Linux теж підійдуть, Однак курс записаний повністю на Windows 10. За технічними характеристиками: оперативна пам'ять від 4 Gb, відео карта – не потрібно. Якщо ви плануєте купувати комп'ютер - то рекомендуємо процесор від Intel, починаючи від версії i3 та вище.

Питання щодо оплати
Як оплатити курс?

Сплатити курс можна онлайн картами VISA, MasterCard. Можливий варіант оплати переказом на банківський рахунок чи на карту (для України). Для цього напишіть контакти внизу сторінки, щоб уточнити деталі.

Натисніть кнопку "Записатися", після заповніть форму заявку. Далі ви потрапите на сторінку, з якої зможете сплатити участь у курсі. Там будуть докладні інструкції щодо оплати.

Сплатити курс можна повністю, або на виплат.

З питань, пов'язаних із оплатою, пишіть нам у особисті повідомлення Телеграм.

Як сплатити курс в розстрочку?

Можна сплатити курс двома частинами. Перша частина – 50% до початку курсу. І друга частина оплати до 5-го тижня навчання на курсі З питань пов'язаних з оплатою пишіть нам у особисті повідомлення Телеграм.

Чи можу я повернути гроші за навчання, якщо курс не підійде?

Ви можете запросити повернення грошей протягом першого тижня навчання. Вам буде повернуто отриману від вас суму. Подробиці наведено в Публічній Оферті.