Раздача ]Эксклюзив] Как научится верстать адаптивную страницу из psd - макета за 7 дней

Статус
В этой теме нельзя размещать новые ответы.
Please note, if you want to make a deal with this user, that it is blocked.
HA3QH8E.jpg


Описание курса: Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп. За 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. Секция FOOTER. Дорабатываем слайдер.
День 7 На заключительном этапе, мы сделаем веб-страницу адаптивной, то есть хорошо выглядящей на различных устройствах. Попутно будут рассмотрены сопутствующие техники и подходы. Краткое содержание:
  • Адаптивность и отзывчивость. Что к чему? Прикручиваем адаптивность к макету Jetro: Секции LOGO и NAVBAR. Секция SLIDER. Секция INTRO ARTICLES. Секция RECENT WORKS. Секция FOOTER.
ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO! День 8 Будут рассмотрены методы максимальной оптимизации веб-страницы. Краткое содержание:
  • Анализ скорости загрузки через Инструменты Разработчика в Google Chrome: Детальный обзор вкладки Network и её возможностей. Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы. Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome. Устранение ошибок 404 (если ресурс не найден).
Уменьшение размеров HTML,CSS и JS-файлов:
  • Что такое минификация и офускация. Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте http://getbootstrap.com. CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы. Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро. Оптимизация и минификация HTML-страниц.
Графика и шрифты:
  • Оптимизация графики. JPG, PNG, SVG и кодирование в base64 — когда что лучше использовать? Оптимизация шрифтов и практическое использование SVG.
Скачать:
Пароль: Rhy42jIjo783x
 

Последнее редактирование модератором:
Рекламное сообщение
👑 Pirate Cards Premium Service - Оплачивайте любые зарубежные сервисы и покупки. Анонимно, низкие комиссии.

Благодаря нашему сервису вы сможете безопасно оплачивать зарубежные сервисы, товары или услуги, а так же использовать карту для физических оплат.

✔️ Работает 99% зарубежных сервисов
✔️ Низкая фиксированная комиссия (0.25$)
✔️ Возможно привязать карту к смартфону и оплачивать покупки в магазинах
✔️ Анонимно и безопасно
✔️ Гибкие тарифы

➡️ Подробнее о сервисе
 

Такой же курс получила в качестве бонуса к тренингу Adobe Muse по-взрослому. Тренинг Владимира Гынгазова.
Возможно названия совпадают у курсов, но я сам проходил этот курс и помню программу обучения я уверен что автор Никита Красник у него есть канал на Ютуб MakeWeb называется, там есть этот курс можете сами убедиться
 

Статус
В этой теме нельзя размещать новые ответы.

Обратите внимание

Назад
Сверху