X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Оцените плиз верстку :), в теме - ссылка на сверстанную страничку
mark2013
mark2013
Topic Starter сообщение 24.6.2019, 11:27; Ответить: mark2013
Сообщение #1


Участник
***

Группа: User
Сообщений: 220
Регистрация: 22.9.2013
Поблагодарили: 20 раз
Репутация:   4  


http://test.kreine.com/06/index.html
хотелось бы адекватной оценки опытным верстальщиками
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
qpPeW
qpPeW
сообщение 24.6.2019, 13:02; Ответить: qpPeW
Сообщение #2


Участник
***

Группа: User
Сообщений: 221
Регистрация: 18.5.2012
Поблагодарили: 60 раз
Репутация:   5  


500 Internal Server Error


--------------------
Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP) :: БЫСТРО :: КАЧЕСТВЕННО :: ДОСТУПНО
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4enki
4enki
сообщение 24.6.2019, 17:26; Ответить: 4enki
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 94
Регистрация: 4.5.2012
Поблагодарили: 24 раза
Репутация:   6  


mark2013, комментарии визуально сверху-вниз.

Если нужна консультация или ответы на вопросы со скринами — дайте знать в ЛС, готов всё развёрнуто рассказать и объяснить, почему комментарии именно такие.
  • В шапке есть пункты меню: целится для клика нужно в текст. Вёрстка — инструмент (способ?) заботы о пользователе. Поэтому лучше делать областью клика — всё пространство пункта меню. Теория — закон Фитса.
  • Фон шапки сделан картинкой (гигантской, не горизонтальным паттерном в 1px). Хотя такой же эффект можно повторить, используя чистый CSS и не используя картинку: https://developer.mozilla.org/en-US/docs/We...linear-gradient
  • Пункты меню, hover-эффекты. Класс ховера ставится через JS. Есть же стандартные :hover, :focus и т.п., которые прекрасно сделают всё то, что вы делали на JS.
  • В пунктах меню — иконки лучше сделать не через псевдо-класс, а в обычной картиной через <img ... > и спокойно потом её использовать в мобильном виде
  • Шапка. Логотип. Для текстового логотипа использован нестандартный шрифт Lobster. Если такого шрифта больше нет в макетах, то лучше логотип сделать картинкой. Также логотип нужно обернуть в ссылку: привычный паттерн для навигации по сайтам. Клик по логотипу уводит на морду сайта. Ткните, например, на форуме в лого.
  • Карточки фотографий. Визуальная часть. Отступы — не такие, как задумывалось и/или кажется. Слева больше, чем справа. У самой картинки (<img ... >) есть не убранный отступ. Выключается он через https://developer.mozilla.org/ru/docs/Web/CSS/vertical-align
  • Стили класса .image не предусматривают того, что картинка может быть очень гигантской и всё поломать. Посмотрите в сторону https://developer.mozilla.org/ru/docs/Web/CSS/object-fit, теоретическая часть клёвая есть у Вадима Макеева в этом видео: https://www.youtube.com/watch?v=aZJMOVpMhtc
  • Для любых картинок нет заполненного атрибута alt. Это важная штука.
  • Социальные иконки слишком сложно свёрстаны: лучше просто ссылка с картинкой. Стили hover- и active-состояний тоже делаются через JS, но можно проще.
  • В подвале визуально всё странное, текст размещён справа и нет отступа вниз. Тег span лучше заменить на обычный текстовый абзац: <p>
  • Отдельный гигантский лайк за использования гридов для раскладки фотографий. <3
Отдельным строками. Посмотрите в сторону наименований селекторов и их смысловой части (или для начала — визуальной). Начните с ссылки https://github.com/yoksel/common-words и https://ru.bem.info/.


Поблагодарили: (3)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 24.6.2019, 17:33; Ответить: falken
Сообщение #4


online
*******

Группа: Super Moderator
Сообщений: 4211
Регистрация: 23.3.2011
Поблагодарили: 4635 раз
Репутация:   392  


Цитата(mark2013 @ 24.6.2019, 10:27) *
адекватной оценки

на твердую тройку.

4enki хорошо все расписал, но добавлю от себя еще несколько моментов:
1. погуглите, что такое сетка и зачем она нужна при верстке. не понятие css гридов, а вообще, концептуально что есть сетка в верстке и какие виды существуют
2. не кроссбраузерно, отсутствуют префиксы
3. начать использовать на старте флексбоксы - окей, я понимаю, но гриды здесь уже лишнее
4. избавьтесь от привычки позиционировать блоки с помощью маржинов и никогда так не делайте, юзайте маржины только для того, чтобы банально задать отступ. (об этом чуть подробнее ниже на скриншоте)
5. макет достаточно дерьмовенький, пробуйте что-то поинтересней

Поясняю 4 пункт:
Развернуть/Свернуть

Вертикальная линия - это левая граница сетки (когда вы узнаете, что это и зачем это нужно - поймете), в данном случае логотип должен отталкиваться от нее, а не висеть в воздухе и позиционироваться собственными отступами от краев окна.




--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mark2013
mark2013
Topic Starter сообщение 24.6.2019, 19:51; Ответить: mark2013
Сообщение #5


Участник
***

Группа: User
Сообщений: 220
Регистрация: 22.9.2013
Поблагодарили: 20 раз
Репутация:   4  


Всем огромное спасибо! :)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Оцените домен
gucci.su
6 ARsHi 288 8.11.2019, 20:13
автор: VinogradOFF
Горячая тема (нет новых ответов) СЕКСшоп - оцените
46 Taylor 13213 29.10.2019, 11:06
автор: kolyas
Горячая тема (нет новых ответов) Оцените вопросник
30 santeyyy81 2537 27.10.2019, 18:19
автор: Libby
Открытая тема (нет новых ответов) Оцените киношный сайт
25 serhio123 2556 27.10.2019, 1:25
автор: zanyatoiRU
Открытая тема (нет новых ответов) Интернет-магазин - оцените код
5 Mak_Pet 458 25.10.2019, 18:51
автор: Mak_Pet


 



RSS Текстовая версия Сейчас: 18.11.2019, 21:25
Дизайн