[Андрей Гаврилов] Веб-верстальщик: Код фрилансера (2017)

Zigreal

Administrator
4 Июл 2017
9.059
169
63
[Андрей Гаврилов] Веб-верстальщик: Код фрилансера (2017)

Программирование



ЧЕМУ ВЫ НАУЧИТЕСЬ:

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 встреч онлайн в течение последнего месяца
    • Мои постоянные консультации и поддержка
    • Помощь в работе с клиентами
    • Вдохновение и мотивация
Выпускное занятие
    • Долгожданное занятие!
    • Обсуждение результатов
    • Речь каждого студента
    • Напутствие от наставника
    • Выдача дипломов
    • Советы по развитию
    • Неформальная беседа и виртуальное чаепитие

Для просмотра содержимого вам необходимо авторизоваться.