Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.
Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.
Кому корисний цей курс?
Новачкам — Хочешь научиться самой востребованной интернет профессии? Обязательно приходи к нам.
Бекендерам — Давно уже работаешь с серверной частью проектов, но хочешь научиться менять визуал сайтов? Тебе к нам!
Веб-дизайнерам — Давно рисуешь сайты, но хотел бы сам научиться верстать? Посети курс и на практике узнаешь как создаются сайты.
Маркетологам — Не хватает основ веб-разработки для продвижения сайтов? Мы поможем восполнить этот пробел.
SММщикам — Работа SMM, как правило, неразрывна с поддержкой сайтов. Самое время изучить основы веб-разработки.
Підприємцям — Сложно представить современный бизнес без сайта. Освой азы, чтобы общаться с разработчиками на одном языке.
Програма базового курсу
Стартова лекція.
— Разбор основ программы Adobe Photoshop;
— Работа с изображениями;
Початок роботи. Основи HTML
— Подготовка проекта к верстке;
— Структура html-документа (html, head, body) ;
— Обзор популярных тегов HTML;
— Обзор семантических тегов HTML.
Основи HTML
— Идентификаторы и классы;
— Aтрибуты для 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;
— Cоздание паттернов 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 сами находили вас.
Відгуки
Відгуків немає, поки що.