Анита Ковалева

Gulp и локальный сервер нужен не для тестирования в своем большинстве, а для удобной разработки и в дальнейшем отладки.

Представьте, вы верстаете свою первую html страничку, пляшете и в восторге хлопаете в ладоши, оно вам нравится, вы получаете кайф от технологий, верстки и тд. Проходит время - вы добавили в своё портфолио 2,3 работы. Верстка становится однотипной, немного рутинной, процесс такой же долгий как в первый раз и вы начинаете думать об "автоматизации" процесса. В вашей голове возникает мысль "Я не хочу постоянно жать F5 и обновлять страницу после каждого изменения, хочу что бы все было на лету". Вы ставите gulp-browsersync и получаете наслаждение от того что процесс автоматизирован. Дальше вы ставите gulp-минификацию, конкатенацию, префиксы, сжатие, возможно какие-то приблуды для отладки, которые помогают вам верстать быстрее, лучше, делать код чистым и красивым.

Рынок очень динамичный, если вы будете разрабатывать старым дедовским способом открывая каждую отдельную страничку html - далеко вы не уедите. Не говоря уже о CMS системах, через которые удобно работать на локальном сервере в связки с gulp. Там вы уже пишете не html, а допустим php - и browsersync все так же работает.

Все зависит от дизайнера, они тоже люди и часто когда мне приходят макеты, на нем стабильно разные отступы между элементами, бывает корявое отображение блоков, и тому подобное, первое время играл внутренний перфекционист, и я постоянно указывала дизайнеру на погрешности, а потом поняла что конечный итог - монетизация, и я просто трачу своё время впустую, и легче сверстать по нормальному, именно так как я вижу. Клиентам же доходчиво объясняю что такое pixel perfect, и если они это хотят и настаивают, накидываю еще сумму к заказу, обычно услышав её - клиент перестает хотеть или отваливается = profit.

Находите класс которым описана стилизация меню, и если не хотите особо заморачиваться, напишите к этому классу - transform: translateX(-50px) - где 50 px нужное вам значение по горизонтали. Сразу предупреждаю - это не самый лучший подход и при смене разрешения экрана, вам контент будет ползти.

Как и написали выше - проблема с версткой, и с горе верстальщиком)

Ошибок довольно много. Из тех что я увидела:

1. Ваш контент не центрирован, используйте нативный центровщик либо библиотеки типа Bootstrap4, делайте отдельный div и закидывайте его туда, сейчас ваш контент расползается, и это учитывая то, что у вас просто Desktop версия, не адаптивная.
   
2. Название классов - когда вы пишите код, старайтесь использовать методологию, например БЭМ, пишется не header_menu_button, а примерно header__menu-button, header__menu-button--active, 2 нижних подчеркивания это элемент, две черты после элемента - модификатор, и ваш код будет более читабельный.
   
3. Старайтесь думать о том что бы не писать код 2 раза, если ваша кнопка на сайте будет повторяться 2 раза, то для кнопки пишется базовый стиль допустим site-button, а в header__menu-button вы уже дописываете стили позиционирования и в итоге ваша конструкция имеет вид
   
4. Научитесь использовать правильную вложенность, вы должны представлять сайт как лего, правильно перебросив контент по блокам, так как если у вас будет адаптивная верстка, вам нужно продумывать еще и адаптацию этих блоков к экранам с меньшим разрешением.
   
5. И последнее, скачайте какие нибудь платные курсы - бесплатно, допустим HTML Academy или другой конторки обучающей новичков, и вам будет легче учится верстать правильно