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

[Nathan]

Описание курса: Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп. За 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

 

[Podsolnux]

А кто автор, подскажите, пожалуйста

 

[lyudamila]

А кто автор, подскажите, пожалуйста

Автор - Владимир Гынгазов

 

[os]

Принимайте участие в конкурсе от PirateHUB и 1WIN и заберите новый iPhone 16 PRO MAX!

Информация о конкурсе​

 

[diesel3993]

А кто автор, подскажите, пожалуйста

Никита Красник

 

[lyudamila]

Никита Красник

Такой же курс получила в качестве бонуса к тренингу Adobe Muse по-взрослому. Тренинг Владимира Гынгазова.

 

[Podsolnux]

Мнения разошлись

 

[diesel3993]

Такой же курс получила в качестве бонуса к тренингу Adobe Muse по-взрослому. Тренинг Владимира Гынгазова.

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

 

[Buzyale]

Так а стоит ли курс смотреть? Меня больше всего интересуют моменты работы с Bootstrap