CSS:

Иногда требуется сверстать, например, горизонтальную наклонную линию. Ниже пример такой линии в формате SVG.

Основная идея - создать блок, в котором расположены несколько заголовков пронизанных вертикальной линией так, что виден задний фон.

Такое проще показать, чем объяснить:

Пример того, как сделать шестиугольную рамку для фотографий на чистом CSS.

Частая задача - красиво оформить поле для прикрепления файла.

Основной проблемой тут является то, что сам элемент input type="file" через CSS кастомизировать можно плохо, поэтому его просто скрывают и оформляют кнопку место его кнопку, ссылку, label...

Но и тут есть проблема, обычно, такие кнопки не отображают файл который был выбран пользователем и, иногда, посетители сайта не могут понять, прикрепился их файл или нет.

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

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

Самое простое и распространенное решение, это добавлять горизонтальную прокрутку через css свойство overflow, но при этом не всегда посетителям сайта очевидно, что на экране телефона таблица, особенно если первая колонка занимает все пространство.

Памятка с медиа запросами для основных типов экранов.