За последнюю неделю опубликовано 189 новых материалов.
Инструкция новичку Путеводитель по форуму Прокси для Telegram Показать подсказки , это бомба!

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

  • Поучаствуй (в качестве покупателя) в любых пяти совместных покупках (кроме завершённых и "Моментальных") и получи группу "Новичок" навсегда -> ссылка на раздел
  • Получай до 480 рублей за каждого приглашенного пользователя!
    представляем Вам очередное расширение партнерской программы, подробности описаны тут -> ссылка
  • 90% материалов доступно к скачиванию после простой регистрации!
    Если же ты хочешь скачивать материалы без требования оставлять отзывы то получи группу "Новичок", 10 способов повышения описаны тут -> ссылка
  • К сожалению количество битых ссылок растет и мы уже не можем их оперативно восстанавливать поэтому просим помощи у каждого нашего пользователя.
    С сегодняшнего дня, за каждую восстановленную ссылку мы заплатим Вам.
    Подробнее тут -> ссылка
  • Перенесем твои заслуги с другого ресурса!
    Мы понимаем как сложно прокачивать аккаунты на форумах, вроде раскачал аккаунт, а тут появляется ресурс в 100 раз круче но тоже с системой прокачки и снова качать аккаунт...
    Предлагаем вам перенести Ваши заслуги на другом подобном ресурсе к нам.
    Подробности описаны тут -> ссылка
  • Вы можете получать по 2.5% с каждой покупки и продажи на маркете! Подробности в теме Партнёрская программа

Dump_Bot

Бот дампов
Бот форума
30 Июл 2016
1
1.467
20
Как научиться верстать адаптивную страницу из psd-макета за 7 дней



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

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


Продажник:
Для просмотра содержимого вам необходимо авторизоваться.

Скачать:
Для просмотра содержимого вам необходимо авторизоваться.
 
Ваш e-mail не будет опубликован. Он потребуется для подтверждения Вашего поста.
Оформление текста Нажмите «Ввод», чтобы отправить ответ.

Привет!

Мы группа людей которые решили помочь другим в решении их проблем, а так же пользователям с поиском самых свежих и качественных инфопродуктов. За 4 с небольшим месяца мы создали этот форум на который заходят ежедневно тысячи человек и посещаемость постоянно растёт. Мы создали панель лицензирования для защиты PHP скриптов от воровства и SEO панель для мониторинга наших сайтов и выбора верной стратегии их развития. Мы надеемся что то что мы создали пригодится Вам и возможно Вы поможете нам развиваться и совершенствоваться вместе с Вами.

Статистика форума

Темы
378.710
Сообщения
417.912
Пользователи
49.448
Новый пользователь
LonelyGIt

Приложения форума для iOS и Android


У ркн там нет власти ;)
Приватные разговоры
Помощь Пользователи
    Вы не присоединились ни к одной комнате.