KimberlyLight
@KimberlyLight
начинающий frontend-разработчик

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

Здравствуйте.
Сверстала макет, это моя первая самостоятельная верстка.
Вроде простой, но что-то я с ним намучалась. Пока получилось сделать только версию 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 и началась с начала экрана

5fbd22b0cea65120293662.jpeg

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

Заранее спасибо за ответы!
  • Вопрос задан
  • 361 просмотр
Решения вопроса 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. о валидаторе не забывайте -).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vladchv
WordPress Developer
Добрый день. В целом хорошо.
1. Не хватило мне hover-ов для ссылок.
2. Первый экран все же логичней делать на всю высоту если вы используете ScrollDown:
.intro {
    height: 100vh;
    box-sizing: border-box;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы