8 800 500 20 63
Обратный звонок
Профессия
25

Профессия "Верстальщик"

3 полноценных курса в одном - стань профессионалом в web-разработке
3 Месяца
48 Аудиторных часов
32 Онлайн уроков
Цена курса:
39 000
Если у Вас возникли вопросы по оплате курса напишите письмо на info@ntschool.ru - Наш менеджер проконсультирует Вас по всем вопросам.
Дата курса:
В комплект входят:
Продвинутая верстка
13 000 15 000
Основной курс HTML
13 000 15 000
JavaScript для верстальщиков
13 000 15 000

О курсе

Предлагаем Вашему вниманию комплект курсов "Профессия Верстальщик". В него входят:
Курс по основам языка HTML, курс по основам JavaScript и курс
по продвинутой вёрстке.
После прохождения трёх этих курсов Вы сможете уверенно верстать проекты средней сложности, заказы на которые чаще всего размещают на фриланс-биржах.
Также освоенный материал станет хорошей базой для дальнейшего развития в сфере в веб-разработки.

Кому полезен курс

html5
Новичкам
Если Вы уже давно горите желанием научиться создавать сайты, хотите понять как устроен процесс веб-разработки.
html5
Контент-менеджерам
Устали просто наполнять сайты контентом, хотите разобраться в вёрстке и оформлении веб-страниц на уровне кода? Этот цикл курсов для Вас.
html5
Верстальщикам
Если Вам уже знакомы азы таких технологий как HTML, CSS, JS, но хотелось бы узнать о профессиональной веб-разработке.
html5
Знающим JS
Хорошо знаете JavaScript, но плохо представляете где и как его можно использовать в веб-разработке.

Программы курса

  • Продвинутая верстка
  • Основной курс HTML
  • JavaScript для верстальщиков
Рабочее окружение верстальщика
Десктоп или Ноутбук? А может, всё-таки планшет?

Мониторов много не бывает?

Какую операционку лучше использовать для разработки?

Как сделать на одном компе Windows + LINUX + MAC OS

Профессиональное ПО или “мне хватит стандартного блокнота”

Сервер на хостинге или локальная разработка рулит

PHPSTORM / WEBSTORM
Знакомство с гигантами IDE – PhpStorm / WebStorm

Настройка PhpStorm под себя – ускоряем, убираем лишнее

Изучение поистине огромные возможности IDE – PhpStorm

Интегрирование проекта в PhpStorm

Локальная разработка в PhpStorm

Удаленная разработка в PhpStorm

Готовим Photoshop и макет по-взрослому
Анализ макета и всего, что к нему прилагается

Плагины, сервисы и программы для ускорения разбора макета для вёрстки

Настройка и проверка цветовых пространств для web

Продвинутая выгрузка и подготовка медиа-материалов из макета

Интегрирование макета в браузер (ориентируемся на pixel perfect)

Node.js - NPM
Node.js как лучший друг верстальщика

Пакетные менеджеры – что это и с чем это есть?

NPM – установка, настройка, применение

BOWER - YARN

Bower – установка, настройка, применение

Yarn – установка, настройка, применение

Системы сборки и автоматизации. Часть 1
Gulp и NPM scripts – два подхода автоматизации работы

NPM scripts – автоматизация для любителей CLI

Gulp – автоматизация работы для простых смертных

Система сборки – как собрать свой шаблон для будущих проектов

Популярные NPM модули – ещё большее упрощение работы

Системы сборки и автоматизации. Часть 2
Gulp и NPM scripts – два подхода автоматизации работы

NPM scripts – автоматизация для любителей CLI

Gulp – автоматизация работы для простых смертных

Система сборки – как собрать свой шаблон для будущих проектов

Популярные NPM модули – ещё большее упрощение работы

BrowserSync – глобальная синхронизация
Знакомство с компонентом BrowserSync

Использование BrowserSync в режиме CLI

Использование BrowserSync в режиме интеграции с Gulp

Синхронизирование вёрстки на разных устройствах

Кроссбраузерность – умеренность и здравая логика

HTML-элементы
Теги оформления текста

Заголовки и их грамотное использование

Работа с формами

Новые теги HTML5

Семантические теги

Прокачка CSS
Контекстные, дочерние, соседние селекторы

Приоритеты применения стилей

Псевдоэлементы и псевдоклассы

Популярные свойства стилей с примерами

Создание базовой разметки
Виды макетов: фиксированный, резиновый, адаптивный

Сброс стилей

Использование обтеканий на практике

Создание первого реального макета

Позиционирование элементов: обычное, абсолютное, относительное и фиксированное

Хитрости блочной модели
Базовые принципы блочной модели в вёрстке

Схема расчёта размера элементов

Свойство box-sizing для управление схемой расчёта

Разница работы свойств margin для строчных и блочных элементов

Тонкости багов внешних вертикальных отступов

Расчёт высоты элементов при обтеканиях

Способы выравнивания элементов по вертикали

Разбор ошибок

Какие основные ошибки допускаются при верстке

Разбор допущенных неточностей в верстке студентов

Ответы на наболевшие вопросы :)

Адаптивная вёрстка
Взаимодействие дизайнера и верстальщика

Базовые приёмы: viewport, width и max-width, px и %

Создание media-запросов

Единица измерения rem

LESS
Способы подключения LESS

Вложенные селекторы

Переменные, встроенные функции и примеси

Хитрости применения для создания адаптивной вёрстки

Кроссбраузерность и будущее
Уровень поддержки старых браузеров

Подключение доп. файлов для IE vs отказ от IE

Flexbox-революция

Структура работы JS
Подключение скрипта к HTML-документу

Основы работы с DOM элементами

Необходимость понимания основ программирования

Переменные

Ветвления

Функции в базовом варианте

Основы программирования 1
Функции

Область видимости переменных

Оператор возврата

Циклы. Виды и назначение

Основы программирования 2
Массивы

Многомерные массивы

Объекты

Связанная работа базовых конструкций

Обобщение: переменные, ветвления, функции, циклы, массивы

Понимание Javascript
Структура DOM документа

Объекты: свойства, методы, события

Отложенная загрузка страницы

Основные свойства объектов DOM

Способы выборки элементов

Обработка событий

Javascript на практике
Обработка событий: мышь, клавиатура

Отмена действий по умолчанию

Пример создания ЧАВО

Пример создания слайдера фотографий

jQuery. Часть 1
Смысл использования библиотек

Селекторы и фильтры

Основные функции для работы с элементами

Простейшая обработка событий

Пример ЧАВО с анимациями

jQuery. Часть 2
Обработка событий

Функция анимации. Параллельное выполнение анимации

Цепочки из анимаций. Коллбеки

Создание и обработка собственных событий

Подключение расширений JQuery

Обобщение
Необходимый уровень знаний JavaScript для верстальщика

Место JavaScript в адаптивной вёрстке

Направления дальнейшего развития

Как проходит обучение

Закрытая группа
Вы подключаетесь к закрытой группе, где появляется вся информация по курсу: расписание, ссылки на трансляцию, записи и материалы. Вы обсуждаете урок и ДЗ с преподавателем и одногруппниками.
Уроки-вебинары
Урок проходит в формате вебинара. Вы смотрите трансляцию, задаете вопросы, болтаете на задней парте :) Все записи урока обязательно выкладываются, Вы можете пересмотреть записи, если пропустили урок или нужно повторить тему.
Практика
Курс построен так, чтобы вы научились самостоятельно работать с MODX и развиваться как веб-мастер. Преподаватель показывает то, что реально необходимо в проектах, учит работе с инструметами.
Сертификат
После успешного прохождения курса вы получаете сертификат с индивидуальным номером. С помощью этого номера можно в любой момент проверить подлинность сертификата через специальную форму.

Преподаватели курса

Дмитрий Лаврик
Дмитрий Лаврик

Профессиональный веб-разработчик

Программист, каким-то чудом не потерявший умение объяснять материал на человеческом языке. С 2011 года под его руководством тысячи учеников прошли путь от новичков до успешных веб-программистов.

Глеб Чубаренко
Глеб Чубаренко

Профессиональный веб-разработчик

Профессиональный веб-мастер. Эксперт в области HTML, CSS, PHP, Wordpress и Drupal.

Семен Кудрявцев
Семен Кудрявцев

Профессиональный веб-разработчик

Профессиональный верстальщик, веб-мастер.

Что получите после прохождения курса

Часто задаваемые вопросы

Эти курсы могут быть Вам интересны