Курс верстальників

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Кому корисний цей курс?

Новачкам – Хочеш навчитися найбільш затребуваної інтернет професії? Обов’язково приходь до нас.

Бекендерам – Давно вже працюєш із серверною частиною проєктів, але хочеш навчитися змінювати візуал сайтів? Тобі до нас!

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

Маркетологам – Не вистачає основ веб-розробки для просування сайтів? Ми допоможемо заповнити цю прогалину.

SММщикам – Робота SMM, як правило, нерозривна з підтримкою сайтів. Саме час вивчити основи веб-розробки.

Підприємцям – Складно уявити сучасний бізнес без сайту. Опануй ази, щоб спілкуватися з розробниками однією мовою.

Програма базового курсу

Стартова лекція.
– Розбір основ програми Adobe Photoshop;
– Робота із зображеннями;

Початок роботи. Основи HTML
– Підготовка проекту до верстки;
– Структура html-документа (html, head, body) ;
– Огляд популярних тегів HTML;
– Огляд семантичних тегів HTML.

Основи HTML
– Ідентифікатори та класи;
– Атрибути для input і textarea;
– Відмінності між button і a;
– Посилання для соціальних мереж;
– Робота з поштою і скайпом;
– Робота з git.

Підключення CSS, робота з текстом
– Підключення CSS до документа HTML;
– Структура CSS-файлів;
– Способи підключення шрифтів на сторінку;
– Форматування тексту за допомогою CSS;
– Стилі для роботи зі шрифтами;
– Різні типи запису кольору в CSS документі;

Розміщення об’єктів CSS
– Селектори, які варто знати і застосовувати;
– Типи позиціонування елементів;
– Встановлення favicon на сторінку.

Стилізація елементів CSS
– Стилізація посилань і кнопок;
– Робота зі списками;
– Робота з after і before;

Види сіток CSS
– Центрування об’єктів у документі;
– Відступи padding і margin;
– Flexbox CSS;
– CSS Grid;

Фон і зображення CSS
– Колір фону;
– Завантаження зображення через CSS;
– Повтор зображення;
– Створення градієнта в CSS;
– Фільтри в CSS.

Рамки та обведення CSS
– Створення рамок CSS;
– Створення радіусів CSS;
– Створення тіней;
– Створення зовнішніх рамок CSS;

Оживляємо сайт з CSS
– Переходи в CSS;
– Трансформації в CSS;
– Створення анімацій за допомогою CSS3

Адаптивність CSS
– Перевірка HTML і CSS на валідність;
– Медіа-запити;
– Основні правила створення адаптивного сайту;
– Відмінності гумової верстки від адаптивної.

Векторні зображення
– Збереження SVG-зображень в Illustrator;
– Створення SVG через теги;
– Base64;
– Створення патернів SVG.

Верстка email-листів
– Правилам верстки email;
– Створення на прикладі;
– Сервіси, для вивантаження свого шаблону;
– Кросбраузерна верстка.

Основи jQuery-
– Бібліотеки JavaScript;
– Додавання бібліотеки jQuery на сторінку;
– Основні селектори;
– Фільтри jQuery;
– Показати та заховати об’єкт з jQuery.

Основи jQuery
– Огляд плагіна jQuery UI;
– Події наведення та зміщення вказівника миші;
– Поширені задачі, які вирішуються за допомогою jQuery.

Популярні плагіни для роботи
– Слайдери;
– Галерея зображень.

CSS-препроцесори
– Докладний огляд SASS;
– Короткий огляд LESS;
– Короткий огляд Stylus;
– Який препроцесор вибрати для роботи?

Створення сайту на безкоштовному хостингу Github
– Короткий опис систем контролю версій. Для чого вони потрібні?
– Реєстрація на сайті Github;
– Створення репозиторію;
– Наповнення репозиторію файлами.

CSS-фреймворки
– Що таке CSS-фреймворки?
– Які CSS-фреймворки існують на сьогоднішній день?
– Bootstrap: яку версію вибрати?
– Огляд елементів Bootstrap.

Про роботу і замовників
– Як знайти своє перше замовлення або влаштуватися на роботу, якщо ти новачок;
– З’ясуймо, що краще підійде саме тобі: офіс, віддалена робота або фріланс;
– Самоорганізація і робота в команді: розглянемо популярні сайти і додатки з управління проектами;
– Список актуальних фріланс-бірж.

Програма просунутого курсу

Робота з макетом
– Детальний огляд навчального макета
– Робота із зображеннями (PNG і SVG);

Розмітка сайту
– Методологія БЕМ
– Створення розмітки сайту HTML5
– Робота з Git для публікації коду

Налаштування оточення і збирачі проєктів
– Встановлення Node.js;
– Огляд збирачів (Gulp, Grunt);
– Встановлення Gulp 4 для проєкту.

CSS препроцесори
– Огляд CSS-препроцесорів (SASS, Less, Stylus);
– Програми компіляції та плагін VS Code;
– Використання на практиці SCSS.

Система контролю версій (Git)
– Основи Git;
– Роботи з Git;
– Створення Git репозиторію;
– Розгалуження Git.

Canvas, робота з SVG
– Основи Canvas
– Огляд основних параметрів
– Основи SVG
– Самостійна побудова SVG-зображення без сторонніх програм
– Оптимізація SVG-зображень із графічних програм

Flexbox і Grid CSS
– Основи Flexbox
– Основи Grid CSS
– Що доречніше використовувати у 2019 році?

Анімації та переходи для пожвавлення сайту
– Основи використання @keyframes
– Створення плавних переходів
– Робота з SVG

Інтерактивні карти Google і Yandex
– Як встановити інтерактивну карту на сайт?
– Яку карту вибрати?
– Стилізація карт
– Робота з API карт

Лічильники аналітики, sitemap
– Що таке лічильники аналітики і навіщо вони потрібні?
– Методи встановлення лічильників
– Налаштування лічильників
– Що таке Sitemap?
– Генерація файлу Sitemap

Основи PHP і mySQL
– Основи PHP
– Основи mySQL
– Форма відправки
– Валідація форм

Оптимізація роботи сайту
– Валідація файлів HTML і CSS
– Визначення швидкості завантаження сайту
– Виправлення помилок
– Оптимізація зображень і коду

Оплата на сайт
– Як встановити оплату на сайті?
– Автоматична генерація кнопок для оплати
– Список сайтів, що надають послуги онлайн-кас

WordPress
– Що таке WordPress і кому підходить?
– Структура файлів
– Створення власного шаблону
– Огляд корисних плагінів

Основи JavaScript
– Основні терміни та синтаксис
– Що таке console.log
– Як працювати з консоллю
– Змінні та значення

Основи JavaScript
– Масиви
– Цикли
– Умовні оператори
– Оператори порівняння
– логічні оператори – Умовні оператори – Оператори порівняння – Логічні оператори

jQuery, jQuery UI і додаткові плагіни
– Основи jQuery
– Робота з плагіном jQuery UI
– Для чого варто використовувати jQuery?
– Створення слайдера для сайту на практиці.

Адаптивність
– Що таке @media
– Створення media запитів
– Що таке Mobile First верстка?

Вибір майданчика для роботи
– Офіс: плюси і мінуси
– Віддалена робота: плюси і мінуси
– Фріланс: плюси і мінуси
– Огляд майданчиків
– Звідки варто почати свій пошук замовників?

Пошук роботи
– Огляд найбільшого майданчика з пошуку роботи;
– Огляд регіональних майданчиків;
– Linkedn: як оформити свій профіль, щоб HR самі знаходили вас.