Желательно без использования облегчающих инструментов типа пре- и постпроцессоров, бутсрапа, сторонних библиотек
"Мои знания HTML\CSS3(с фреймворками и препроцессорами), ванильный JS и jQuery, Основы PHP."- так вот после всего этого вам просто необходимо изучить и использовать Bower (хотя без него можно обойтись), тот же Gulp или Webpack (как-то с трудом себе представляю жизнь без них - это сборщики проэктов), ну и Node.js для js на сервере.
@media only screen
and (min-device-width: ....px)
and (max-device-width: ....px){
......
}
@font-face {
font-family: 'JournalItalic';
src: url('../../fonts/JournalItalic/JournalItalic.eot');
src: local('☺'), url('../../fonts/JournalItalic/JournalItalic.woff') format('woff'),
url('../../fonts/JournalItalic/JournalItalic.ttf') format('truetype'),
url('../../fonts/JournalItalic/JournalItalic.svg') format('svg');
font-weight: normal;
font-style: normal;
}
gulp.task('postcss', function () {
var processors = [
colorShort,
focus,
precss,
short,
size,
responsiveImages,
clearFix,
px2Rem,
cssNext,
cssMqpacker,
byeBye,
discardComments,
cssNano
];
return gulp.src('src/css/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('dist/css/'))
.pipe(browserSync.stream());
});