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>

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

 

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

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

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

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

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

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

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

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

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