blackfoxy
@blackfoxy
Стремлюсь стать профессионалом в своём деле.

Как быстро верстать сайт по psd/png/jpg эскизам?

Пытаюсь оптимизировать свою работу, делаю через css_hat и sublime, как делать еще быстрее?Читал на форуме, ребята пишут , что несколько страниц делают за день, а я за неделю почти.
  • Вопрос задан
  • 5412 просмотров
Сложность: Intern
Пригласить эксперта
Ответы на вопрос 14
  • Пытаюсь оптимизировать свою работу

    Любая оптимизация начинается с замеров... в данном случае, затраченного времени.

    Запускаете трекер и смотрите результат. Можете выложить тут, тогда народ будет знать что проседает и чем это ускорить.

    Хотя если самая времязатратная операция - поиск ответов в интернете и ожидание ответов на тостере, то тут поможет только очень большое количество сверстанных проектов ))
    Ответ написан
  • @freeman0204
    Сайты давно уже нужно не верстать, а собирать. Avocode, bootstrap 4 лучше, сниппеты(создай несколько десятков блоков которые часто встречаются и подключай в нужный момент для этого юзай pug & scss). Ну и БЭМ глянь. Также для сборки юзай gulp. Больше копируй своего, и меньше пиши с ноля(как уже научишься норм верстать).
    Ответ написан
  • @Eg0man
    Использую Marsy (похоже на avocode) https://vk.com/markupeasy для быстрого копирования текста и стилей и сравнения текста в адаптивных макетах. Бутстрап, less, pug, собираю gulp, вместо pixel perfect использую картинку сайта как фон и вешаю горячию клавишу. Подгоняю с помощью live style. Плагины для gulp, на сбор pu, less, и релоад страницы, такой минимум. БЭМ и прочее лично мне не зашли, мне проще в pug блок сделать и его подключать.
    Также использую самописный плагин для sublime, парсит кусок html и выдаёт правила css для него, очень ускоряет.

    Получается так:
    Пишем костяк на pug, быстро копируют текст с Marsy, прогоняют через плагин получаю список провил, вставляют в css или less , раскидываю стили также копируя в один клик из marsy, открываю браузер включаю live style и фоновую картинку и уже там подгоняю по пикселям. А после проверяют страницу скриптом, на наличие дублей в стилях, удаляю лишнее прям там же. Открываю css удаляю пустые правила. Готово.

    Marsy тоже моя наработка, если что спрашивайте.
    Ответ написан
  • wbrapist
    @wbrapist
    Enjoy the silence
    Помимо оптимизации нужно просто делать что-то быстрее, чтобы было быстрее. Тут ты можешь просто напросто упираться в предел своих возможностей, которые зависят от текущих навыков, которые, в свою очередь, прокачиваются практикой, например.

    Или что-то тормозит тебя: какие-либо внешние факторы, или простое отсутствие концентрации, в связи с чем, порою (а может и почти постоянно) твоя производительность падает.

    З.ы. Оптимизации тоже есть место быть, но далеко не факт, что виной всему является именно оптимизация (или же её отсутствие).
    Ответ написан
  • vitaly44
    @vitaly44
    Предприниматель, веб-разработчик, дизайнер
    Зависит от сложности.

    В любом случае — унификация вёрстки, типа секции, сроки, колонки, блоки должна создавать «автоматически» нативно с одного взгляда на jpg-эскиз.

    Вообще методология БЭМ очень помогает и личный опыт.

    Я в день 1-2 лендинга верстал легко и просто.
    Ответ написан
  • neatek
    @neatek
    Наёмная интеллектуальная сила
    Использую: Emmet, Adobe Assets, Sublime, Мозг.

    Анализ всего сайта перед началом работы позволяет ускорить процесс. Все размеры шрифтов, цвета, сами шрифты и прочее. Нужные размеры блоков, создают блоки в css и уже дальше собираю сайт весь. Получается намного меньше кода чем при использовании всяких там "Бутстрапов", которые ток грузят. И заранее знаю как сайт будет "складываться" под мобильный экран - это необходимо.
    Ответ написан
  • piterden
    @piterden
    NoDDD Programmer
    Chrome Stable, Ubuntu LTS, 2 монитора
    Sublime Text 3
    den:~/.config/sublime-text-3/Installed Packages [!1] $ lllt 
    drwx------    - den  18 Oct  4:26 .
    .rw-rw-r-- 5.2k den  17 Oct  4:55 ├── 0_package_control_loader.sublime-package
    .rw-rw-r-- 7.5k den   4 May  3:46 ├── 4GL.sublime-package
    .rw-rw-r-- 259k den   4 May  3:47 ├── AdonisJs.sublime-package
    .rw-rw-r-- 3.9k den   4 May  3:48 ├── All Autocomplete.sublime-package
    .rw-rw-r-- 7.2k den   4 May  3:50 ├── ApacheConf.tmLanguage.sublime-package
    .rw-r--r-- 148k root 13 Oct  1:39 ├── ApplySyntax.sublime-package
    .rw-rw-r-- 3.6k den   9 May  1:37 ├── AVR-ASM-Sublime.sublime-package
    .rw-rw-r--  43k den  15 Jul 23:13 ├── Better CoffeeScript.sublime-package
    .rw-rw-r-- 2.0M den   3 May 22:32 ├── Boxy Theme.sublime-package
    .rw-rw-r-- 9.0k den   9 Aug 22:25 ├── Case Conversion.sublime-package
    .rw-rw-r--  34k den  11 Jul 16:35 ├── CoffeeComplete Plus (Autocompletion).sublime-package
    .rw-rw-r-- 3.4k den  30 May  0:00 ├── Color Scheme - Frontend Delight.sublime-package
    .rw-rw-r-- 216k den  26 Sep 14:33 ├── DocBlockr_with_update_capability.sublime-package
    .rw-rw-r-- 762k den  17 May 22:56 ├── DotENV.sublime-package
    .rw-rw-r-- 4.5k den   6 Sep 13:26 ├── Edge Syntax Highliter.sublime-package
    .rw-rw-r--  21k den  11 Jun  8:50 ├── EditorConfig.sublime-package
    .rw-rw-r-- 231k den  12 May  1:25 ├── Emmet.sublime-package
    .rw-rw-r-- 662k den  13 Aug 15:40 ├── ExportHtml.sublime-package
    .rw-rw-r-- 7.1k den  19 May  4:05 ├── Generic Config.sublime-package
    .rw-rw-r-- 5.6k den  12 May  7:15 ├── Git Config.sublime-package
    .rw-rw-r--  87k den  18 Oct  4:26 ├── GitGutter.sublime-package
    .rw-rw-r-- 2.5k den  25 Sep  4:52 ├── GitStatus.sublime-package
    .rw-rw-r-- 9.9k den  25 Sep  4:53 ├── GitSyntaxes.sublime-package
    .rw-rw-r-- 500k den   3 May 22:32 ├── Gruvbox Dark.sublime-package
    .rw-rw-r--  26k den  11 Jul 16:34 ├── Jade.sublime-package
    .rw-rw-r--  12k den   6 Sep 14:09 ├── Jinja2.sublime-package
    .rw-rw-r--  24k den  24 May 20:42 ├── LESS.sublime-package
    .rw-rw-r--  13k den  25 Aug  4:03 ├── Moonscripty.sublime-package
    .rw-rw-r--  54k den   5 May  6:50 ├── nginx.sublime-package
    .rw-rw-r-- 4.2k den   6 Sep 13:27 ├── Nunjucks Syntax.sublime-package
    .rw-rw-r-- 286k den  12 Sep 21:15 ├── Package Control.sublime-package
    .rw-rw-r--  27k den  12 May  5:52 ├── PHP-Twig.sublime-package
    .rw-rw-r--  26k den  11 Jul 16:34 ├── Pug.sublime-package
    .rw-rw-r--  36k den  12 May  7:19 ├── PyroCMS Snippets.sublime-package
    drwxrwxr-x    - den  12 May  1:25 ├── PyV8
    drwxrwxr-x    - den  12 May  1:25 │  └── linux64-p3
    .rw-rw-r--  28M den  12 May  1:25 │     ├── _PyV8.cpython-33m.so
    .rw-rw-r--  110 den  22 Oct  8:04 │     ├── config.json
    .rw-rw-r--  85k den  12 May  1:25 │     └── PyV8.py
    .rw-rw-r-- 2.6k den   4 May  3:54 ├── QMakeProject.sublime-package
    .rw-rw-r--  12k den   4 May  3:54 ├── QML.sublime-package
    .rw-rw-r-- 388k den   7 May  1:43 ├── Qt Completions for C++.sublime-package
    .rw-rw-r--  25k den  12 May  5:51 ├── SCSS.sublime-package
    .rw-rw-r--  45k den  25 Sep 10:19 ├── SideBarEnhancements.sublime-package
    .rw-rw-r-- 2.7k den  19 May  4:05 ├── SSH Config.sublime-package
    .rw-rw-r--  28k den  12 Jun  7:33 ├── Stylus.sublime-package
    .rw-rw-r-- 4.3k den  29 Aug  2:05 ├── SublimeLinter-contrib-twiglint.sublime-package
    .rw-rw-r-- 4.8k den   4 May  4:13 ├── SublimeLinter-csslint.sublime-package
    .rw-rw-r-- 4.6k den   4 May  4:13 ├── SublimeLinter-php.sublime-package
    .rw-rw-r-- 1.4M den  30 May  5:51 ├── Theme - Spacegray.sublime-package
    .rw-rw-r-- 1.8k den   7 May  1:51 ├── Todo.sublime-package
    .rw-rw-r--  15k den   3 May 23:08 ├── Twig.sublime-package
    drwxrwxr-x    - den  12 Jun  7:22 ├── Vue-snippets
    .rw-rw-r--  212 den  12 Jun  6:47 │  ├── package-metadata.json
    .rw-rw-r--  568 den  12 Jun  6:47 │  ├── package.json
    .rw-rw-r--  993 den  12 Jun  6:47 │  ├── README.md
    .rw-rw-r--  179 den  12 Jun  6:47 │  ├── v-bind.sublime-snippet
    .rw-rw-r--  172 den  12 Jun  6:47 │  ├── v-el.sublime-snippet
    .rw-rw-r--  187 den  12 Jun  6:47 │  ├── v-else.sublime-snippet
    .rw-rw-r--  235 den  12 Jun  6:47 │  ├── v-for.sublime-snippet
    .rw-rw-r--  191 den  12 Jun  6:47 │  ├── v-if.sublime-snippet
    .rw-rw-r--  212 den  12 Jun  6:47 │  ├── v-link.sublime-snippet
    .rw-rw-r--  183 den  12 Jun  6:47 │  ├── v-on.sublime-snippet
    .rw-rw-r--  177 den  12 Jun  6:47 │  ├── v-ref.sublime-snippet
    .rw-rw-r--  131 den  12 Jun  6:47 │  ├── v.sublime-snippet
    .rw-rw-r--  210 den  12 Jun  6:47 │  ├── vue.sublime-snippet
    .rw-rw-r--  368 den  12 Jun  7:21 │  ├── vuec.sublime-snippet
    .rw-rw-r--  233 den  12 Jun  6:47 │  ├── vueccomputed.sublime-snippet
    .rw-rw-r--  220 den  12 Jun  6:47 │  ├── vuecdata.sublime-snippet
    .rw-rw-r--  223 den  12 Jun  6:47 │  ├── vuecmethods.sublime-snippet
    .rw-rw-r--  193 den  12 Jun  6:47 │  ├── vuecmixins.sublime-snippet
    .rw-rw-r--  330 den  12 Jun  6:47 │  ├── vuecprops.sublime-snippet
    .rw-rw-r--  238 den  12 Jun  6:47 │  ├── vuecwatch.sublime-snippet
    .rw-rw-r--  370 den  12 Jun  6:47 │  ├── vued.sublime-snippet
    .rw-rw-r--  185 den  12 Jun  6:47 │  ├── vuef.sublime-snippet
    .rw-rw-r--  289 den  12 Jun  6:47 │  ├── vueht.sublime-snippet
    .rw-rw-r--  290 den  12 Jun  6:47 │  ├── vuehtget.sublime-snippet
    .rw-rw-r--  293 den  12 Jun  6:47 │  ├── vuehtpost.sublime-snippet
    .rw-rw-r--  198 den  12 Jun  6:47 │  ├── vuenexttick.sublime-snippet
    .rw-rw-r--  171 den  12 Jun  6:47 │  ├── vuert.sublime-snippet
    .rw-rw-r--  213 den  12 Jun  6:47 │  └── vuertgo.sublime-snippet
    .rw-rw-r-- 1.3M den  12 Jun  6:47 ├── VueFormatter.sublime-package
    .rw-rw-r-- 8.7k den  13 Jul 11:36 ├── Vuejs Snippets.sublime-package
    .rw-rw-r-- 8.2k den  12 Jun  6:47 ├── Vuejs Snippets.sublime-package.bak
    .rw-rw-r-- 7.4k den  31 May  5:49 ├── Vue Syntax Highlight.sublime-package
    .rw-rw-r-- 1.1M den   1 Sep  8:24 └── Worksheet.sublime-package

    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы