Иван

Там же вроде примеры были. Но вообще для семантика этот плагин глючный.

Есть правильный и не правильный способы.
Правильный: хранить список не в DOM, а переменной. А её уже рендерить в список, можно фильтрованный. Лучше всего взять VUE для автоматического связывания.
Не правильный: распарсить список форфорычем например или each. Далее по аналогии с 1 вариантом.

Вангую, что это какой-нибудь древний Айфон ... Который подарили директору "хорошие друзья".
Можно потестить с помощью:
1) Десктопный отладчик Chrome +- Safari. В DevTools есть эмулятор, правда он не 100%-ый.
2) Эмулятор "Айфуна" в MacOS.
3) Сообственно "Айфун". Раз уж занимаетесь версткой ...
4) Сервисы-эмуляторы.

Кстати есть олдскульный метод "на древний айфон" - поставить Виндовый Safari. Да-да, именно тот старый, на который забил Apple.

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

ставьте разные картинки в зависимости от media queries. Например вот.

Наймите / Найдите ментора. Фриланс бирж тонны.

Верстальщик отвечает только за картинку, чтоб все на своих местах было. Фронтэнд программист отвечает за поведение: вываливание менюх, вкладки и весь SPA. Как правило это все один человек, но не всегда.

На это вам ответит только заказчик и совесть.

https://www.youtube.com/user/ArtSorax/playlists
Пожалуй все еще актуально.

Ну и webtheory, правда я их уже после Sorax'a смотрел.

А вообще сейчас чисто вёрсткой мало кого удивишь. Без JS далеко не уедешь.

https://developer.mozilla.org/en-US/docs/Web/CSS/M...
shpargalkablog.ru/2013/06/layout.html

Очень просто: bit.ly/2qM7msB

CSS Left может быть отрицательным.

сверстал сайт используя только html5 и css3 (float)

От float'ов сейчас стараются избавляться, да и вообще они не совсем для этого нужны.

нужно ли учить LESS/SASS

Там особо нечего учить, хватает беглого прочтения документации за пол дня. Использовать или нет, зависит от вас, но по факту от величины проекта это не сильно зависит.

стоит ли учить flex

Определенно Да, по факту за флексом будущее. Хотя лично я с ним знаком бегло и пользую бутстраповские сетки.

Это все бумажки для подтирания ИМХО. Только одна ламинированная, а другая шершавая.
Запомните раз и на всегда! Работодатель хочет заработать на вас денег! Из этого он будет смотреть что вы умеете и тут 2 варианта: вы красиво вешаете лапшу и продаёте себя, либо у вас есть портфолио работ.
Так что по факту надежный вариант только 1 - делайте портфолио.
От бумажки только 2 толку - увеличение ЧСВ или прохождение реальных курсов.

У меня с телефона "все плохо". Не, ничего не сыпется конечно, но смотреть тяжко.

В background может входить много чего, в т.ч. цвет.
Насколько помню background-color может переопределить background.

Ну так а собственно чего вы хотели?

masonry не стает по центру

А он вроде как и не должен. У него задача выстроить блоки последовательно. Если они не влезают, то остается пустое место.

фото в нем не резиновые

А собственно сфига они должны быть резиновыми? Тем более вы им размер задали (блокам :)

Почитайте вообще что плагин делает, он вам походу тут и не нужен.
Плюс у вас тут же накладываются стили бутстрапа ... WTF, что блин за каша???

ЗЫ
Тут вам помогут