Курс: “Как научиться верстать адаптивную страницу из PSD-макета за 7 дней”. Материал подойдет для тех, кто занимается версткой или планирует начать заниматься. Профессия “Верстальщик” на данный момент очень даже востребовано. Материал из разряда “Эксклюзив“. Материал прислал Anonym с комментарием: “Хороший практический курс. Немного теории вместе с практикой. Сейчас сам изучаю курс и решил поделиться с вами.” Материал может быть удален по запросу правообладателя! Оцениваем курс
Описание курса:
Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» – именно под таким девизом будет проходить воркшоп. За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.
День 1
Настройка среды разработки: графический редактор, редактор кода и другие дополнительные инструменты, необходимые для удобной и эффективной работы.
Краткое содержание:
- На какой операционной системе работать?
- Разнообразие веб-браузеров.
- Краткий обзор сервиса BrowserStack.com для кросс-браузерного тестирования и немного про виртуальные машины.
- Коротко о графических редакторах.
- Коротко о редакторах кода.
- Браузер Google Chrome и установка плагинов. Обзор плагинов PerfectPixel и HTML5 Outline.
- Другие браузеры и их отличия.
- Обзор LiveReload 2 и демонстрация силы командной строки и автоматизации работы.
- Разбираемся с “Инструментами разработчика” в Google Chrome (правка DOM-дерева и CSS-стилей, доступ к ресурсам страницы, эмуляция различных устройств для тестирования адаптивности и др.)
- Какую версию Photoshop поставить для воркшопа?
- Редактор кода Sublime Text 3, как устанавливать плагины и как максимально ускорить свою работу в ST.
- Список плагинов, которые нам понадобятся для работы в воркшопе.
- Методология познания. Как учиться веб-разработке?
Анализ макета. На этом этапе мы коснемся того, как оценивать объем работ глядя на имеющийся макет, а также как в уме или на бумаге готовиться к верстке.
Краткое содержание:
- Введение в проблематику вопроса.
- Общие аспекты анализа макета.
- Технические аспекты анализа макета.
- Пример плохого 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.
- Удаление лишних файлов.
Ссылка на скачивание этого материала доступна только зарегистрированным пользователям сайта. Регистрация на сайте бесплатная и не займет много времени. Если у Вас уже есть аккаунт – Вы можете авторизоваться.
Материал предоставлен исключительно для ознакомления!
Опубликовано: Anonym
View Comments
Папку "kurs" можно не скачивать — содержащейся в ней файл находится в основных пяти архивах и является дублированным.
Да, да! Причём даже хэш-суммы сходятся (т.е. файлы абсолютно идентичны)
Если я не ошибаюсь этот курс доступен на торрентах с августа месяца прошлого года.
Курс удостоен ценного внимания ,тем кто создает сайты без конструкторов.
Кто знаком с основами html и css.
Эти знания можно переменить
на своих статических сайтах ,на различных движках
Молодец ,одним словом крутой жирный плюс.
Курс не подходит для пользователей соц сетей,которые впаривают друг другу разные ссылки .
Реально нормально созданный сайт принесет больше бабла ,чем толкание друг другу бесполезных ссылок в соц сетях.
Соц сети это базар напоминающий 1990 годы ,где толпился народ, что то продать не имея свей торговой точки.
Воу, Bootstrap, премного благодарен! :arrow:
на торрентах вроде без исходников был, а тут как обстоят дела?
А нельзя как попроще свестать из PSD-шки сайт. Просто есть отличные шаблоны где нужна небольшая корректировка по текстам, графике (вырезать-добавить), а тут такой зверский квест на 7 дней!!!
Доп материалов нет(
Отстой