Код фрилансера (2017)

Код фрилансера (2017)

@tutbiz

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 р.

Скачать: https://goo.gl/8hW4if