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: "”"; 

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

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


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

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

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

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

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

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

Войти

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

Войти сейчас


Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы