Веб-верстальщик - Код фрилансера (2017)

BEZ HIDE

Рубит бабло лопатой
6 Июн 2015
583
529
36


HTML
Создавать валидную HTML-разметку страниц, использовать стандарт HTML5 и проектировать лаконичную структура проектов любой сложности

CSS
Писать грамотный CSS-код. Использовать стандарт CSS3, медиа-запросы для создания адаптивности, а также работать профессионально с препроцессором SASS (SCSS)

JAVASCRIPT
Использовать базовые возможности языка Javascript и использовать библиотеку Jquery. Устанавливать плагины на все случаи жизни: всплывающие окна, галереи, слайдеры и т.д.

BOOTSTRAP
Использовать самый популярный фреймворк для веб-разработки Bootstrap, а также его аналоги. Поддерживать и управлять контентом веб-приложений с помощью Bootstrap

NODE.JS
Устанавливать и использовать в работе пакетные менеджеры, типа Bower, NPM. Использовать инструменты для прогрессивной frontend-разработки и сборщики проектов, типа Gulp и Grunt

SASS
Использовать препроцессор SASS (SCSS) для быстрого модульного написания CSS-кода. Работать с перемеными, наследованием, миксинами и условиями для ускорения work flow

ADAPTIVE
Создавать адаптивные и отзывчивые (resposinve) веб-сайты с использованием современных инструментов, а также работать над максимально сложными в верстке проектами

CMS
Устанавливать, настраивать и работать с самой прогрессивной и гибкой CMS MODx - системой управления контентом или «движком».


Блок #1 ВВЕДЕНИЕ В ПРОФЕССИЮ

Знакомство с коучингом и профессией
  • Знакомимся с участниками
  • О коучинге и процессе обучения
  • Как выжать максимум из программы
  • Перспективы развития на фрилансе
Принципы, инструменты и понятия веб-разработки
  • Как работают сайты
  • Понятия "домен" и "хостинг"
  • Протоколы FTP и SSH
  • Инструментарий: SublimeText, WinSCP, DevTools, Photoshop и др.
Блок #2 HTML-ПРОЕКТИРОВАНИЕ

Знакомство с HTML
  • Что такое HTML
  • Основные теги языка разметки
  • Понятие блочных и строчных элементов
  • Ссылки
  • Атрибуты
  • Классы и айди
  • Как быстро запомнить основные теги
Создание HTML-разметки страницы
  • Структура документа HTML
  • Семантические принципы проектирования
  • Понятие валидности кода, W3C
  • Форматирование кода
  • Комментирование
  • Работа с путями
HTML5, формы и таблицы
  • Теги HTML5
  • Назначение и применение тегов HTML5
  • Использование видео и аудио
  • Структура форм в HTML
  • Теги для разработки форм
  • Методы отправки форм
  • HTML-структура таблиц
  • Форматирование и стилизация таблиц
  • Создание таблиц любой сложности
Блок #3 CSS-РАЗРАБОТКА

Введение в CSS
  • Зачем нужен CSS
  • Возможности CSS
  • Способы подключения CSS к HTML
  • Структура CSS-документов
  • Быстрые способы написания кода
Свойства, правила, форматирование + БЭМ
  • Работа с селекторами
  • Наследование
  • Псевдоклассы :before, :after, nth-child и др.
  • Работа с цветовыми моделями rgb, rgba, hex, hsla
  • Как эффективно и быстро выучить CSS-свойства
  • Разбор современной методологии БЭМ
Большое практическое занятие
  • Готовим среду для разработки
  • Создаем настоящую страницу HTML/CSS
  • Фишки CSS3: animation, transition, rotate и др.
  • Вендорные префиксы
  • Все преимущества HTML5 и CSS3 в примерах
Блок #4 RESPONSIVE & ADAPTIVE

Photoshop и модульными сетками
  • Интерфейс Photoshop
  • Структура современного макета
  • Основы минимализма и Flat-дизайна
  • Понятие "модульные сетки"
  • Типы модульных сеток по назначению
  • Экспорт графики для верстки
  • Понятие форматов PSD, JPG, PNG, GIF, SVG, AI, EPS, PDF
  • Ключевые принципы преобразования макета в код
Отзывчивость в CSS
  • Для чего нужны медиа-запросы (media queries)
  • Примеры работы с медиа-запросами
  • Подходы mobile first и mobile last
  • Понятие "резиновость" и "brake-points"
  • Относительные единицы измерения (%, em, rem и др.)
  • Подготовка изображений под retina-дисплеи
  • Профессиональный подход к структуре CSS с media queries
Bootstrap CSS в активной практике
  • Подготовка структуры проекта
  • Экспорт графики из PSD
  • Минификация файлов для ускорения загрузки
  • Создание HTML-разметки
  • Блочная структура организации контента
  • Использование всей мощи CSS3
  • Работа со шрифтами в CSS
  • Подключение шрифтов из Google Fonts
  • Конвертация формата шрифтов и подключение к сайту
  • Тестирование адаптивности и отзывчивости
  • Инструменты для тестирования: DevTools в браузерах и др.
Блок #5 JAVASCRIPT И JQUERY

Основы Javascript
  • Введение в язык
  • Переменные и типы данных
  • Управляющие конструкции
  • Циклические и условные конструкции
  • Функции
  • Объекты и массивы
  • Практика: решение задач
Знакомство с jQuery
  • Понятие библиотеки
  • Принципы работы с Jquery
  • Анимации
  • Добавление/удаление классов
  • Взаимодействие с элементами DOM
Погружение в jQuery и Bootstrap
  • Процесс установки плагинов Jquery
  • Готовые решения: слайдеры, галереи, модальные окна
  • Обзор решений Bootstrap для решения повседневных задач
  • Parallax-эффекты различной сложности
  • Основные ошибки и проблемы в использовании Jquery
Блок #6 УРОВЕНЬ 2.0

Node.js, NPM и Bower
  • Работа с командной строкой (терминалом/консолью)
  • Понятие "пакетный менеджер"
  • Установка оболочки Git
  • Установка Node.js, NPM, Gulp, Bower
  • Полезные дополнения и функции Gulp
  • Автоматическая минификация графики, CSS, JS
  • Настройка личной среды разработки
  • Ускорение рабочего процесса в 3 раза
Работа с GULP, SASS + Git
  • Установка самого популярного сборщика frontend - Gulp
  • Подробная инструкция по использованию Gulp
  • Что такое препроцессоры
  • Преимущества препроцессора SASS (SCSS)
  • Переменные
  • Наследование
  • Миксины
  • Условия
  • Ускорение work flow с использованием SASS
  • Работа с серверами Github
Блок #7 ХОСТИНГ И CMS

Установка сайта и CMS на хостинге
  • Какой хостинг и тариф выбрать
  • Покупка и привязка домена к хостингу
  • Принцип установки любой CMS на примере MODx
  • Подключение к хостингу по FTP и SSH
  • Основы работы с Базами Данных (БД)
  • Управление БД с помощью phpMyAdmin
  • Файловая структура дискового пространства
Интеграция верстки с CMS MODx
  • Основные точки интеграции
  • Возможности интеграции
  • Формирование удобного Backend с помощью MODx
  • Работа с TV-параметрами, сниппетами, чанками
  • Установка расширений в MODx
  • Интеграция галерей изображений
  • Интеграция форм обратной связи
  • Принцип работы с любой CMS: Wordpress, Joomla, Drupal и др.
Бонус: работа с CMS Opencart
  • Почему именно Opencart для магазинов?
  • Возможности интеграции с CMS Opencart
  • Разбор Opencart на винтики
  • Масштабы использования Opencart
Блок #8 ФРИЛАНС И ЗАРАБОТОК

Работа на фрилансе
  • Обзор самых прибыльных бирж фриланса
  • Создание идеального профиля
  • Секреты формирования портфолио
  • Эффективный метод поиска клиентов
  • Мои секреты и фишки поиска клиентов
Пять контрольных точек
  • 5 встреч онлайн в течение последнего месяца
  • Мои постоянные консультации и поддержка
  • Помощь в работе с клиентами
  • Вдохновение и мотивация
Выпускное занятие
  • Долгожданное занятие!
  • Обсуждение результатов
  • Речь каждого студента
  • Напутствие от наставника
  • Выдача дипломов
  • Советы по развитию
  • Неформальная беседа и виртуальное чаепитие

ЦЕНА — 27100р.

скачать:
Скрытое содержимое для зарегистрированных пользователей!