Базовый и Продвинутый курс для верстальщиков

Базовый и Продвинутый курс для верстальщиков

Год выпуска: 2019
Производитель: Типичный верстальщик
производителя: //tpverstak/training-profi/
Автор: Анна Блок
Продолжительность: 14:30:14
Тип раздаваемого материала: Видеоурок
Язык: Русский
Описание: В течении месяца на базовом курсе мы верстаем , используя технологии HTML/CSS. Именно он и станет первой работой для Вашего портфолио! А Во время продвинутого - мы будем верстать на практике при помощи Gulp и SCSS.

Содержание
Программа базового курсаСтартовая лекция.- Разбор основ программы 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 сами находили вас.

Файлы примеров: присутствуют
Формат видео: MP4
Видео: AVC/H.264, 1280x720, 16:9, 30fps, ~87-552 Kbps
Аудио: AAC, 2 ch, 127-128 Kbps