bondarenkoIlya

Свойство color - цвет текста кнопки
Свойство background-color - цвет кнопки
Нажатие в css - btn:active {}

Делаешь массив объектов, перебираешь его с помощью map.
В ютубе вбей "карточка товара js"

1. Методология БЭМ, полно видео на ютубе
2. https://github.com/yoksel/common-words

Сделать флексами

На подобии такого можно сделать

// libs to css

gulp.task('css', function () {
	return gulp.src([
		'node_modules/normalize.css/normalize.css',
		'node_modules/slick-carousel/slick/slick.css'
	])
		.pipe(concat('_libs.scss'))
		.pipe(gulp.dest('app/scss'))
		.pipe(browserSyns.reload({ stream: true }))
});

// js

gulp.task('js', function () {
	return gulp.src([
		'node_modules/slick-carousel/slick/slick.js'
	])
		.pipe(concat('libs.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('app/js'))
		.pipe(browserSyns.reload({ stream: true }))
});

Я бы смотрел в сторону 80%, всё же они немного удобнее, да и места меньше занимают, чем полноразмерная.
Мне кажется на 60% возможно надоедание постоянного прожатия Fn для клавиш Del, стрелочек...