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

[Admin]

Гаврилов - Веб-верстальщик: Код фрилансера (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 встреч онлайн в течение последнего месяца

Мои постоянные консультации и поддержка

Помощь в работе с клиентами

Вдохновение и мотивация

Выпускное занятие

Долгожданное занятие!

Обсуждение результатов

Речь каждого студента

Напутствие от наставника

Выдача дипломов

Советы по развитию

Неформальная беседа и виртуальное чаепитие

Пожалуйста Войдите или Зарегистрируйтесь для просмотра скрытого текста.

Скачать:

Если у Вас нет Премиум статуса:

Преимущества VIP-подписки

Оформить VIP-Подписку