Dima Polos

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

РНР нужно вставлять в HTML. Просто нужно пользоваться таким движком, в котором разделен сам РНР. Бизнес логика в отдельных РНР файлах без HTML и логика отображения в файлах видов. Как уже сказал Dima Polos это паттерн программирования MVC и его производные.

У любом случае, я бы посоветовал начать изучать какой-нибудь фремворк типа Ларавел, где все сделано правильно, и на нем учиться как делать правильно.

Не работайте с такими людьми. Сейчас, может, и нормально будет, но в следующий раз обязательно что-нибудь случиться.

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

Он может поставить проект на паузу или вообще пропасть — предоплату-то не вносил, поэтому пофиг.

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

НИКОГДА не работайте без предоплаты с новым клиентом. Только с проверенными ребятами — там уж пофиг. Хотя, как показывает практика, и у проверенных ребят может легко что-то поменяться и денег ты не увидишь. Например, когда менеджер уходит из компании, бизнес прекращается не начавшись, просто проект ставится на паузу. Но такое бывает не часто.

По вашему вопросу — никак. Код доступен всегда. Можете напихать в JS какого-нибудь говно-кода, который будет тянуть с удаленного сервера ваш скрипт, в который можно будет подсунуть любую бяку — замедлять загрузку сайта, например, или вообще затирать весь хтмл. Но это же не вернет вам денег. Да и легко правится простым удалением нужных строк в js-файле.

Очень просто, демонстрируйте видео с рабочего экрана

Вот, нашел в загашнике, если используешь sass. Я тут что-то такое, когда-то намутил, сам уже не пойму как оно работает, но помню, что работало на ура.

@mixin font-face($font-name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: "?#iefix",
    svg: "#" + str-replace($font-name, " ", "_") //- сама функция под миксином
  );

  $formats: (
    eot: "embedded-opentype",
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($font-name);
    font-style: $style;
    font-weight: $weight;
    @if(map-has-key($extmods, eot)){ src: url("#{$path}.eot")}
    src: $src;
  }

    // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering//

   @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$path}.svg##{$font-family}') format('svg');
    }
  }
}
//функция str-replace для поддержки svg формата

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

Тут упущен бекенд, на одних css и html ты форму не оправишь вот как пример что нужно webriz.ru/st/one/prosteyshaya-forma-otpravki-danny...

Если делать как посоветовали выше, то пострадают мобильные браузеры. У них скролл не занимает место, как на десктопах, поэтому текст будет уходить за правую границу.

Есть еще одно решение:

/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.element { -ms-overflow-style: none; }

/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

Отсюда: hiding-vertical-scrollbars-with-pure-css-in-chrome...

Вы поймете только в процессе работы, да и никто не будет 100% всех фич использовать в каждом проекте.

Попишите 1000 раз один и тот же цвет, а потом дизайнер его изменит и вам придётся менять код в 1000 местах - надоест - начнёте использовать переменные.

Напишите стили на 5000 строк и замучаетесь скроллить туда-сюда - начнёте использовать импорты.

Замучались писать селекторы по 5 классов глубиной? Начнёте использовать наследование (а потом ещё и БЭМ).

Надоест писать @media screen and max-width($width-md) {...} - напишите первый миксин $breakpoint-md {...}.

И Т Д

Первый вариант это относительный адрес (относительно текущего адреса страницы), второй абсолютный - относительно корня сайта.

Например, вы находитесь на странице test.com/news:
- указывая адрес картинки <img src="images/picture.jpg"> браузер будет загружать её по адресу test.com/news/images/picture.jpg
- указывая адрес картинки <img src="/images/picture.jpg"> браузер будет загружать её по адресу test.com/images/picture.jpg

Сейчас веб компоненты позволяет создавать любой из этих фреймвоков
https://angular.io/
https://reactjs.org/
https://vuejs.org/
https://www.polymer-project.org/

Это из самых прохайпленыхю Есть еще нейтивные https://www.webcomponents.org/ но они пока в процессе.