Сайтостроение [ТИПИЧНЫЙ ВЕРСТАЛЬЩИК] [Анна Блок] Базовый курс для верстальщиков

Web_Development-256.png
Кому полезен этот курс:
  • Новичкам. Хочешь научиться самой востребованной интернет профессии? Обязательно приходи к нам.
  • Бэкендерам. Давно уже работаешь с серверной частью проектов, но хочешь научиться менять визуал сайтов? Тебе к нам!
  • Веб-дизайнерам. Давно рисуешь сайты, но хотел бы сам научиться верстать? Посети курс и на практике узнаешь как создаются сайты.
  • Маркетологам. Не хватает основ веб-разработки для продвижения сайтов? Мы поможем восполнить этот пробел.
  • SMMщикам. Работа SMM, как правило, неразрывна с поддержкой сайтов. Самое время изучить основы веб-разработки.
  • Предпринимателям. Сложно представить современный бизнес без сайта. Освой азы, чтобы общаться с разработчиками на одном языке.
Во время обучения мы верстаем сайт, который так или иначе будет связан с темами курса. Будет интересно!

По окончанию курса у Вас будет две сверстанные странички, которые будут храниться в личном профиле GitHub. Первая страничка — это вёрстка по учебному макету, вторая — по самостоятельно выбранному макету для закрепления всего материала.

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

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

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

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

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

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

СКАЧАТЬ КУРС:
 

Обратите внимание

Назад
Сверху