grishnk
@grishnk
Через тернии к звездам.

Что можете сказать о верстке (новичок)?

В данный момент осваиваю технологии, которые пригодятся мне, как фронт-энд разработчику (коим я и собираюсь стать в недалёком будущем). html и css уже за плечами, в процессе js... Столкнулась с тем, что очень нужен человек, который смог бы подсказать или осадить "Что за херню ты творишь")) Сейчас сверстала лэндинг (готовый макет) и вопрос к гуру: почему на нормальном экране, а также при уменьшении всё ок, а при большом разрешении экрана некоторые элементы "убегают"? Старалась верстать адаптивно. Ну и если у кого-то будут замечания-предложения, я всегда рада выслушать! Ссылочка на диск с архивом: https://drive.google.com/open?id=1FHe1oma704Nz-NVu...
  • Вопрос задан
  • 2702 просмотра
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега Вёрстка
Front-end разработчик
1) Не делайте отступы блокам через  , есть же padding/margin
2) Забудьте о float: left в тех местах, для которых он не предназначен. Для создания сетки используйте flex/css grids
3) Делайте осмысленные названия классов и идентификаторов у элементов. У вас куча container1, container2 и.т.д.
4) Не используйте position: absolute, где не нужно явное абсолютное позиционирование (у плавающих блоков например).
5) Соблюдайте семантику. Заголовки должны быть в h1-h6 тегах.
6) Не забывайте добавлять атрибут alt для всех картинок img
7) У вас на сайте везде (вроде везде) используется шрифт "Trebuchet MS", но задаете вы его для элементов каждый раз, хотя можно было задать глобально для body
8) Блок "ГАЛЕРЕЯ" не по центру.
9) У вас соц-иконки в футере выровнены очень странно. Иконка insta имеет очень странный отступ от левого края, который видимо предназначается для выравнивания всего блока с иконками. Сделайте контейнер
.container {
   width: 100%;
   max-width: 1040px;
   padding: 15px;
   margin: 0 auto;
}

и в него кладите элементы, которые должны быть внутри сайта. У вас через странный отступ почти все отпозиционировано. Посмотрите чужие работы, как люди делают разметку. Вы пока слабо представляете, как это все происходит.
10) Вы должны адаптировать не только под маленькие и средние экраны, но и под большие, с шириной 2560px. Не нужно делать под них широкий сайт, просто нужно делать так, чтобы на них сайт тупо не уходил влево, а был по центру.
11) Куча повторяющегося кода в css
.footer>.footer_img>.vk{
    margin: 5% 0 0 1%;
	display: inline-block;
}
.footer>.footer_img>.twitter{
    margin: 5% 0 0 1%;
	display: inline-block;
}
.footer>.footer_img>.facebook{
    margin: 5% 0 0 1%;
	display: inline-block;
}

12) Освойте БЭМ (или другую методологию). Код будет чище и проще.
13) Сайт не адаптивный абсолютно, имеется только один media запрос, и тот только для изменения шрифта у документа. Посмотрите на другие сайты, как они адаптируются.

Это основное, но список можно продолжать долго. По коду можно судить, что вы учились по старой литературе, выбросите ее. Смотрите как верстают другие, ковыряйте макеты, читайте умные статьи и сайты, тренируйтесь часто, и все будет ок.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
PlugIN
@PlugIN
A Little Programmer
Как говорилось выше, много хороших ресурсов по верстке. Экспертом не являюсь, но могу выделить ресурсы: HTML Academy, Hexlet - для активного обучения и практики и Webref как справочник. Потом можно изучать сами спецификации W3C. Действительно, верстку зря иногда считают ерундой, это серьезное и многотрудное дело.
Ответ написан
Комментировать
dimovich85
@dimovich85
https://u-academy.net/
Пройдите курсы, не пожалеете. Вот немного бесплатного контента:
https://m.youtube.com/channel/UCY35dlJe-V5J_IqzU-XksAg
https://m.youtube.com/channel/UCaTfYudJUVA8cV_But8KZVQ
https://m.youtube.com/user/dmitrylavr // -> отличные курсы есть на этом канале.
Такого рода вопросы довольно часто повторяются на Тостере, посмотрите другие ответы на похожие вопросы, там еще больше материалов.
PS Даже html, поверьте, достаточно глубокий для того чтобы в нем потеряться. А CSS и JS развиваются с такой скоростью, что вряд-ли кто-то скажет, что я знаю всё и ничего учить мне не надо, не слушайте таких людей, они заблуждаются.
Успехов!
Ответ написан
Комментировать
@tyzberd
html и css уже за плечами

я бы так не сказал. Еще нужно много времени, что бы они были за плечами.
почему на нормальном экране, а также при уменьшении всё ок, а при большом разрешении экрана некоторые элементы "убегают"?

из за % у margin и top
Ответ написан
Ваш ответ на вопрос

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

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