[psd2html] Воркшоп как Научиться Верстать Адаптивную Страницу Из Psd-макета За 7 Дней

Название:Воркшоп "Как научиться верстать адаптивную страницу из PSD-макета за 7 дней" Автор:PSD2HTML

Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя!

«Ускоряй работу без потери качества!» - именно под таким девизом будет проходить воркшоп.

За 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, который верстается в процессе воркшопа.
• Немного об особенностях работы на фрилансе.

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

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

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

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

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

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

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

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

На заключительном этапе, мы сделаем веб-страницу адаптивной, то есть хорошо выглядящей на различных устройствах. Попутно будут рассмотрены сопутствующие техники и подходы. День 7:

• Адаптивность и отзывчивость. Что к чему?
• Прикручиваем адаптивность к макету Jetro:Секции LOGO и NAVBAR.
• Секция SLIDER.
• Секция INTRO ARTICLES.
• Секция RECENT WORKS.
• Секция FOOTER.

ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO!День 8 (только для VIP): Будут рассмотрены методы максимальной оптимизации веб-страницы. Краткое содержание:

• Анализ скорости загрузки через Инструменты Разработчика в Google Chrome:Детальный обзор вкладки Network и её возможностей.
• Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы.
• Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome.
• Устранение ошибок 404 (если ресурс не найден).

Уменьшение размеров HTML,CSS и JS-файлов:

• Что такое минификация и офускация.
• Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте Скрытая информация :: Авторизуйтесь для просмотра »
  , что это, зачем нужно и как с них подключать ресурсы.
• Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.
• Оптимизация и минификация HTML-страниц.

Графика и шрифты:

• Оптимизация графики. JPG, PNG, SVG и кодирование в base64 - когда что лучше использовать?
• Оптимизация шрифтов и практическое использование SVG.

Удаление лишних файлов.

Скрытая информация :: Авторизуйтесь для просмотра »

Скачать:

Скрытая информация :: Авторизуйтесь для просмотра »

пароль Rhy42jIjo783x

На этом воркшопе ты получишь полную технологию верстки веб-страницы с нуля.

Это можно применить к любому «боевому» проекту, будь то заказ на фрилансе или задача в компании, где ты работаешь.

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

Шаг за шагом ты освоишь все основные моменты, которые необходимо знать и понимать, чтобы твоя верстка выглядела профессионально, чисто и работала с максимальной производительностью!

Скачать:

Скрытая информация :: Авторизуйтесь для просмотра »

пароль: Rhy42jIjo783x

На этом воркшопе ты получишь полную технологию верстки веб-страницы с нуля.

Это можно применить к любому «боевому» проекту, будь то заказ на фрилансе или задача в компании, где ты работаешь.

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

Шаг за шагом ты освоишь все основные моменты, которые необходимо знать и понимать, чтобы твоя верстка выглядела профессионально, чисто и работала с максимальной производительностью!

Складчина на курс была тут:

Скрытая информация :: Авторизуйтесь для просмотра »

Продающий сайт

Скрытая информация :: Авторизуйтесь для просмотра »

Скачать курс [PSD2HTML] Воркшоп "Как научиться верстать адаптивную страницу из PSD-макета за 7 дней" по прямым ссылкам ниже

Скрытая информация :: Авторизуйтесь для просмотра »

пароль: Rhy42jIjo783x Первые 3

Скрытая информация :: Авторизуйтесь для просмотра »