Первая верстка. Прошу оценить. Есть вопросы по верстке.?

Question

[Светлана]

Здравствуйте.
Сверстала макет, это моя первая самостоятельная верстка.
Вроде простой, но что-то я с ним намучалась. Пока получилось сделать только версию desktop и планшет.
Проверяла в Chrome (с помощью DevTools), в IE разваливается, хотя вроде IE flex поддерживает.

https://github.com/SvetlanaSharkunova/AboutMe
https://svetlanasharkunova.github.io/AboutMe/

Буду благодарна за общий feedback (есть ли грубые ошибки, на что обратить внимание и тп) и ответы на конкретные вопросы, которые возникли у меня в процессе верстки.

1. Макет desktop дан шириной 1920px, у меня ноутбук разрешением 1920х1080, однако при просмотре страницы (Chrome) возникала горизонтальная прокрутка. Проблема более менее решилась при замене конкретных данных по ширине - процентами. Прокрутка исчезла, но все равно страница выглядит не так как на макете. И вообще можно ли делать так, как сделала я?
При этом при просмотре через DevTools при выставлении ширины 1920 все выглядит просто прекрасно. Не могу понять, почему так происходит…
2. Почему может наблюдаться несоответствие отображения при выборе конкретного девайса в DevTools (Iphone5) и Responsive при тех же px?
3. Возможно ли сделать так, чтобы при нажатии на первый скролл, страница прокрутилась до второго header и началась с начала экрана



верстка мобильной части (макет есть) не получается от слова совсем… Подскажите хотя бы с чего начать… Я понимаю, что нужно скрыть основное меню и сделать вместо него бургер-меню, но нужно ли менять (скачивать заново с макета - мобильная версия) картинки или их как-то по-другому нужно адаптировать?

Заранее спасибо за ответы!

Answer 1

[Юрий Литвиненко]

1. Потому что скроллбар имеет ширину.
Поэтому контентную часть центруете по центру экрана, т.к. контентная ширина всегда меньше пресловутых 1920px.
2. не парьтесь, используйте конкретный девайс в DevTools.
3. да, scroll-behavior: smooth; или скриптом.
3-а. да, для разных разрешений и для разных экранов (с разной плотностью пикселей) - разные картинки.

4. Первый экран, видимо предполагался на весь экран.
У вас это не так.
Попробуйте width =100vw; height = 100vh;
5. .main__img - искажаются пропорции изображения
6. .intro__scroll scroll-down-btn - это button
А т.к. это кнопка, то img там делать нечего.
Это button, а внутри svg
7. ну и семантики добавить в разметку, при желании.
8. о валидаторе не забывайте -).

Comments

[Светлана]

Спасибо за отзыв!
Вы могли бы более развернуто прокомментировать эти пункты:

5. .main__img - искажаются пропорции изображения
я поставила этот класс, но вроде нигде его не использую, правила css прописаны для контейнера, в котором находится img. Это неправильно?
6. заменила на button. Как вставить svg если оно скачено, н-р с flaticon, я знаю (сделала пока так, хотя не нашла точно похожую svg). А как вставить картинку из макета в button, если она (картинка) сохранена в формате svg?
7. использование header, main, nav - это не семантика?

[Юрий Литвиненко]

постучитесь мне на почту

[Светлана]

письмо на почту отправила

Answer 2

[Владислав Черненко]

Добрый день. В целом хорошо.
1. Не хватило мне hover-ов для ссылок.
2. Первый экран все же логичней делать на всю высоту если вы используете ScrollDown:

.intro {
    height: 100vh;
    box-sizing: border-box;
}

Comments

[Светлана]

Спасибо за отзыв!
Hover для ссылок добавила, совсем упустила этот момент.
С vh не сталкивалась, почитала, но непонятно, такое можно всем крупным разделам прописывать? Я поставила height: 100vh; для раздела main, но для него все осталось как было...

[Владислав Черненко]

Светлана, height: 100vh - это высота вьюпорта, если у вас вложенные элементы не влазят по высоте, то конечно будет ломаться... сейчас у вас там четко заданные вертикальные отступы, что в сумме с контентом дает многовато =)

[Светлана]

Но ведь отступы выставлены согласно макету... Если отступы по макету + контент больше высоты, как тогда поступить? Отступы тоже в vh задавать?

[Владислав Черненко]

Светлана, нет высоту в vh не нужно. Выровнять вертикально можно flex-ом, как у вас в 1 блоке, например, скролл кнопка прижата к низу блока, и вы же не писали ей при этом margin-top:100500px...

Макет макетом, но нужно понимать что мониторы у всех разные. На ноутах вообще может быть 700+- px. Нужно искать альтернативы для всех дисплеев.

Но это все конечно с учетом того, что задумка прокрутки поэкранная, типа такого FullPage, если нет, то без разницы)