Оцените верстку из PSD (не много, один блок сверстаный)?

Question

Денис Сопко @denisopko

Стремлюсь стать выше)

Оцените верстку из PSD (не много, один блок сверстаный)?

Может есть отдельные площадки, не знаю, так как я начинающий. Если что, сорь)

Можете оценить верстку - https://layoutwork.github.io/Restaraunte/
Написать, какие у меня ошибки и так далее?
Адаптивность, попрошу, не трогать))) Его пока-что не делал. Только обычную, пк версию

У меня сомнения по поводу высоты блока header. Высоту блока должен задавать контент. И вот не знаю, правильно ли я в верстке сделал или нет.

Спасибо заранее

Вопрос задан более трёх лет назад
313 просмотров

7 комментариев

Подписаться 1 Простой 7 комментариев

Владислав Лысков @Vlatqa Куратор тега CSS

Один блок из четерех элементов, и он не адаптивный, что тут оценивать, без обид

Написано более трёх лет назад
Денис Сопко @denisopko Автор вопроса

Владислав Лысков, про адаптивность я ведь написал....

Написано более трёх лет назад
Денис Сопко @denisopko Автор вопроса

VicTHOR, это не вся верстка, а только шапка от макета... header, потом пойдет секция и так далее. Зачем мне изображение body задавать? Для всей страницы...?
header - это шапка, в которой лежит навигация (логотип и меню) и в этом же блоке (header) лежит блок с блоками меню (меню рестарана)

Написано более трёх лет назад
Денис Сопко @denisopko Автор вопроса

Владислав Лысков, а все.. Я понял, к чем ты. Ок, тут согласен

Написано более трёх лет назад
Владислав Лысков @Vlatqa Куратор тега CSS

Денис Сопко, всё очень плохо, даже если не иметь ввиду последующую адаптацию(это я про фиксированные размеры блоков)
зачем тут .menu nav__menu margin-left: 30em;? почему не использовать justify-coтtent: space-around?
ну и смотреть больше не на что

Написано более трёх лет назад
Денис Сопко @denisopko Автор вопроса

По поводу "зачем тут .menu nav__menu margin-left: 30em;?"...
В макете блоки logo и menu стоят именно так. То есть, логотип прижат к левому краю, а пункты меню находятся именно там, как на скрине, который я прикрепил выше в комментариях.
Если бы я задал justify-content: space-aroud, то блоки logo и menu разделили расстояние вокруг себя и получилось бы вот это: (скрин). Я делаю строго по макету.
И даже если я тут не прав, то в любом случае, я и попросил оценить верстку, чтобы понять ошибки)
А про фиксированные размеры блоков я не понял... Типа то, что блоку logo задан фиксированный размер в 270px?

Написано более трёх лет назад
Денис Сопко @denisopko Автор вопроса

VicTHOR, именно в header - это весь контент.

Макет я взял произвольный из интернета... У меня особо контента нет. То,что в макете есть - я верстаю.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

3 комментария

Денис Сопко @denisopko Автор вопроса

1)"Никогда особо не понимал зачем первый экран пихают в header, ведь..."
Смотрел видео по верстке и так далее... И во многих делали в header. А как первый экран делать? Нет, ну можно было конечно и div с классом header. Как первый экран можно назвать? Это ведь шапка сайта. По поводу того,что логотип в навигации - об этом я тоже задумывался. Просто смотрел много видосов, где так делали и думал, что так правильно.

2) "нет постоянства в коде, то href = "#", то href="#"" - не понял, о чем речь... Я ведь сейчас делаю дизайн. И абсолютно во все ссылки пихаю #. Потому что больше туда нечего пихать, да и не надо сейчас.

3) "не особо по бэму". Спасибо, тут не заметил,что в wrap-nav (навигацию) закинул еще и блоки .block-cards__card
Почему . block-cards и .wrap-block-cards не по бэму?
.block-cards - это блок, в котором лежат эти три блока с карточками, а .wrap-block-cards я сделал, чтобы задать ему отступы от навигации и так далее, так как блок . block-cards не может знать свое расположение (по БЭМ), нельзя задавать размеры и так далее. (естественно, эту всю инфу я тоже нарыл в гугле). Типа, говорят что блоку . block-cards нельзя задать размеры, отступы, тогда создадим вспомогательный блок (обертка) ".wrap-block-cards", которой зададим отступы. Тут я не совсем тогда понял, так как это ведь тоже блок... Получается, что мы создаем блоку .( block-cards), которому не можем задать отступы, обёртку-блок и ему задаем отступы (хотя говорится, что блоку нельзя отступы задавать). Короче, запутано все для меня пока-что.

4) alt = "icon" - опять же. Я делаю сейчас не seo, а дизайн. Но, кстати, я все равно не знаю, как можно описать alt иконки... Это иконка, просто иконка. Сделать описание типа "iconLogo"? ...

5) нет fallback-шрифта. Имеете ввиду, что нет шрифтов, которые сработаю, если не найдется основного? Это понял, ок, буду дописывать.

6) "фон у .logo__link не картинкой". Почему? Здесь я сделал фон для лого картинкой, как и и у .block-cards__card.

По поводу анимации я тоже заметил, не удобно при наведении. Но я стараюсь делать все как в макете, а в макете этот блок вообще на 60px поднят. Я не знаю, нужна ли там анимация вообще, но я добавил.

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

P.S. Макет произвольный из инета

Спасибо за замечания

Написано более трёх лет назад
Михаил @notiv-nt
Денис Сопко, главный header/footer это элемент принадлежащий всему сайту, а не конкретной странице, в теории они никогда не меняют свои местоположения (стили) для удобства обращения к ним

а контент текущей страницы должен быть в <main>, не считая aside который рядом (если есть)

<body> <header> лого поиск <nav> </header> <main> section, article, и тд </main> <aside>если есть, у которого свои section</aside> <footer> дополнительные ссыки, мета-информация к САЙТУ, не странице </footer> </body>

2 - код. google > html styleguide, прочтите парочку

3 блок и его элементы под block-cards, wrap-block-cards это отдельный блок, да я понимаю что к чему, но все же

4 alt описывает то, что находится на картинке, (кружка, диван, штука которая накрывает продукты, хз как её), нужен для поиска и для доступности
Написано более трёх лет назад
Денис Сопко @denisopko Автор вопроса

Михаил, спасибо

Написано более трёх лет назад

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

PHP

+2 ещё

Средний
Некорректная работа submit?
- 1 подписчик
- 7 часов назад
- 37 просмотров
0

ответов
HTML

+2 ещё

Простой
Media запросы, нужно менять каждые 10px. Может проблема в коде?
- 2 подписчика
- 8 часов назад
- 272 просмотра
0

ответов
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 11 часов назад
- 42 просмотра
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 14 часов назад
- 159 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 17 часов назад
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 18 часов назад
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 23 часа назад
- 97 просмотров
2

ответа
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 64 просмотра
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 52 просмотра
0

ответов
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Услуги devops разного характера для видео сервиса

26 апр. 2024, в 06:46

1000 руб./в час

Найти ошибку flutter_map

26 апр. 2024, в 05:31

1000 руб./за проект

Разработать электронику для весов с Wi-Fi

26 апр. 2024, в 01:22

1000 руб./в час

Один блок из четерех элементов, и он не адаптивный, что тут оценивать, без обид
Владислав Лысков, про адаптивность я ведь написал....
VicTHOR, это не вся верстка, а только шапка от макета... header, потом пойдет секция и так далее. Зачем мне изображение body задавать? Для всей страницы...?
header - это шапка, в которой лежит навигация (логотип и меню) и в этом же блоке (header) лежит блок с блоками меню (меню рестарана)
Владислав Лысков, а все.. Я понял, к чем ты. Ок, тут согласен
Денис Сопко, всё очень плохо, даже если не иметь ввиду последующую адаптацию(это я про фиксированные размеры блоков)
зачем тут .menu nav__menu margin-left: 30em;? почему не использовать justify-coтtent: space-around?
ну и смотреть больше не на что
По поводу "зачем тут .menu nav__menu margin-left: 30em;?"...
В макете блоки logo и menu стоят именно так. То есть, логотип прижат к левому краю, а пункты меню находятся именно там, как на скрине, который я прикрепил выше в комментариях.
Если бы я задал justify-content: space-aroud, то блоки logo и menu разделили расстояние вокруг себя и получилось бы вот это: (скрин). Я делаю строго по макету.
И даже если я тут не прав, то в любом случае, я и попросил оценить верстку, чтобы понять ошибки)
А про фиксированные размеры блоков я не понял... Типа то, что блоку logo задан фиксированный размер в 270px?
VicTHOR, именно в header - это весь контент.

Макет я взял произвольный из интернета... У меня особо контента нет. То,что в макете есть - я верстаю.

Answer 1 · 2019-11-06 23:23:30

Никогда особо не понимал зачем первый экран пихают в header, ведь

The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/...
Ну это ладно.
Но вот что лого делает в навигации, вот это очень хороший вопрос, на который хотелось бы услышать ответ

нет постоянства в коде, то href = "#", то href="#"

не особо по бэму

. block-cards и .wrap-block-cards
.header-wrap
.wrap-nav

alt = "icon" как информативно то

font-family: 'MyriadProRegular'; нет fallback-шрифта

фон у .logo__link не картинкой, не помню как, но это 100% можно сделать через css, как и у .block-cards__card, UPD: например https://codepen.io/notiv/pen/VwwxemQ?editors=1100

анимация наведения на.block-cards__card полный отстой, 50px слишком много, 15 максимум

если верстка без пре-процессоров/сборщико, то пора

Answer 2 · 2019-11-07 00:06:55

Mors Clamor @66demon666

По навыкам джун - по факту безработный

На мобилке расползлось эх

Ответ написан более трёх лет назад

1 комментарий

Оцените верстку из PSD (не много, один блок сверстаный)?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт