4.85714/5, Отзывов: 7
Доступно

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

Тема в разделе "Курсы по программированию", создана пользователем Geek, 2 июн 2015.

Цена: 1790р.
Взнос: 80р.-95%
100%

Основной список: 182 участников

Резервный список: 58 участников

Статус обсуждения:
Комментирование ограничено.
  1. 2 июн 2015
    #1
    Geek
    Geek ЧКЧлен клуба

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



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

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

    За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.


    Настройка среды разработки: графический редактор, редактор кода и другие дополнительные инструменты, необходимые для удобной и эффективной работы.

    Краткое содержание:
    • На какой операционной системе работать?
    • Разнообразие веб-браузеров.
    • Краткий обзор сервиса BrowserStack.com для кросс-браузерного тестирования и немного про виртуальные машины.
    • Коротко о графических редакторах.
    • Коротко о редакторах кода.
    • Браузер Google Chrome и установка плагинов. Обзор плагинов PerfectPixel и HTML5 Outline.
    • Другие браузеры и их отличия.
    • Обзор LiveReload 2 и демонстрация силы командной строки и автоматизации работы.
    • Разбираемся с "Инструментами разработчика" в Google Chrome (правка DOM-дерева и CSS-стилей, доступ к ресурсам страницы, эмуляция различных устройств для тестирования адаптивности и др.)
    • Какую версию Photoshop поставить для воркшопа?
    • Редактор кода Sublime Text 3, как устанавливать плагины и как максимально ускорить свою работу в ST.
    • Список плагинов, которые нам понадобятся для работы в воркшопе.
    • Методология познания. Как учиться веб-разработке?

    Анализ макета. На этом этапе мы коснемся того, как оценивать объем работ глядя на имеющийся макет, а также как в уме или на бумаге готовиться к верстке.


    Краткое содержание:

    • Введение в проблематику вопроса.
    • Общие аспекты анализа макета.
    • Технические аспекты анализа макета.
    • Пример плохого PSD-макета.
    • Пример хорошего PSD-макета.
    • Чем еще отличается хороший макет от плохого?
    • Анализ PSD-макета Jetro, который верстается в процессе воркшопа.
    • Немного об особенностях работы на фрилансе.

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

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

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

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

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

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

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

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

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

    Краткое содержание:
    • Адаптивность и отзывчивость. Что к чему?
    • Прикручиваем адаптивность к макету Jetro:
      • Секции LOGO и NAVBAR.
      • Секция SLIDER.
      • Секция INTRO ARTICLES.
      • Секция RECENT WORKS.
      • Секция FOOTER.
    • ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO!

    (только для VIP)
    Будут рассмотрены методы максимальной оптимизации веб-страницы.

    Краткое содержание:
    • Анализ скорости загрузки через Инструменты Разработчика в Google Chrome:
      • Детальный обзор вкладки Network и её возможностей.
      • Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы.
      • Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome.
      • Устранение ошибок 404 (если ресурс не найден).
    • Уменьшение размеров HTML,CSS и JS-файлов:
      • Что такое минификация и офускация.
      • Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте Скрытая ссылка.
      • CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы.
      • Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.
      • Оптимизация и минификация HTML-страниц.
    • Графика и шрифты:
      • Оптимизация графики. JPG, PNG, SVG и кодирование в base64 - когда что лучше использовать?
      • Оптимизация шрифтов и практическое использование SVG.
    • Удаление лишних файлов.

     
    1 человеку нравится это.
  2. Последние события

    1. skladchik.com
      Dmitrii_js не участвует.
      7 июл 2017
    2. skladchik.com
      Складчина доступна.
      4 май 2017
    3. vaniya92
      vaniya92 оставил отзыв "Хорошо".
      8 фев 2016
    4. CaHe4ek
      CaHe4ek оставил отзыв "Отлично".
      21 июл 2015

    Последние важные события

    1. skladchik.com
      Складчина доступна.
      4 май 2017
    2. skladchik.com
      Складчина закрыта.
      19 июл 2015
    3. skladchik.com
      Взнос составляет 40р.
      27 июн 2015
    4. skladchik.com
      Складчина активна.
      27 июн 2015
  3. Отзывы участников

    4.85714/5,
    • 4/5,
      Работой организатора доволен
      В целом курс понравился, но есть и небольшие минусы, больше всего меня "подбесило", что в конце одного занятия верстка выглядит одним образом, а в начале следующего - по другому. Так в 7 уроке пол часа проковырялся, пока понял, почему результат в браузере у меня отличался от того, что получается у ведущего. Оказывается практически после каждого занятия в код вносились какие то правки. А я принципиально делал весь шаблон сам и не брал готовые из дополнительных файлов.
      8 фев 2016
      1 человеку нравится это.
    • 5/5,
      Работой организатора доволен
      За курс спасибо, но сам курс рассчитан на новичков, много воды, автор курса многих вещей сам еще не знает :). Но для базовых знаний пойдет хорошо
      21 июл 2015
      2 пользователям это понравилось.
    • 5/5,
      Работой организатора доволен
      Отличный курс! Для совсем-совсем новичков, не знакомых с азами верстки может будет сложновато, зато для тех, кто не знаком с бутстрапом, но хотел бы познакомиться - очень даже. Ну и вообще много интересного. Даже болтовня автора для меня оказалась полезной - узнала много новых слов )))
      20 июл 2015
      2 пользователям это понравилось.
    • 5/5,
      Работой организатора доволен
      Сори, дополнительные материалы добавлены, не заметил когда писал.
      16 июл 2015
      2 пользователям это понравилось.
    • 5/5,
      Работой организатора доволен
      Очень ждал этот материал из-за некоторых освященных в курсе тем (касательно адаптивности, анализа макета и т.д.), в этом плане складчина лично для меня уже состоялась и потраченных денег не жалко. Но есть некоторые минусы.
      Во-первых, на этапе настройки я ожидал, собственно, самой настройки рабочих программ, но вместо этого автор по сути просто их перечислил. И это не единственный случай, во многих местах курса автор дает не совсем то, что ожидаешь, прочитав название файла.
      Во-вторых, в курсе достаточное количество воды, скорее всего, просто потому, что ведущий очень любит поговорить. Из-за этого приходится некоторые куски проматывать. И по этой же причине, видимо, не рассказывает (или забывает рассказывать) действительно нужные вещи (см. п1).
      В-третьих, очень хотелось бы увидеть "дополнительные материалы", автор часто ссылается на "ссылки, которые сейчас скинет в чат его помощник", но самого чата не видно. Возможно, орг еще их раздаст, будем надеяться.
      Но в остальном курс можно назвать удачным, в первую очередь из-за освященных моментов, которых нет в других подобных курсах. Этим он и ценен.
      13 июл 2015
      10 пользователям это понравилось.
    • 5/5,
      Работой организатора доволен
      Отличная организация!!! А также четкая и ясная подача материала от автора курса!!! Выражаю огромную благодарность!
      13 июл 2015
      3 пользователям это понравилось.
    • 5/5,
      Работой организатора доволен
      Отличный курс, автор все четко и просто объясняет давая примеры по собственному опыту, респект и организатору!
      12 июл 2015
      5 пользователям это понравилось.
  4. Обсуждение
  5. 9 июн 2015
    #2
    HankHill
    HankHill СкладчикСкладчик
    когда скидываемся?
     
  6. 11 июн 2015
    #3
    kabyr
    kabyr ДолжникДолжник
    Пора бы уже. Орг отозовись !
     
    1 человеку нравится это.
  7. 14 июн 2015
    #4
    Iamopk
    Iamopk БанЗабанен
    @Olimpia , а когда вы хотите начать сбор средств?Уже скинули до минимума. не вижу причин ждать ;)
     
  8. 18 июн 2015
    #5
    HankHill
    HankHill СкладчикСкладчик
    что делать если организатор забил на складчину?
     
  9. 18 июн 2015
    #6
    Olimpia
    Olimpia ОргОрганизатор
    пойти почитать правила
     
    2 пользователям это понравилось.
  10. 19 июн 2015
    #7
    Control
    Control БанЗабанен
    Напиши профильным модераторам.
    Кто к какому разделу прикреплён можешь увидеть на главной странице форума.
     
  11. 19 июн 2015
    #8
    AleksandrD
    AleksandrD СкладчикСкладчик
    Я уезжаю 26 июня, как оплатить раньше?
     
  12. 19 июн 2015
    #9
    Control
    Control БанЗабанен
    Выпишись из складчины.
     
    1 человеку нравится это.
  13. 3 июл 2015
    #10
    tall-master
    tall-master БанЗабанен
    Как-то вяло народ оплачивает...лето
     
  14. 5 июл 2015
    #11
    Area51
    Area51 ЧКЧлен клуба
    Отметьте плз меня зелёнкой, оч нужно срочно +1 оплаченная складчина
     
  15. 17 июл 2015
    #12
    Веста_Ви
    Веста_Ви ДолжникДолжник
    По какой причине складчина остановлена?
     
  16. 17 июл 2015
    #13
    Бошетунмай
    Бошетунмай ОргОрганизатор
    Складчину останавливают когда уже выдан продукт.
     
  17. 18 июл 2015
    #14
    Веста_Ви
    Веста_Ви ДолжникДолжник
    Есть ли возможность поучаствовать?
     
  18. 18 июл 2015
    #15
    Olimpia
    Olimpia ОргОрганизатор
    Как только складчина завершится, я ее сразу открою для участия.
     
Статус обсуждения:
Комментирование ограничено.

Поделиться этой страницей