Tilonorrinco

Серия head first (html, css, js etc.) -- неплохое начало, если опыта в разработке сайтов раньше не было. Я сейчас читаю про javascript, мне нравится, думаю, другие книги серии не хуже. По CSS могу еще посоветовать книгу Макфарланда "Большая книга CSS", тоже очень неплохо разжевывается материал. Сам я по ней учил css. Книга Мейера тоже очень хорошая, но читается сложнее, чем Макфарланд или Head First. Но если любите сухие тексты, где все максимально по делу, Мейер хорошо подходит. Видеозаписи интенсива htmlacademy (базовый, продвинутый) можно скачать бесплатно в сети, они довольно хорошие. Для того, чтобы понимать, какие технологии используются в верстке, и вообще, о практической стороне этого дела. Участвовать в интенсиве, имхо, нет особой нужды. Главное слишком в книги не углубляться, и много практиковаться.

У меня в примере использованы обычные кавычки, а в макете -- закрывающая "лапка" (”), исправьте в псевдоэлементе content: "”";

John106, 1. Такую же, какую и у дочернего блока wrapper, т.е. .slider { min-width: 1170px; }, аналогично для классов head, foot. 5. Как-то так: https://jsfiddle.net/7ou5cLyo/

John106, 1. При уменьшении экрана обрезаются изображения в блоках foot и slider. Можно назначить им в стилях минимальную ширину, тогда будет норм. При использовании фоновых изображений нужно прописать также и фоновый цвет, похожий на это изображение, чтобы, в случае проблем с загрузкой фоновых изображений текст на этом фоне хорошо читался. При задании шрифтов также полезно помимо основного шрифта прописывать также и несколько безопасных. 2. Тэгу header нужно прописать класс, на будущее, т.к. хедеров может быть несколько на странице. 3. Названия классов не очень информативны. Css сложнее читать, и приходится смотреть в разметку. Что такое line-bot? Что содержится в этом блоке, какое место этот блок занимает по отношению к другим блокам? Сложно сказать, если не заглянуть в html. Еще один пример: блок внутри секции works назван la-works. Не понятно, что такое 'la'. Информативнее, имхо, будет works-item (классика). 4. Уменьшение прозрачности шрифта при наведении на кнопку -- некрасиво. Читабельность пропадает. Цвет текста лучше не изменять, вполне достаточно более темного фона. Такие большие отступы я бы повесил не на саму ссылку, а на slider: прописал бы ему минимальную высоту или что-то в этом роде. А ссылке прописал бы только верхнее поле. А то получается -- удалили кнопку -- slider уменьшился до смешных размеров. 5. С оформлением цитаты как-то сложно вышло. Зачем элемент оформления (кавычка) вынесен в разметку? Можно ведь использовать для этого псевдоэлементы. Почему такие странные поля у параграфа с цитатой (кстати, для такой цитаты можно использовать тег <blockquote>): зачем прописывать ему отступ слева в 217 пикселей, чтобы просто выровнять его по центру?

Так и должно быть. NaN != NaN.

inono, 1. id используются для идентификации элементов страницы при выполнении скриптов, для создания якорей. 2. Псевдоэлементы нужны для создания дополнительных сущностей в коде html и последующей их стилизации. Псевдоэлементы я изучал по книге Макфарланда "Большая книга css", но, мне кажется достаточно будет любой статьи по теме и тренировки в песочнице, там все очень просто: https://habrahabr.ru/post/154319/ 3. по дизайну сайта ничего толкового сказать не могу, т.к. не очень в этих вещах разбираюсь. Как рядовой пользователь могу сказать, что явного неприятия дизайн не вызывает, однако и эмоции "офигенно!" тоже.

1) Откажитесь от использования id, чтобы не было проблем с каскадностью. (заодно не придется так часто использовать !important, что тоже не очень хорошо) 2) Названия для стилей лучше давать осмысленные, связанные с предназначением блока, а не с его оформлением (класс h1_and_picture -- не есть гуд, класс section-title уже лучше). 3) Самое главное: очень много лишней разметки, цель которой -- только оформление страницы. Все оформление лучше вынести в css: вместо пустых дивов можно использовать псевдоэлементы, вместо бессмысленного <hr> на логотипе просто использовать нижнюю границу у тега h1 или псевдоэлемент. 4) С шапкой очень мудрено вышло, что-то вроде браузерного фотошопа Зачем обрабатывать эту тяжеленную шапку (http://f0115661.xsph.ru/ik_sauna.jpg) в браузере, накладывая дополнительные слои с фильтрами, градиентами и пр., если все это можно сделать в фотошопе и просто вставить одну уже обработанную картинку? Аналогично в подвале: под логотип студии с прозрачными буквами подкладывается дополнительный слой (дополнительный пустой див в разметке) для того, чтобы сделать эти буквы темнее цветом. 5) По тегам: тегов <nav>, <header>, <footer> на странице может быть несколько, поэтому на перспективу лучше сразу же присваивать им классы и задавать стили не элементу, а классу.

SatoRi, на самом деле все просто: https://jsfiddle.net/Tilonorrinco/xgaawnhb/ Здесь псевдоэлемент (тот, который .wrapper:before) стилизован под рамку, растянут по ширине блока-обертки (80% от wrapper) и отцентрирован по-вертикали.

1) полосы -- фон, который задается либо через изображение, либо через градиент 2) фон этот, скорее всего, присвоен блоку-обертке, который является родительским для двух других блоков (с текстом who we are, what we do) 3) изображения можно обрезать через css, поместив их в контейнер (типа <figure>) с overflow: hidden. Но проще всего обрезать в фотошопе. 4) рамку, разделяющую два блока можно реализовать через псевдоэлемент, присвоенный блоку-обертке, отцентрированный вертикально с помощью абсолютного позиционирования. Псевдоэлемент этот может быть как фиксированной высоты, так и растягивающийся в зависимости от высоты блока-обертки. 5) Сетку можно строить как через флоат, так и через инлайн-блок, у каждого способа свои плюсы и минусы.

fowl, если пользуетесь хромом: 0. переходите на сайт с иконками 1. Нажимаете ctrl+alt+i (или f12) чтобы вызвать инспектор. Появляется новая панель (по умолчанию выходит справа). 2. Жмете ctrl+shift+c (или иконку с изображением стрелки) 3. наводите курсор на то место, где показывается иконка, кликаете. 4. в верхней части панели отображается html код, содержащий инспектируемый элемент (это <div class="lp-address-info lp-address-info-archive lp-icon">). В нижней части -- css код, задающий форматирование элемента. В данном случае видим, что иконка загружается с помощью псевдоэлемента ::before .lp-address-info.lp-icon:before {background: url(../Camafon2/images/icon-map.png);}

Через инспектор (ctrl+shift+i): (http://camafon.ru/wp-content/themes/Camafon2/images/icon-map.png) (http://camafon.ru/wp-content/themes/Camafon2/images/tel.png)

Мужика тоже можно сделать через псевдоэлемент. https://jsfiddle.net/bth3uuL4/3/

Я немного поизвращался в песочнице и получилось вот так: https://jsfiddle.net/bth3uuL4/2/