Оцените вёрстку.

[John106]

Оцените первую мою верстку сайта. Верстал без JS, жду адекватной аргументированной критике по коду. Вот ссылка на верстку

Макет по которому я верстал:

Edited March 19, 2017 by John106

[shamil_ozdemirov]

здоров John106 скинь мне этот макет

[John106]

1 час назад, shamil_ozdemirov сказал:

здоров John106 скинь мне этот макет

Держи

[Tilonorrinco]

John106,

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

2. Тэгу header нужно прописать класс, на будущее, т.к. хедеров может быть несколько на странице.

3. Названия классов не очень информативны. Css сложнее читать, и приходится смотреть в разметку. Что такое line-bot? Что содержится в этом блоке, какое место этот блок занимает по отношению к другим блокам? Сложно сказать, если не заглянуть в html. Еще один пример: блок внутри секции works назван la-works. Не понятно, что такое 'la'. Информативнее, имхо, будет works-item (классика). 

4. Уменьшение прозрачности шрифта при наведении на кнопку -- некрасиво. Читабельность пропадает. Цвет текста лучше не изменять, вполне достаточно более темного фона. Такие большие отступы я бы повесил не на саму ссылку, а на slider: прописал бы ему минимальную высоту или что-то в этом роде. А ссылке прописал бы только верхнее поле. А то получается -- удалили кнопку -- slider уменьшился до смешных размеров.

5. С оформлением цитаты как-то сложно вышло. Зачем элемент оформления (кавычка) вынесен в разметку? Можно ведь использовать  для этого псевдоэлементы. Почему такие странные поля у параграфа с цитатой (кстати, для такой цитаты можно использовать тег <blockquote>): зачем прописывать ему отступ слева в 217 пикселей, чтобы просто выровнять его по центру?

Edited March 20, 2017 by Tilonorrinco

[shamil_ozdemirov]

20 часов назад, John106 сказал:

Держи

Thank you

[John106]

3 часа назад, Tilonorrinco сказал:

John106,

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

2. Тэгу header нужно прописать класс, на будущее, т.к. хедеров может быть несколько на странице.

3. Названия классов не очень информативны. Css сложнее читать, и приходится смотреть в разметку. Что такое line-bot? Что содержится в этом блоке, какое место этот блок занимает по отношению к другим блокам? Сложно сказать, если не заглянуть в html. Еще один пример: блок внутри секции works назван la-works. Не понятно, что такое 'la'. Информативнее, имхо, будет works-item (классика). 

4. Уменьшение прозрачности шрифта при наведении на кнопку -- некрасиво. Читабельность пропадает. Цвет текста лучше не изменять, вполне достаточно более темного фона. Такие большие отступы я бы повесил не на саму ссылку, а на slider: прописал бы ему минимальную высоту или что-то в этом роде. А ссылке прописал бы только верхнее поле. А то получается -- удалили кнопку -- slider уменьшился до смешных размеров.

5. С оформлением цитаты как-то сложно вышло. Зачем элемент оформления (кавычка) вынесен в разметку? Можно ведь использовать  для этого псевдоэлементы. Почему такие странные поля у параграфа с цитатой (кстати, для такой цитаты можно использовать тег <blockquote>): зачем прописывать ему отступ слева в 217 пикселей, чтобы просто выровнять его по центру?

1. Не заметил что обрезаются при уменьшении экрана. Какую минимальную ширину ему указать? А то я пробую что-то у меня не получается.

3. Когда следующий шаблон буду верстать, буду называть классы более информативно.

4. Хорошо, исправлю.

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

 

И да, спасибо за вашу критику.

Edited March 20, 2017 by John106

[Tilonorrinco]

John106,

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

5. Как-то так: https://jsfiddle.net/7ou5cLyo/

 

[John106]

36 минут назад, Tilonorrinco сказал:

John106,

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

5. Как-то так: https://jsfiddle.net/7ou5cLyo/

 

Когда я использую псевдоэлемент, то кавычки не такие выходят. Стиль шрифта прописан.

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

Edited March 20, 2017 by John106

[Tilonorrinco]

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

[John106]

2 минуты назад, Tilonorrinco сказал:

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

А, блин, не углядел.