Оцените вёрстку

Общее
1

Всем привет,

в ожидании продвинутого интенсива верстаю бесплатные макеты, и как-то по ощущениям становится всё страньше и страньше делать это в изоляции. Оцените, пожалуйста, вёрстку макета jetro, он был в одной из месячных рассылок htmlacademy.

Ссылка на вёрстку: http://talequale.ru/jetro/index.html

Макет, если что, тут: https://yadi.sk/d/FfYS7WnUfFxLx

2
  1. Перенести подключение библиотек js в самый низ, за ними пустить скрипты, которые лучше вынести в один отдельный файл и его подключать после бибилотек - http://take.ms/E5JNW

Главная страница

  1. Хедер и футер стилизовать лучше по классу, а не по тегу
  2. Внутри хедера есть дополнительная обертка контейнер, этот класс можно перенести на хедер и избавиться от лишнего элемента. То же самое касается index-content
  3. http://take.ms/xrLNz - меня большие сомнения относительно верстки вот этого блока. Я бы сделал эти картинки ссылками, так как мне кажется что они открывают галерею, но даже если этого не делать, картинки все равно должны вставляться через тег img, а не через задний фон.
  4. Ну и стилизовать по nth-child очень нехорошо - http://take.ms/rS1PF
  5. http://take.ms/CjQSe - это не ссылка, а заголовок
  6. http://take.ms/WJxrO - вот это тоже не похоже на ссылку

О нас

  1. Можно убрать контейнер и перенсти класс на h2 при этом h2 заменить на h1 - http://take.ms/uibfD
  2. Картинку можно и без спана зафлоутить - http://take.ms/8oqkz
  3. http://take.ms/LEDgo - blockquote
  4. http://take.ms/VTAxz - вот эти блоки стилизовать по доп классу а не по порядку
  5. В галереи не подгрузились картинки

Блог

Тут по сути одно замечание, у вас статья артикл и внутри него есть заголовки сначала h6 потом h3. Как то не логично) я бы сделал основной заголовок h2 или h1 а вот те что h3 вообще не стал делать звголовком

Контакты

  1. Как бы забавно это не было но тег адресс - http://html5doctor.com/the-address-element/ - описывает не адресс объекта, а авторов) Так что он тут не подходит.
  2. Назначение полей ввода надо писать не через value а через placeholder
  3. кнопка - button type=“submit”

Ну вроде все, но я мог что то пропустить, в письменном виде сложно передать все)

2 лайка
3

Сергей, большое спасибо за подробные комментарии! каких-то вещей я не знала (про address, например), но почти всё поправила и почти ничего при этом не сломала :wink:

есть несколько вопросов:

на классе контейнер висят прозрачные паддинги по бокам, у заголовка тоже есть свои паддинги, соответственно, если просто перенести класс контейнер на заголовок, искомого результата не получится, и нужно будет отбивать заголовок от родителя боковыми маргинами, чтобы сохранить эти прозрачные полоски. Я не знаю, как правильнее - оставить доп. обёртку со стандартным для всех элементов набором стилей или переписать стили только для заголовка. В смысле, правда не знаю, как кошернее, сделать можно и так и так же.

а двойную рамку вокруг элемента можно делать? я не нашла как, поэтому белая рамка в два пх висит на картинке, а внешняя серая - на спане. затем он там и есть

потому что в макете их там не было ) добавила

а в чём в данном случае разница между button type=“submit” и input type=“submit”?

в htmlacademy не планируется случайно что-то типа сервиса code review для студентов? платно, по подписке или что-то вроде того? думаю, это могло бы пользоваться популярностью, вопросов много возникает. не всегда можно сделать однозначные выводы на основе доступной информации, потому что часто не хватает совсем не информации, а алгоритмов для её обработки в голове ) круто, что можно здесь на форуме спросить, но слишком часто, наверное, так не сделаешь, нехорошо отнимать чужое время просто так.
ну или может быть посоветуете какие-нибудь намоленные места, куда новичок может прийти со своим кодом и попросить комплексных рекомендаций?

1 лайк
4

Поэтому это и называется поверхностным осмотром) Да я согласен что замечания про контейнер и h2, и про картинку с двойной рамкой были лишние. Я учел не все детали при проверке.

По поводу кнопок, мне кажется что более логично делать кнопку - кнопкой, тем более что есть отдельный тег для него.

По поводу

напишите это в идеи и предложения)

таких мест, где можно получить верную и хорошую консультацию честно не знаю, такие вещи лучше доверять кому-то проверенному, как наставник - только на дальнейших этапах самообучения.

5

ну я уточнила на случай, если это я что-то не допоняла )

по поводу проверенного человека согласна, хорошо, когда он есть, и когда есть, к кому пойти в падаваны )
напишу в идеи и предложения, да )

6

Для начала хорошо!

Простое задание, которое частенько бывает:
Сделай ширину контента не width: 940px; , а width: 1200px;
И сколько на это времени у тебя может уйти… Как раз ты увидишь где можно применить относительные единицы и отпимизировать код