John106

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

Рекомендуемые сообщения

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

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

marble-min.png

Изменено пользователем John106

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

John106,

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

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

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

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

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

Изменено пользователем Tilonorrinco
  • Like 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
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. С псевдоэлементами еще не сильно знаком, подскажите какой там лучше использовать? Я даже как-то не подумал что можно было этим тегом воспользоваться. Просто не знал как по центру его сделать вот и прописал такой отступ.

 

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

Изменено пользователем John106

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

John106,

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
36 минут назад, Tilonorrinco сказал:

John106,

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

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

 

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

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

Изменено пользователем John106

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 минуты назад, Tilonorrinco сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас