Прошел базовые курсы на сайте. Курс создания магазина The Great Keaksby не проходил. Когда начал, решил что уже не очень интересно. Скачал макет и начал его верстать самостоятельно. Первая верстка где использую Less и адаптивность с помощью медиа запросов.
Вот ССЫЛКА!
Хотел бы услышать всевозможную критику, что бы вы сделали по-другому?
В верстку вложил сердце, буквально(кликаем по сердцу в .copyright).
Спасибо!
Блок преимуществ и главное меню размечала бы с помощью списка.
В блоке .theory нет центровщика, padding: 80px 130px; - это не центровка.
Для заголовка и кнопки было бы лучше сделать общую обертку и использовать распорку непосредственно на ней.
Картинка в dd выступает снизу на несколько пикселей, это связано с использованием inline-block. Здесь можно было обойтись и вовсе без float. И картинку, и span сделать блочно-строчными.
В блоке .comments также отсутствует центровщик.
Блок .top-of-shop имеет нулевую высоту (отсутствует распорка). Из-за этого у .container получается отступ сверху 180px.
Высота блока .feedback-top не соответствует содержимому (только 70px).
Футер также не центрован. Высота ссылки логотипа в футере не соответствует высоте картинки логотипа (ссылка не является блочным элементом у вас). В хедере такого нет, потому что ссылке логотипа дописан float.
Заголовки списков в .footer-main (Магазин, Отзывы, Прайс-лист) не могут быть включены в li.
Скорее всего разметка здесь была бы такой: .footer-main>.footer-nav3>b+ul>li3 (вместо b может быть тег заголовка, допустим третьего уровня h3)
Призыв “Давайте дружить!” может быть просто параграфом.
Адаптивность не очень получилась, при ширине примерно 768px появляется горизонтальный скролл, исчезает только при 1024px.
Сердечко, конечно красивое)
Пользуетесь ли вы инспектором при верстке проекта?
Спасибо за комментарий, действительно стоящие замечания!
Инспекторов не пользуюсь, может посоветуете какой?
По поводу адаптивность - решил что она логична только на экранах меньше чем ipad, поэтому стили меняются при ширине мне 767px. Не знаю на сколько это правильно…
На счет скролла - не увидел его на разрешениях 768-1024. Вроде стоит <meta name="viewport" content="width=device-width">, поэтому контент должен масштабироваться по ширине окна, что и происходит:
Или я что-то не правильно понимаю?
Под инспектором я подразумеваю встроенные инструменты разработки в браузере (DevTools). С его помощью я и смотрела вашу работу.
Для адаптивности выделяют как минимум три ширины просмотра: стандартная, планшетная и мобильная.
Я скролл смотрела по-другому. Просто уменьшала ширину окна в браузере.
Встроенными инструментами пользуюсь.
Ну, у меня мини адаптивность, решил что для первого раза достаточно будет 2 ширины) Теперь поработаю над планшетной версией.
Спасибо!
1 лайк