Сергей delphinpro

А что нужно-то? подготовить для публикации в интернете?
С этим справится любой редактор/просмотрщик - irfanview, faststoun - имеют режим пакетной обработки изображений. Я уж молчу про фотошоп...

Просто прочитайте документацию к плагину

$("form").submit(function() {
  var that = this;
//    $(this).validate() // возможно и валидацию понадобиться вызвать, смотря как у вас там все работает..
    if ( !$(this).valid() ) return false; // проверьте, правильно ли заполнена форма

    $.ajax({
      type: "POST",
      url: "mail.php",
      data: $(this).serialize()
    }).done(function() {
      alert("Спасибо за заявку!");
    });
        setTimeout(function() {
            $.fancybox.close();
            $(that).trigger("reset");
        }, 1000);
    return false;
  });

все прекрасно работает
jsfiddle.net/L7eyzLse - ваш код один-в-один

upd
у вас, вероятно, не подгружается JQ.js
других причин не вижу.

Нельзя.

>> делать этого не нужно
делать это не обязательно. об этом прямо написано в спецификации.
Важно лишь одно - в пределах одного проекта придерживайтесь единого стиля, либо закрывайте, либо нет.

я использую gulp-plumber он ловит ошибки и выводит их в терминал без остановки задачи.

npm i --save-dev gulp-plumber

var gulp = require('gulp'),
  less = require('gulp-less');
var plumber = require('gulp-plumber');

gulp.task('less', function() {
  gulp.src('css/style.less')
    .pipe(plumber())
    .pipe(less())
    .pipe(gulp.dest('css/'));
});

Самовызываемая анонимная функция

(function(){
})();

Такая функция будет тут же выполнена. jQuery - это параметр, который передается в функцию. $ - переменная, по которой будет доступен переданный параметр внутри функции.
Эта конструкция эквивалентна следующей

var myFunc = function($){
};
myFunc(jQuery);

За исключением того, что не создается лишняя переменная в глобальной области видимости (myFunc), ради чего все и делается.

.position() возвращает отступ от ближайшего не-статик родителя.
А вам, вероятно, нужно относительно документа - .offset()

jsfiddle.net/j9vkodh3/2

потому что он находится в другом потоке элементов.

Обычно иконки классами прописываются. В вашем случае можно попробовать $("#status").html("✔");
или сделать две иконки, попеременно скрывая одну из них.

basePath - это начальный адрес, корень ваших урлов, относительно которых будут они все строится. SetBasePath имеет смысл применять, когда ваш сайт находится не в корне DOCUMENT_ROOT, а в подпапке. Или, например, для админки, которая лежит в подпапке.
Т.е. у вас будет

$router->setBasePath('/test/');
$router->map( 'GET', '/', function() {
    echo 'Ура, заработало!';
});

/test/ - и будет корнем сайта.

background-size: contain;
или если картинка

img {
max-width:100%;
max-height:100%;
}

Флоатами - никак.

можно так jsfiddle.net/DelphinPRO/83h7ccyf но это IE10+

upd jsfiddle.net/DelphinPRO/83h7ccyf/1

Изучите тему "системы счисления". Потом "арифметические операции в различных системах счисления". А дальше все будет понятно.
вот, например, book.kbsu.ru/theory/chapter4/1_4_10.html по операциям.
(в вашем случае будет 62-ричная система счисления.)

Жадные отхватывают как можно больше, нежадные, соответственно, как можно меньше.
регулярка /<p>.*<\/p>/ в тексте из нескольких абзацев выберет все от первого открывающего p до самого последнего закрывающего. Если инвертировать жадность /<p>.*<\/p>/U, то выбор будет до первого попавшегося закрывающего p

Скобки используются, чтобы получить в результате отдельную часть выражения (или несколько). Чтобы понять, просто сделайте var_dump результатов со скобками и без.

если у блоков фиксированные размеры, то можно так jsfiddle.net/DelphinPRO/qsw81eya

Рализация плейсхолдеров внутри input'a?
Посмотрите мой ответ там. Как раз по вашей теме.

Вы правильно поняли. При написании Desktop first - стили пишутся от большего к меньшему.

@media (max-width: 900px){} - правило учитывает только ширину вьюпорта на любом отображающем устройстве.
@media screen and (max-width: 900px){} - правило распространяется только на экраны монитора с соответствующим вьюпортом
@media only screen and (max-width: 900px){} - аналогично предыдущему
Помимо экранов (screen) могут быть и другие устройства представления информации - print, projection, tvи т.д.

Например так jsfiddle.net/DelphinPRO/uzmkyfr8/2

jsfiddle.net/DelphinPRO/d576g8n8/2
тут не уроки нужны, а просто знание CSS