HTML-CSS

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

Одним из элементов страницы есть скрытый блок с текстом (а может быть и с другим контентом). По клику на какой-либо элемент, кнопку, ссылку (Читать еще, Подробнее, Больше информации), этот скрытый блок появляется во всей своей красе. Для этого используются технологии HTML+CSS+JS. В принципе, все просто и самодостаточно, но с одним важным "но":
Это все не быстро и требует особых знаний. Ну никак не для контент-менеджера.

Но тут как раз приходят на помощь не особо известные и, поэтому, не особо жалуемые теги <details> и <summary>

Очень часто приходится отцентрировать div с position: absolute относительно окна браузера и когда известны размеры экрана и размеры блока, который нужно разместить по центру, сделать это довольно просто. Но что делать, когда размеры могут быть произвольными?

И снова обходимся без JS.
В данном хаке не будем удалять стрелку, которая выводится по умолчанию браузером. Просто её скроем, наложив сверху псевдоэлемент :after с фоном с изображением нашей стрелки.

Чтобы задать цвет, фоновое изображение, размеры для элемента форм <select> существует масса мануалов основанных на использовании JS, а то и библиотек скриптов типа JQuery. Что очень усложняет последующую их кастомизацию и внедрение в сайт в соответствии с заданным дизайном.

Предлагаемый вариант позволяет легко и быстро задать фон, бордер, размер, а главное, вид стрелки для выпадающего списка <select>. Только CSS!

По умолчанию цвет маркеров для списков в HTML есть таким как и сам текст. Допустим, нам нужно сделать цвет текста в списке <ol> черным, а сами цифры фиолетовыми... Конечно можно было бы усложнить код, завернув содержимое <li> в тэг <span>...

Эти CSS псевдоклассы и псевдоэлементы теперь совместимы со всеми распространенными браузерами. Пользуйтесь на здоровье! Много полезного, того, что вы еще не знали.

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

Для соблюдения валидности, для обеспечения отображения некоторых символов без ошибок, а так же (самое главное) - для отображения символов, отсутствующих на клавиатуре, используются спецсимволы HTML, которые преобразуются браузером привыводе в нормальные для человеческого взгляда символы. Эти спецзнаки, начинаются с амперсанда '&' и заканчиваются точкой с запятой ';'

Задать стили для каждого второго, третьего, четного и т.д. элеметта html-кода.

Ничто так не заставляет трепетать слабых в математике веб-разработчиков и дизайнеров клиентских приложений, как правила на основе :nth

CSS3 обеспечивает невероятную гибкость в этом плане бла- CSS3 обеспечивает невероятную гибкость в этом плане бла-  обеспечивает невероятную гибкость в этом плане благодаря правилам на основе :nth — :nth-child(n), :nth-lastchild(n), :nth-of-type(n) и :nth-last-of-type(n).

Предлагаю к юзанию удобный сервис онлайн - генератор css3 кроссбраузерного кода. Ну относительно кроссбраузерного, т.к. владельцы "ультрасовременнных" браузеров а-ля ИЕ6-8, не смогут насладиться прелестями цсс3 , которые облегчают жизнь верстальщику, а пользователю дают дополнительные удобства и красоты :)
Здесь - задание скругленных краев, тени для текстов и блоков, конвертация RGBA в HEX и обратно, @Font-face генератор, текст колонками (как в газете), задание градиентов, трансформаций и т.д.

Учебник html5 css3 от Бен Фрейн (2014).

Если вы искали современный учебник по верстке сайтов, то вот он! Не забивайте голову старыми учебниками, которые научат вас только плохому :)

Эта книга — исчерпывающее практическое руководство по тому, как сделать адаптивным имеющийся дизайн с фиксированной шириной. Кроме того, в ней описываются новейшие и самые полезные методики, обеспечиваемые HTML5 и CSS3 и позволяющие сделать дизайн сайта более компактным и удобным в сопровождении, чем когда-либо прежде. В этой книге также разъясняются общие и наиболее эффективные методы написания и доставки кода, изображений и файлов.
Если вам понятны HTML и CSS, то вы сможете создавать адаптивные веб-дизайны.

Рекомендую, отличный учебник по HTML5.

Этот учебник позволит верстальщику улучшить и систематизировать свои знания по современной разметке HTML-страниц, научиться верстать семантично и SEO оптимизировано, от верстки веб-форм и мультимедийных элементов до технологий гео­-локации и JavaScript API.

Скачать отличный учебник "HTML5-рецепты программирования" - Кристофер Шмитт, Кайл Симпсон

Стилизовать инпут типа файл достаточно просто при помощи CSS. Для этого необходимовырезать картинку, заменяющую изображение данного input. Например мы вырезали картинку  input_file.png размером 129px на 44рх. 

Завернем наш инпут в <div class="input-file"> Получится такой html-код:
<div class="input-file"><input type="file" /></div>

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

Для обеспечения кроссбраузерности в отображении шрифтов, представляю вашему вниманию сервисы для конвертации шрифтов онлайн (.ttf в .eot , .woff и прочие)

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

Знаю 2 способа решения такой задачи...

<ul class="columns">
    <li>Column 1</li>
    <li>Column 2</li>
    <li>Column 3</li>
    <li>Column 4</li>
</ul>

.columns {
    margin:0;
    padding:0;
}
.columns li {
    display:inline-block;
    width:25%;;
}

Для такой конструкции элементы списка должны стать в четыре колонки, но последний <li> не влазит, хотя у всех ширина по 25%. Решение данной проблемы заключается в следующем...

Простой способ, как придать стили для переключателей и чекбоксов без использования JS.

Блок, в котором мы хотим, чтобы применялась кастомизация радио и чекбоксов должен иметь класс custom-form

В цсс правильно следует прописать путь к своим "выключенная кнопка" и "включенная кнопка".

Берем фон, желательно не менее 2000рх по ширине и 100рх по высоте.

В css прописываем для body:

body {
 background: url(../images/bg.jpg) no-repeat;
 -moz-background-size: 100%; /* Firefox 3.6+ */
 -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
 -o-background-size: 100%; /* Opera 9.6+ */
 background-size: 100% 100%; /* Современные браузеры */
 background-attachment:fixed;
}