Merrii

Через watch прописываешь все файлы, которые тебе нужны и browser-sync работает. У меня так:

function watch(){
        browserSync.init()    
        gulp.watch('assets/scss/**/*.scss', style);
        gulp.watch('assets/js/*.js', scripts);
        gulp.watch("assets/*.html").on('change', reload);
    }

background-image: url();
Почитать можно тут: htmlbook.ru/css/background-image
Поучиться тут:
https://htmlacademy.ru/courses
https://www.codecademy.com/catalog/language/html-css

Вариант 1:
обернуть посты в цикле в блок и добавить стили в css через :nth-child(1), :nth-child(2), :nth-child(3)
Вариант 2:
через php определять первые 3 элемента и выводить нужный html
Тут показано, как сделать это для первого элемента, немного подумав, можно переделать для трёх
https://wordpress.stackexchange.com/questions/1302...

Сделай максимум в CSS, a js только класс добавляй.

Используй background-image вместо img и установи фиксированную высоту на этих div. Как вариант оберни img в div и установи ему фиксированную высоту.