Зачем: Чтобы понимать весь процесс создание сайтов с нуля до полной реализации.
Знать, как работает сфера, где лежат деньги и как выбрать свое место.
Чтобы влиться в тему и начать понимать языки разметки для дальнейшей работы.
Тут базовые понятия без которых никуда.


Урок 1. Как работает сайт. Как работают сайты. Клиент серверная архитектура.Backend и frontend.Как выглядит и из чего состоит код веб-страницы. Простая веб-страница на HTML. Тэги и атрибуты. Установка редактора
кода Sublime Text 3


Урок 2. UI/UX. Прототипирование веб-страниц. Axure.Интерфейс: задачи, цели, польза, эстетика и функциональность. Понятие юзабилити и основы эргономики для дизайнеров Урок 3. Работа с графикой для верстальщика. Формат и требования дизайн-макетов.

-Навык работы с дизайн-макетом
-Горячие клавиши для быстрой работы с макетом
-Работа со слоями, папками, смарт-объектами
-Графика для web (gif, png, jpeg, svg)
-Avocode для быстрой работы с графикой
-Как открывать проекты .sketch

Дополнительное видео:

• Создание сетки для макета в Adobe Photoshop
• Создание макросов для работы в Adobe Photoshop
• Работа с графикой в Photoshop (старый видео-урок)
  
• Плагины для работы верстальщика в Google Chrome
  
• Сервисы для тестирования верстки

Дополнительные сервисы:

• Сервис для векторизации изображений онлайн
  
• Ссылка на сайты с более чем 180+ PSD макетами
  
  

Урок 4. Настройка рабочего пространства. Создание папки с проектом

Настройка автообновления при помощи Browser-sync
Тонкая настройка Sublime text 3.
Emmet — инструмент, ускоряющий работу с HTML
Что такое домен и хостинг
Краткий обзор хостингов и панелей администрирования SIP/ISP
Настройка FTP через FileZilla


Урок 5. Основы HTML. Структура HTML5-документа

Элементы HTML разметки. Теги.
Виды тегов. Парные/непарные теги.
Служебные «невидимые» теги.
Видимые теги для работы.
Атрибуты тегов.
Атрибуты специального назначения.
Атрибуты общего назначения.
Текстовые теги. Преобразование текста.
Теги картинок и ссылок.
Стандарты и валидность. W3Cкомментарии в HTML;

Дополнительное видео

Где смотреть дополнительную информацию
Правило работы со справочниками
Работа с codepen и аналогами
Плейлист HTML для самых маленьких

Дополнительные сервисы и программы

Справочники по html
Ссылки на сервисы по расшариванию кода
Статья про Тег HEAD


Урок 6. Основы CSS.

Варианты подключения таблиц стилей.Селекторы CSS (id, class, вложенные элементы)Наследование и группирование свойствПриоритеты применения стилей

Работа с текстом в CSS

• Декорирование текста
  
• Преобразование текста
  

Цвета в CSS

• Форматы цветов
  
• Прозрачность (альфа-канал)
  

Блочная модель CSS


Дополнительное видео

Работа с инструментом Devtools от Google Chrome
Навык отладки своего кода

Дополнительные сервисы и программы

Справочники по CSS


Урок 7. Блочная модель в CSS. (Айдар) Строчные и блочные элементы HTML

Ширина, высота, рамка и отступы объектов
Как работает Float
Зачем нужен clearfix Наследование CSS-свойствАбсолютные и относительные пути


Результат модуля:

Настроенное рабочее пространство. Подготовленный шаблон для дальнейшей работы.
Понимание базовых основ HTML и CSS.

Зачем: применяем все полученные знания сразу на практике. Верстаем настоящий сайт. Учимся, сразу набивая руку и получая нужные навыки еще во время обучения.


Урок 16. Подключение шрифтов.

Теория.
Узнаем шрифты из макета
Подключение шрифтов через Google Fonts
Подключение нестандартных шрифтов
Параметры для шрифтов в CSS
Практика
Подключаем шрифты, верстаем шапку сайта

Дополнительные видео

Обзор сервисов по конвертации шрифтов
Как скачать найденный на Google Fonts шрифт
Иконочные шрифты

Дополнительные сервисы и программы

Сервис шрифтов от Google
Сайты для конвертации шрифтов
Плагин для Google Chrome по определению шрифта


Дополнительный Урок. Работа с текстом.

Работа с шрифтами. Размещение текста в несколько колонок.
Рассмотрим механизмы представления текстовой информации: оформление, выравнивание, отступы.
Переключаемые вкладки для создания меню.
Рассмотрим основы Canvas.
Рассмотрим работу с границами в CSS, способы создания рамок элементов.
Создание прозрачных рамок, теней, скругленных углов, градиентов


Урок 17. Псевдоклассы и псевдоэлементы в CSS.

Псевдоклассы на примере ссылок и картинок
Псевдоэлементы, что это такое
Верстка из макета элементов с наведением
Верстка главной секции сайта

Дополнительные видео

Всплывающее окно без JS (:target)

Дополнительные сервисы и программы

Ссылка на библиотеку эффектов при наведении


Урок 18. Формы на сайте HTML + CSS

Синтаксис HTML-форм на сайте
Оформление элементов форм в CSS
Правила и частые ошибки в оформлении форм
Верстаем форму из макета на главном экране


Дополнительные видео:

Наложение масок на поле с номером телефона

Дополнительные ссылки

Ссылка на плагин для валидации форм validate.js


Урок 19. Адаптив. Практика. Как адаптировать сайт при помощи классов Bootstrap

Как сделать адаптив при помощи @media запросов
Оптимизация изображений под дисплеи «Ретина»
Делаем адаптив для первого блока на сайте
Проверка адаптива через Dev Tools Google Chrome


Урок 20. Знакомство с JavaScript плагинами на jQuery

Основы Javascript

• Синтаксис JS
  
• Внешние скрипты, порядок исполнения
  
• Структура кода
  
• Типы данных
  
• Основные операторы
  
• Операторы сравнения и логические значения
  
• Условные операторы: if, '?'
  
• Переменные
  
• Функции
  
• Циклы while, for
  
• массивы
  
• структуры данных
  
• Стандарты ES5/ES6
  

Подключение сторонних библиотек к сайту
Что такое jQuery-библиотека и какие есть плагины Обработка событий в JavaScript. Понятие события; обработка нажатий;
Слайдеры на jQuery (примеры и применение)
Подключение библиотеки jQuery к сайту
Установка и гибкая настройка слайдера на сайте


Урок 21. Всплывающие окна на jQuery

Что такое модальные (всплывающие) окна
Что бывает внутри всплывающих окон
Готовые плагины всплывающих окон

• Стандартное от Bootstrap
  
• fancybox
  
• Другие плагины

Верстка всплывающих окон из макета


Дополнительные видео

Как не делать кучу окон в HTML

Еженедельная прямая трансляция. Ответы на вопросы.


Урок 22. Основы JavaScript + jQuery. Переменные, функции, типы данных и пр. в Javascript

Как jQuery помогает ускорить работу в разы?
Селекторы в jQuery
Событиях в jQuery
Анимация, атрибуты и др. Манипуляции в jQuery


Урок 23. jQuery ajax. Что такое AJAX?

Один простой пример
Обработка ответаОбработка JSON в теле ответа
AJAX методы: $.ajax(), $.get(), $.post()


Урок 24. Анимация на CSS3

Ключевые кадры анимации
Название анимации, длительность, задержка и т.д.
Временная функция анимации
Множественные анимации Keyframes: пишем покадровую анимацию
Подключение анимации animate.css
Срабатывание анимации при скролле страницы
Продолжаем верстку макета, применяем анимацию в макете там, где это уместно

Дополнительные видео

Обзор библиотек с анимацией на CSS3

Дополнительные сервисы и программы

Библиотека с анимациями


Урок 25. Слайдеры для сайта

Как работают слайдеры, когда их нужно применять
Обзор самых гибких слайдеров (Fotorama)
Верстаем и настраиваем слайдер на нашем сайте
Делаем слайдер для мобильной версии сайта


Урок 26. Гео-карты для сайта. Вставка карт от Яндекс и Google через конструктор карт

Настройка карт через js (песочница)
Подключение карт на сайте от 2gis
Устанавливаем Яндекс Карты и Google Maps через конструктор
Настраиваем Яндекс карту на сайте через JavaScript API
Базовый пример множества меток
Что делать когда меток становится очень много?


Урок 27. Аналитика для сайта. Установка счетчика Яндекс метрики

Настройка целей в метрике
Установка счетчика от Google Analytics
Вставка пикселя ретаргетинга ВК

Дополнительные видео

Обзор возможностей вебвизора от Яндекс
Подключение чата к сайту
Виджеты обратного звонка, как настроить?


Урок 28. Как делаются многостраничные сайты. Настраиваем локальный сервер.

Что за язык PHP - изучаем синтаксис
Пишем простой многостраничный сайт

Дополнительные видео

Настройка сервера на Mac OS
Форма обратной связи на PHP

Дополнительные сервисы и программы

Скрипт отправки почты на PHP
Программа локального сервера Open Server и MAMP PRo


Урок 29. Тестирование верстки. Тестирование на валидность

W3C стандарты - что это?
Тесты на скорость загрузки
Как оптимизировать сайт для быстрой загрузки
Публикуем проект

Дополнительные видео к уроку

Оптимизация под Internet Explorer
Как проверить свою верстку на разных браузерах

Дополнительные сервисы и программы к уроку

Сервисы для проверки верстки на валидность и кроссбраузерность


Урок 30. Большой урок по Bitrix. Установка Bitrix на сервер

Устройство шаблонов в системеНатяжка верстки
Компоненты MVC
Bitrix Marketplace


Урок 31. Git И зачем он нужен. Что такое GIT

Для чего он нужен
Пример командной работы с использованиеме GIT-a

Зачем: Чтобы научиться продавать свои услуги и зарабатывать деньги.
В этом блоке кроется вся соль курса. Теперь вы - самостоятельная боевая единица.

Урок 32. Развитие себя как специалиста. Какие навыки стоит прокачивать в 2018 году.

— Области роста для веб-разработчика.
— Сценарии развития: студия и фриланс.
— Как оформлять свое портфолио, где нужно быть зарегистрированным.
— БлогБастер. Почему нужно вести блог. Где это лучше делать.
— YouTube, behance, dribbble - источники заказов.
— Фриланс-биржи - оформление профиля.

Как оформить портфолио

— Что значит «Я до тебя доберусь»
— Ваша страница в соц сетях - это тоже портфолио
— Нужен ли свой сайт. Какой он должен быть?
— Где еще разместить свои работы. Где не нужно?
— Примеры хорошо оформленных портфолио
— Фейковые работы? Зачем?


Урок 33. Поиск заказчика. Как позвонить незнакомцу и подружится. Работа с агентствами.

— Сценарий разговора с клиентом из Авито
— Зачем не нужно продавать в лоб
— Уводим клиента на встречу
— Скрипт разговора на встрече. Какие материалы брать с собой

Партнерские продажи

— Кто такие «Партнеры»
— Кому надо написать, чтобы дали заказ
— Таблица исполнителей. Как заполнять, зачем нужна.
— Как завести промоутеров и кто это в нашем случае
— При чем тут ИП?


Урок 34. Как поступить в Университет Иннополис?

Результат этого модуля:
Портфолио, подготовленное и опубликованное на всех необходимых площадках. Грамотно оформленная страница в социальных сетях. Первые заработанные деньги.