Купить Вёрстка адаптивной страницы из PSD макета

Описание курса:

Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп. За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.



День 1

Настройка среды разработки: графический редактор, редактор кода и другие дополнительные инструменты, необходимые для удобной и эффективной работы.

Краткое содержание:
На какой операционной системе работать?
Разнообразие веб-браузеров.
Краткий обзор сервиса BrowserStack.com для кросс-браузерного тестирования и немного про виртуальные машины.
Коротко о графических редакторах.
Коротко о редакторах кода.
Браузер Google Chrome и установка плагинов. Обзор плагинов PerfectPixel и HTML5 Outline.
Другие браузеры и их отличия.
Обзор LiveReload 2 и демонстрация силы командной строки и автоматизации работы.
Разбираемся с «Инструментами разработчика» в Google Chrome (правка DOM-дерева и CSS-стилей, доступ к ресурсам страницы, эмуляция различных устройств для тестирования адаптивности и др.)
Какую версию Photoshop поставить для воркшопа?
Редактор кода Sublime Text 3, как устанавливать плагины и как максимально ускорить свою работу в ST.
Список плагинов, которые нам понадобятся для работы в воркшопе.
Методология познания. Как учиться веб-разработке?
День 2



Анализ макета. На этом этапе мы коснемся того, как оценивать объем работ глядя на имеющийся макет, а также как в уме или на бумаге готовиться к верстке.

Краткое содержание:
Введение в проблематику вопроса.
Общие аспекты анализа макета.
Технические аспекты анализа макета.
Пример плохого PSD-макета.
Пример хорошего PSD-макета.
Чем еще отличается хороший макет от плохого?
Анализ PSD-макета Jetro, который верстается в процессе воркшопа.
Немного об особенностях работы на фрилансе.
День 3

Работа с макетом в среде Adobe Photoshop и извлечение графики для будущей веб-страницы.

Краткое содержание:
Типы графических форматов. Растровые изображения.
Типы графических форматов. Векторные изображения.
Немного о формате SVG.
Способы перевода растрового изображения в векторное (трассировка).
Извлечение графики из макета Jetro. Старый способ.
Извлечение графики из макета Jetro. Новый способ.
День 4

Подготовительные действия и начало верстки HTML-каркаса. Мы будем использовать популярный фреймворк Bootstrap. Многие хотели бы узнать как его применить на практике, чем мы и займемся с тобой на реальном примере.

Краткое содержание:
Введение и немного истории: от табличной верстки к блочной.
Семантика HTML и алгоритм HTML Outline.
Старый алгоритм: HTML 4 Outline.
Новый алгоритм: HTML5 Outline.
Подключение Bootstrap и верстка HTML-каркаса макета Jetro.
День 5

Настройка фреймворка Bootstrap и стилизация страницы через CSS. В нашей работе мы применим препроцессор Less. Если до этого ты с ним не сталкивался, то будешь поражён насколько это ускоряет работу!

Краткое содержание:
Обзор возможностей официального сайта Bootstrap.
Разбираем сборщик Bootstrap’a.
Настройка, компиляция и замена стандартного стилевого файла Bootstrap на файл с настроенными переменными под макет Jetro. Брейкпоинты (breakpoints), медиа-запросы (media queries) и ширина макета.
Начинаем стилизацию. Настройка Less и LiveReload.
Переменные в Less. Задаем цветовые переменные для макета.
Кросс-браузерное подключение шрифтов и их конвертация через сервис FontSquirrel.com.
Пишем общие стили.
Стилизация навигационной панели с логотипом.
Стилизация слайдера.
День 6

Продолжаем стилизацию нашей страницы и подгоняем все детали.

Краткое содержание:
Что такое Flexbox’ы и как с ними работать.
Продолжаем стилизацию макета Jetro:
Секция INTRO ARTICLES.
Секция RECENT WORKS.
Секция FOO