Привет, я думаю тебе стоит найти пару готовых дизайнов в формате psd и попробовать сверстать их, например с уклоном в mobile-first.
Сетка нужна для позиционирования, очевидно же. Используется для уже готовых брейкпоинтов.
Less/haml используется для ускорения кодинга и увеличения функционала того же css/html, например появляются переменные.
Ну и можешь почитать о Gulp.
Имелось ввиду, что родителю в котором лежит картинка, ты делаешь бордер и position: relative; И родителю же делаешь :before {content:''; position: absolute; etc.}
Привет, ну тут все просто. Для начала создать секцию с шириной в 100% и opacity, далее в ней создать враппер. Что бы был отступ в 1px, нужно li, или div(в которых собственно будут лежать линки), не знаю что тебе будет удобнее, сделать margin: 0 1px;