[loftschool] продвинутый курс по веб-разработке

[Виктор Неизвестный]

[LoftSchool] Продвинутый курс по веб-разработке

Зар Захаров - Преподаватель курса:

Казалось, что собрать в одном месте самые передовые технологии, самые нужные и важные моменты в IT-индустрии невозможно, но мы с гордостью и уверенностью заявляем, мы это сделали. Я лично для вас смог из тонны терабайтов информации отсеять и собрать лучшее, самое современное, самое востребованное, проверенное временем, использованное мною в боевых проектах. Я подошел к этому курсу не со стороны преподавателя, а со стороны ученика, задав вопрос себе - если бы я пришел на курс, что было бы мне, как уже бывалому в вебе, интересно.

Я прекрасно понимаю, что каждый день на просторах интернета можно найти много нового, полезного и интересного, и я взял на себя смелость проверить за вас, убедиться, что действительно важно, применимо и будет использоваться в ваших проектах. Этим курсом я хочу подарить вам возможность прикоснуться к сокровищам IT-мира!

1. Настройка рабочей среды

• Боевое крещение новобранцев
• Знакомство с наставниками и одногруппниками
• Знакомимся с Slack и платформой обучения
• Подготовка рабочего окружения
• Выбор и настройка редакторов кода: Sublime text, Atom, Brackets
• Настройка и базовые принципы работы в терминале
• Тонкие настройки и особенности работы PhpStorm/WebStorm
• Полезные инструменты для повышения продуктивности
• Как оставаться здоровым, работоспособным и эффективным
• Планирование, постановка задач и достижение целей

2. Workflow

• Основы работы в Linux терминале
• Базовый workflow в Git
• Знакомство с node.js
• Работа с модулями, npm
• Понимание dependencies и devDependencies
• Bower - настоящее и будущее
• Bower vs Npm для frontend-разработки
• Локальный сервер на node.js - BrowserSync
• LiveReload - наиболее эффективные решения
• Корректная публикация проекта на Github

Workflow #2

• Gulp - лучшие практики применения
• Конкатенация, минификация, работа со статикой
• 15 самых востребованных npm-плагинов
• Автоматическая оптимизация картинок
• Bower - продвинутые техники, тонкая настройка
• Подготовка и сборка проекта для последующей отправки на хостинг (Production Server)
• Настройка хостинга и автодеплой проекта (Auto Deploy)

Workflow #3

• Принцип работы PostCss
• PostCSS Gulp
• Организация необходимого набора плагинов( Autoprefixer, Postcss-nested, Postcss-short, Postcss-assets, Postcss-sorting)
• Stylelint Reporter

3. Вёрстка
Вёрстка #1

• Самые важные приёмы при нарезке макета в Photoshop
• Как писать семантичный и качественный HTML
• Какие единицы измерения лучше? "px", "em", "rem" и др.
• "font-size" и "line-height"
• Все значения свойства "display"
• Свойство "float" и его корректная очистка
• Вертикальное и горизонтальное центрирование элементов
• Псевдоэлементы :before, :after
• Свойство "outline"
• Тонкости модели "box-sizing", margin, padding
• Рекомендации о том, как писать "правильный" CSS
• Meyer Reset, Normalize.css, border-box reset

Вёрстка #2

• Знакомство с препроцессором Jade
• Использование алгоритмической структуры Jade
• Написание собственных примесей
• Построение универсального шаблона
• БЭМ-нейминг
• Организация файловой структуры проекта
• Рендеринг данных из JSON

Вёрстка #3

• Препроцессор - SASS/SCSS
• Циклы, условия, переменные SASS
• Необходимые в работе функции SASS
• Автоматизация сборки спрайтов средствами Spritesmith
• SVG, иконочные шрифты

Вёрстка #4

• Адаптивная вёрстка
• Настройка картинок для адаптивной верстки
• Адаптация картинок под ретина-дисплеи
• Адаптив или Респонсив. В чем разница?
• Медиазапросы
• Библиотека SingularityGS