coderxx

Все очень просто на самом деле. Есть разные сайты, клиенты, задачи, требования, ограничения, инструменты и прочее — поэтому разработка каждого отдельного сайта есть процесс уникальный и всегда есть нюансы. В целом весь процесс выглядит примерно так:

1. Подготовить ТЗ
   
2. Собрать требования, ограничения
   
3. Подготовить ЧТЗ
   
4. Сделать декомпозицию задачи на подзадачи/подсистемы/подмодули
   
5. Разработать архитектуру
   
6. Проработать подзадачи/подсистемы/подмодули
   
7. Разработать тесты, при необходимости
   
8. Поэтапно произвести процесс разработки
   

Нету никаких золотых середин. Сайт это не стул, который сделал и сидишь на нем. Сайт постоянно должен развиваться, улучшаться, подгоняться под современные требования. Что не развивается - то умирает. А до того как пользователь увидит сайт, создавать его можно как угодно, а значит так как вам нравится, так как вам удобнее будет. Методом проб и ошибок появится понимание того что работает, а что нет, что нужно, а что нет. Так и появится волшебная пилюля, но она будет работать только для вас. Вот именно по этому есть огромная куча методологий создания каких угодно сайтов, но нету одной убер штуки под все все все.

Если вы ищите серебрянную пулю, то её нет. Кто как хочет, так и делает.
Дизайн, верстка и программирование всегда идут параллельно. Чтобы не причинять друг-другу боль.
Что касается коммерческих сайтов. Кто ими занимается, для себя уже выработали все алгоритмы. Это приходит с опытом.

https://github.com/tars/tars

• Верстаю в PHPStorm (просто потому что ещё и работаю с backend кодом на PHP).
  
• Для написания HTML использую Twig (т.к. нравится синтаксис и можно потом без переделки использовать шаблоны на backend'е). Использование шаблонизатора для вёрстки сильно помогает если надо сверстать более 1-2 страниц
  
• Для написания стилей использую SCSS + свою библиотечку + несколько PostCSS плагинов.
  
• Макеты - в Photoshop, InVision или Zeplin, смотря в чём отдают.
  
• Для обычных картинок - Photoshop + оптимизаторы (optipng, pngout, guetzli, xat).
  
• Для SVG иконок - Inkscape + руки + svgo, а затем организовываю всё это через icomoon.io, оттуда можно получить либо иконочный шрифт либо запакованный набор SVG элементов.
  
• Для сборки проекта использую Gulp с набором различных плагинов, список могу дать отдельно если интересно.
  
• Саму структуру проекта обычно просто копирую руками из проекта в проект. Можно конечно сделать какой-нибудь плагин для yeoman или что-то подобное, но меня не ломает скопировать пяток файлов, да и задачи бывают разные - просто вёрстка или вёрстка сразу в контексте сайта.
  

Не засоряйте систему установкой родных пакетов (через homebrew). Сервер должен быть изолирован, когда понадобился - тогда подняли и работаете. Не надо - вырубили. А еще сервер для разработки должен быть максимально приближен к среде на будущем продакшне. Все перечисленное присутствует в Vagrant - изолированная виртуальная машина, можно собрать (или найти готовую сборку) под конкретную среду. В ней же можно экспериментировать с системными настройками, крутить kernel и делать вообще все что угодно без риска навредить родной ОСи.

2021 Update:
Беру свои слова назад. Давно работаю с Laravel Valet, все пакеты устанавливаются с помощью Homebrew. Ни Vagrant, ни Docker, ни всякие MAMPы и рядом не стояли по скорости, удобству и минимальному использованию ресурсов.

В гугле я ответ не нашел.

А что Вы там искали? "Ок, гугл, что делать и как быть?"

Ваша проблема в том, что Вы не формулируете вопросы, вместо этого Вы соплей накидали сюда. Конкретно сформулируйте с чем проблема, Вам ответят. А сопли - это мамке в жилетку пожалуйста.

Что не получилось, пример кода, пример картинки, что должно было получиться и т.д. Вы же не сопереживания ищите, а ответы, так и задавайте вопросы конкретно.

ПС: Не у кого сразу не получается, это нормально.

на Тостере!
буквально неделю назад задавался такой вопрос и писались ответы

я использую
zeplin, WebStorm.
git через VCS WebStorm, очень удобно.

из плагинов
browser-sync,
gulp-nunjucks-render,
gulp.spritesmith
gulp-sass,
gulp-sourcemaps,
gulp-css-urlencode-inline-svgs
gulp-autoprefixer

иконки почти все спрайтами в отдельном файле

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="/images/svg-defs.svg#shape-codepen"></use>
</svg>

https://css-tricks.com/svg-sprites-use-better-icon...

еще недавно использовал Inkscape, что бы отредактировать svg с добавленными классами, illustrator почему то вырезает классы

скорее всего, у бутстрапа прописано overflow-x: hidden

Да, можно.

php, js, css, html, cms 1c bitrix, wordpress

Эта область уже как минимум на три делится.

Это

знаю php на среднем уровне

не коллерирует с этим

прохожу курс по php от qsoft в skillbox

Ибо курсов выше новичка не существуют. По крайней мере в skillbox и geekbrains.

Каждая специализация требует к себе полного внимания. Если будете пытаться изучать две специализации, вероятнее всего, будете максимум мидлом на обоих из них.
Другие специализации полезно учить, чтобы расширять кругозор. Но хорошо выучить вряд ли получится.

Вопрос поставлен неправильно. Бесплатно мобильную версию никто никогда не делает.
Видимо, имелось в виду - вы включаете мобильный вариант в бюджет всегда или он оплачивается отдельно?

Клиента в обязательном порядке нужно спросить - нужен ли ему мобайл? Это один из первых вопросов.
Если ответ "да" (хотя в нынешнее время он будет таким почти наверняка) - учитываете в оценке и проектировании.

Главное, чтобы не получилось так, что этот вопрос замылили и не обговорили, а потом один думал что включено в цену, а другой думал что нет.

'app/*.hmtl' != 'app/*.html'