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

• Стартовая лекция:

– Разбор основ программы 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.

Домашнее задание.

• Актуальные темы:

– Как найти свой первый заказ или устроиться на работу, если ты новичок;

– Выясним, что лучше подойдет именно тебе: офис, удаленная работа или фриланс;

– Самоорганизация и работа в команде: рассмотрим популярные сайты и приложения по управлению проектами;

– Список актуальных фриланс-бирж.