Оцените верстку начинающего

[HiddenName]

Всем привет, хочу получить отзыв о моей верстке, перед созданием этой темы правила прочитал. К сожалению у меня нет 30 сообщений на форуме , да простит меня администрация . Я занимаюсь всего два месяца, для того чтобы понять мое или нет, я начал самостоятельно обучаться по книге - Изучаем HTML, XHTML и CSS (Бестселлеры O'Reilly). Мне понравилось, далее заплатил денег и прошел курс базовой верстки в EpicSkills. По ходу обучения (оно длилось один месяц) мы прошли много тем, я выполнил необходимое кол-во заданий в их системе и успешно сверстал учебный проект из трех страниц. Сейчас все свободное время верстаю, но без обратной связи о моей верстке прогресс очень медленный. Буду очень благодарен всем кто найдет время и посмотрит на этот проект, покритикует, даст рекомендации.

Теперь о макете - это Landing page. Я сверстал одну главную страницу используя только HTML & CSS. Эффекты и карусели я опустил так-как пока с ними не разобрался (кроме простых эффектов при наведении). Хотел сделать сайт резиновым, но не получилось, хочу узнать почему. Когда проверяю на разных разрешениях (в консоли разработчика Google chrome) в съезжает влево почему так? Может быть еще про классы очень много их у меня, как мне кажется+ имена не всегда правильные. Читал про БЭМ, интересная методология именования классов, но пока её не понял. Стоит ли на моем скромном уровне смотреть в сторону фреймворков или сосредоточиться на изучении и понимании основ CSS ? Дальше не знаю, что еще спросить . 

Вот ссылка на сайт https://oldyname.github.io/

Плюс зип файл на всякий случай. Заранее благодарю за ответы, советы, комментарии.  

 

[Svetlana_P]

Привет! Архива нет. Залейте на Яндекс.Диск, например, и пришлите ссылку. Заодно и на макет, по которому верстали, в png. Я не профи, но гляну и прокомментирую, что замечу, в том числе про адаптивность.

Насчет БЭМ: тоже перешла на него пару месяцев назад и довольна. Немного бесит кол-во классов, но зато всё ясно.

Я бы сосредоточилась на изучении и понимании основ HTML/CSS. Попозже обязательно фреймворк Bootstrap, особенно сетку. Много макетов по ней.

[HiddenName]

Спасибо, буду осваивать БЭМ. Вот ссылка внутри сайт и макет https://yadi.sk/d/wLz-QCDC3L4sHj

[Евгений_SB]

а почему меню не на  ul а ссылками помоему это как то не очень хотя так можно наверно , и ни одна ссылка не реагирует на hover

[HiddenName]

7 минут назад, Евгений_SB сказал:

а почему меню не на  ul а ссылками помоему это как то не очень хотя так можно наверно , и ни одна ссылка не реагирует на hover

Подумал, что это просто группа ссылок. Ниже навигация в ней использовал ul>li>a. 

[swandev]

@HiddenName

1. Нет ховеров у ссылок, кнопок. Нужно чтобы хоть какое-то взаимодействие было

2. Социальные кнопки в футере должны быть одинакового размера и формы.

3. <div class="main"> мне кажется лучше заменить на  <main class="main"> и футер вынести из этого блока.

4.  В блоке hero стрелочка должна быть частью ссылки LEARN MORE , а не отдельным элементом

5. Блок с ссылками app store и play market неправильно сверстан. иконка+ссылка+текст должны быть обернуты в див. И стрелочка должна быть частью ссылки.

Сейчас же все по отдельности в ряд. Иконка яблока и андроида должна быть задана через css, а не img

6. Цитата должна быть blockquote, а не див как сейчас

 

5 часов назад, HiddenName сказал:

Хотел сделать сайт резиновым, но не получилось, хочу узнать почему. Когда проверяю на разных разрешениях (в консоли разработчика Google chrome) в съезжает влево почему так?

Чтобы он был резиновый нужно размеры задавать в %, а не px как сейчас

5 часов назад, HiddenName сказал:

Может быть еще про классы очень много их у меня, как мне кажется+ имена не всегда правильные. Читал про БЭМ, интересная методология именования классов, но пока её не понял. 

Имена классов нормальные, их не много. Наименование классов по БЭМу не такое сложное, как может показаться.

Вот возьмем пример из этого лендинга:

<div class="blog-lg">
  <img src="img/photo-student.jpg" alt="students">
  <span class="blog-lg-subtitle">Blog Post about something and someone</span>
  <p class="blog-lg-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramb specimen book.... <a href="#">Read more</a></p>
</div>

может быть заменен на

<article class="blog-preview blog-preview--lg">
  <img class="blog-preview__image" src="img/photo-student.jpg" alt="students">
  <h4 class="blog-preview__subtitle">Blog Post about something and someone</h4>
  <div class="blog-preview__text">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramb specimen book.... <a href="#">Read more</a></p>
  </div>
</article>

и соответственно

<div class="blog-sm">
  <img src="img/photo-space-copy.jpg" alt="students">
  <span class="blog-sm-subtitle">Lorem Ipsum is simply dummy text </span>
  <p class="blog-sm-text">Face it, by the time you make it through your third year of rotations, your mind is ... <a href="#">Read more</a></p>
</div>

заменяется на

<article class="blog-preview blog-preview--sm">
  <img class="blog-preview__image" src="img/photo-space-copy.jpg" alt="students">
  <h4 class="blog-preview__subtitle">Lorem Ipsum is simply dummy text </h4>
  <div class="blog-preview__text">
    <p>Face it, by the time you make it through your third year of rotations, your mind is ... <a href="#">Read more</a></p>
  </div>
</article>

 

6 часов назад, HiddenName сказал:

Стоит ли на моем скромном уровне смотреть в сторону фреймворков или сосредоточиться на изучении и понимании основ CSS ? Дальше не знаю, что еще спросить . 

Еще рано смотреть в сторону фреймворков. Изучи хорошо css, адаптивность. Флексбоксы, гриды и все такое. Верстай большее сайтов и сложнее выбирай, лендинги очень просты.

[Svetlana_P]

1. Большая картинка с телефоном съехала влево.
2. Для адаптивности, в первую очередь, должен быть мета-тег с вьюпортом https://developer.mozilla.org/ru/docs/Mozilla/Mobile/Viewport_meta_tag . Добавьте, и можно дальше смотреть.
3. Отступы между элементами сильно отличаются от тех, что в макете. Это сразу видно при наложении скриншота верстки на макет.
4. Порядок подключения css не очень. Сейчас первым идет файл main, а потом normalize. Но ведь normalize может переопределить какие-то свойства, зачем Вам это надо. Пусть идет сначала normalize.
5. Если приходится иконки делать мелкими картинками, то лучше объединять эти  картинки в спрайт.
6. При увеличении количества текста в цитате едет верстка.
7. Там же круглая фотка сверху обрезана.
8. Тень вокруг записей в блоге сильно отличается по цвету и насыщенности.
9. Текст в логотипе CompanyName имеет смысл текстом сделать, если шрифт есть.
10. Насчет верстки нижнего меню — теги a внутри nav — не думаю, что это не правильно. Тег nav для навигации по сайту и нужен. Насколько и читала и видела, в последнее время многие верстают такой структурой

<nav>
  <ul>
    <li><a href="">Ссылка 1</a></li>
    <li><a href="">Ссылка 2</a></li>
    <li><a href="">Ссылка 3</a></li>
  </ul>
</nav>

Семантически здесь нет ошибки, но для продвижения вроде лучше. Но на источник сослаться не могу, нет закладки.

 

[HiddenName]

12 часа назад, swandev сказал:

@HiddenName

1. Нет ховеров у ссылок, кнопок. Нужно чтобы хоть какое-то взаимодействие было

2. Социальные кнопки в футере должны быть одинакового размера и формы.

3. <div class="main"> мне кажется лучше заменить на  <main class="main"> и футер вынести из этого блока.

4.  В блоке hero стрелочка должна быть частью ссылки LEARN MORE , а не отдельным элементом

5. Блок с ссылками app store и play market неправильно сверстан. иконка+ссылка+текст должны быть обернуты в див. И стрелочка должна быть частью ссылки.

Сейчас же все по отдельности в ряд. Иконка яблока и андроида должна быть задана через css, а не img

6. Цитата должна быть blockquote, а не див как сейчас

 

Чтобы он был резиновый нужно размеры задавать в %, а не px как сейчас

Имена классов нормальные, их не много. Наименование классов по БЭМу не такое сложное, как может показаться.

Вот возьмем пример из этого лендинга:

<div class="blog-lg">
  <img src="img/photo-student.jpg" alt="students">
  <span class="blog-lg-subtitle">Blog Post about something and someone</span>
  <p class="blog-lg-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramb specimen book.... <a href="#">Read more</a></p>
</div>

может быть заменен на

<article class="blog-preview blog-preview--lg">
  <img class="blog-preview__image" src="img/photo-student.jpg" alt="students">
  <h4 class="blog-preview__subtitle">Blog Post about something and someone</h4>
  <div class="blog-preview__text">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramb specimen book.... <a href="#">Read more</a></p>
  </div>
</article>

и соответственно

<div class="blog-sm">
  <img src="img/photo-space-copy.jpg" alt="students">
  <span class="blog-sm-subtitle">Lorem Ipsum is simply dummy text </span>
  <p class="blog-sm-text">Face it, by the time you make it through your third year of rotations, your mind is ... <a href="#">Read more</a></p>
</div>

заменяется на

<article class="blog-preview blog-preview--sm">
  <img class="blog-preview__image" src="img/photo-space-copy.jpg" alt="students">
  <h4 class="blog-preview__subtitle">Lorem Ipsum is simply dummy text </h4>
  <div class="blog-preview__text">
    <p>Face it, by the time you make it through your third year of rotations, your mind is ... <a href="#">Read more</a></p>
  </div>
</article>

 

Еще рано смотреть в сторону фреймворков. Изучи хорошо css, адаптивность. Флексбоксы, гриды и все такое. Верстай большее сайтов и сложнее выбирай, лендинги очень просты.

Спасибо за развернутый ответ и примеры с пояснениями. И пару вопросов: пиксели совсем не использовать, только проценты ? Какие сайты брать вместо лендингов, интернет магазины ?

11 час назад, Svetlana_P сказал:

1. Большая картинка с телефоном съехала влево.
2. Для адаптивности, в первую очередь, должен быть мета-тег с вьюпортом https://developer.mozilla.org/ru/docs/Mozilla/Mobile/Viewport_meta_tag . Добавьте, и можно дальше смотреть.
3. Отступы между элементами сильно отличаются от тех, что в макете. Это сразу видно при наложении скриншота верстки на макет.
4. Порядок подключения css не очень. Сейчас первым идет файл main, а потом normalize. Но ведь normalize может переопределить какие-то свойства, зачем Вам это надо. Пусть идет сначала normalize.
5. Если приходится иконки делать мелкими картинками, то лучше объединять эти  картинки в спрайт.
6. При увеличении количества текста в цитате едет верстка.
7. Там же круглая фотка сверху обрезана.
8. Тень вокруг записей в блоге сильно отличается по цвету и насыщенности.
9. Текст в логотипе CompanyName имеет смысл текстом сделать, если шрифт есть.
10. Насчет верстки нижнего меню — теги a внутри nav — не думаю, что это не правильно. Тег nav для навигации по сайту и нужен. Насколько и читала и видела, в последнее время многие верстают такой структурой

<nav>
  <ul>
    <li><a href="">Ссылка 1</a></li>
    <li><a href="">Ссылка 2</a></li>
    <li><a href="">Ссылка 3</a></li>
  </ul>
</nav>

Семантически здесь нет ошибки, но для продвижения вроде лучше. Но на источник сослаться не могу, нет закладки.

 

Спасибо за ответы. Как накладывать скриншот верстки на макет ? (просто скриншот который накладывается в фотошопе ?) По остальному вроде бы все понятно

[swandev]

1 час назад, HiddenName сказал:

Спасибо за развернутый ответ и примеры с пояснениями. И пару вопросов: пиксели совсем не использовать, только проценты ? Какие сайты брать вместо лендингов, интернет магазины ?

 

Пиксели нужно использовать. Если нужен именно резиновый сайт, то проценты задаются только у тех блоков, которые должны растягиваться.

1 час назад, HiddenName сказал:

 

Как накладывать скриншот верстки на макет ?

Можно плагин для хрома установить pixelperfect и накладывать скриншот макета на верстку

Edited July 15, 2017 by swandev