Фёдор Ананин

Можно долго спорить каким должен быть макет и должен ли быть вообще.

Если ширина вашего экрана меньше ширины макета, то есть два пути:
1) Попросить заказчика/дизайнера сделать макет в 1000-1300;
2) Работать с масштабированием в браузере.

Можно просто зажать Ctrl и крутить колёсико, а можно зайти в инструменты разработчика и там уже вписать нужное разрешение.

Если от вас требуют адаптивную/резиновую вёрстку, то достаточно будет пару раз посмотреть как всё работает в 1600, а остальное время работать в 1366.

Если использовать любой фреймворк, то всё в разы проще. Например, фреймворк моего написания умеет вплоть до 8К экранов.

align-items: stretch; на контейнер, так ваши карточки будут одной высоты.

Ещё можно на те элементы, которые могут быть разной высоты повесить что-то вроде min-height: 2em;
Так они будут занимать ту высоту, которую им нужно.

Я не дизайнер, я человек-оркестр. Концепция сайта зарождается у меня в голове и её я же и верстаю.

Я использую две сетки - 12 и 10.

12ти ячеечная сетка позволяет очень удобно в ряд располагать элементы. Если речь идёт об элементах одинаковой ширины, то их можно 1, 2, 3, 4, 6, 12 в ряд. При этом, если у вас в ряду, допустим 4 элемента, очень легко всё сделать так, чтобы на экране поменьше у вас становилось 2 ряда по 2 элемента. При использовании сетки вы соблюдаете масштаб.

Зачем я иногда пользуюсь 10ти ячеечной сеткой? Если мне нужно разместить в ряду 5 или 10 элементов. Но такое бывает крайне редко.

Плюсы:
1) Быстро, просто, удобно.
2) Выдерживается единая размерная сетка, единые размеры отступов.
3) Есть много готовых решений.

Минусы:
1) Зависимость от сетки. Например, если хочется сделать сайдбар с чёткими 300px, то от сетки приходится отказываться или подстраивать 100% ширины сетки = 1000px, а на сайдбар выделять 3 unit'a.

Что-то явно пошло не так, после того, как прокрутка началась по второму кругу умерло переключение фоновой картинки.

И, как по мне, было бы хорошим тоном было бы прокрутку задавать не в пикселях, а как-то иначе... в штуках, например :) И количество слайдов по идее должно высчитываться само, а не задаваться вручную.

Рассказываю про себя (многие профи закидают камнями, но...).

Две папки: images и assets. Внутри assets есть папки css, js, fonts, scss. Что в них лежит понятно из названия. В scss лежат исходники, в css всё компилируется.
Для компиляции использую Prepros. Адепты других софтинок меня сейчас загнобят, но Prepros делает ровно то, что должен с удобным интерфейсом под виндой, с минимумом настроек и просто весьма неплох.

До HAML и подобных моментам ещё не дошёл и не знаю... Меня более чем устраивает классический HTML.

Вместо бутстрапа использую самописное творение.

Ваша проблема, как и у многих начинающих, осознание, что творить придётся на ОГРОМНОМ стеке технологий. Нельзя просто знать CSS и HTML. Этого уже давно недостаточно. Нужны препроцессоры, постпроцессоры, обработка изображений... Всё...

Попробуйте выделить свободный денёк и потихоньку заверстать какой-нибудь элементарный блог, но на полном стеке. Сделайте раскрывающееся меню, респонзив-сетку и основные стили. Всё. Так вы доберётесь до понимания как всё работает в комплексе.

А затем уже можно переходить на более сложные макеты.

Даже если вы поставите 800 пикселей и весь ваш сайт будет открываться на телефоне без прокруток, то всё будет чертовски маленькое, а текст из-за этого нечитаемый. Вывод: или делайте нормальный адаптивный сайт, или не заморачивайтесь и делайте 980-1280 пикселей (юзерам всё равно придётся масштабировать и скроллить).

Но, если сделать адаптивный нельзя (что чертовски странно), но хочется сделать так, чтобы хоть как-то было по уму, то делайте 980 пикселей, на планшетах будет вполне неплохо смотреться.

Сверстайте сложный макет и пару попроще. По-моему этого будет достаточно для демонстрации навыков.

Идеально, если эти макеты вы сверстаете не просто так, а для какого-то заказчика. (то, что кто-то поверил в ваши навыки и заплатил вам за это - плюсик в глазах работодателя)

Раньше сидел на PsPad, сейчас Atom

Используйте FancyBox. Или любой аналогичный плагин.

Заходим в любой компьютерный магазин, подходим к стойкам с ноутбуками и мониторами.
Ноутбуки - почти все 1366х768. Дешёвые 17" - 1600х900, ноуты с 1920х1080 и больше уже достаточно дорогие и не по карману большинству. Ноуты с разрешение 2560х1440 и более фактически можно приравнивать к FullHD. Если 13" с таким разрешением, то 90% юзеров будет использовать увеличение.
Мониторы - практически все идут FullHD, есть 1366х768, есть 2560x1440 и 4К, но они не всем по карману.

Вот мы уже получили 3 основных современных разрешения (1366, 1600, 1920). Если целевая аудитория гики, то имеет смысл проработать отображение на 2560+.

Затем, вспоминаем, что когда-то были очень популярны 22" мониторы с 1680х1050. Когда-то многие купили нетбуки, а там всего 1024х600. До сих пор часто у людей можно видеть квадратные мониторы 1280х1024.

Итого: 1024, 1280, 1366, 1600, 1920 пикселей по ширине.

Планшеты и смартфоны хоть и могут иметь чуть ли не 4к дисплеи, но методика отображения немного иная. Имеет смысл версия для смартфонов на 360-400 пикселей по ширине (старые смарты), хотя я обычно выставляю ширину сайта в 100% и задаю диапазон от 360 до 500-600 пикселей. Для планшетов 640-1024 пикселя.

Как-то так.

В любом случае, мои последние работы адекватно выглядят на старых андроид смартах, на iPhone 3G, на iPhone 6s, на разных айпадах и на всех мониторах.

У вас с 26 октября ни одного ответа. Объясните нормальным русским языком, пожалуйста. Добавьте скриншоты. Трижды перечитал ваш вопрос - не понял о чём идёт речь.

Вам нужно часть какого-то сайта вставить на другой сайт? Для этого либо iframe Для полного показа, либо ajax запрос, если нужно что-то конкретное.
Или вам нужно просто на имеющемся сайте что-то скрыть? Тут я вообще не понимаю зачем вам iframe. И без доступа к коду будет невозможно что-либо сделать.

Проверяю вручную. На компе установлены все современные браузеры. iOS проверяю через iPad Mini брата, Android - прошу друзей глянуть :) Windows Phone - своя Люмия 1020. IE7,8,9 не поддерживаю. Но если понадобится - поставлю виртуальную машину и буду там проверять.

Честно пытался помочь, не получилось... Сам пытался сделать ширину 100%, но тоже не выходило. Эксперименты с высотой тоже неудачные.

Пересел на SCSS. Компилирую в Prepros. Всё делается на автомате :) В редакторе сохранил файл, препрос его сразу же автоматом подцепил и скомпилил. FX8320+8Gb Ram+SSD = моментальный результат. Core i3 (точную модель не помню, стоит в планшете)+4Gb Ram+SSD = есть мелкие тормоза.

Owl Carousel, везде его использую

У меня даже фотошопа нет, но это не мешает мне с ходу выпиливать красивые сайты. Я и дизайнер, и верстальщик. Придумываю эффекты по ходу дела...

Изучать не просто html+css, а изучать уже конкретно вёрстку под определённые движки: Joomla, WordPress, Drupal, OpenCart. И на биржах фриланса выставлять себя как верстальщика под определённые движки. Для полноценной визуальной составляющей сайтов хорошо бы выучить основы JS (jQuery)

Соглашусь с предыдущими ораторами. Берите слайдер на jQuery и будет вам счастье. То же экспериментировал с css-only вариантами... геморроя много.