Оцените качество верстки
Начинающий. html/css изучаю в основном по небольшим пособиям в интернете.
Подскажите пожалуйста:
- что сделано неправильно/что можно улучшить?
- обосновано ли здесь использование flex?
- названия css-классов(подойдет, или нужно давать более точные имена)?
- Хотел подобрать себе курсы по верстке, не порекомендуете ли чего полезного?
ссылка: http://z9103026.beget.tech/Fashion.html
макет Figma: https://www.figma.com/file/CX3cUyJxi64Aeb3nyZCzbs/Fashion-Blog-Template?node-id=0%3A1
Ответы (1 шт):
Несколько замечаний после беглого просмотра:
Вёрстка неадаптивная. В эпоху господства мобильных устройств учитесь сразу верстать под любые размеры экранов. Вообще в идеале использовать принцип mobile first. Посмотрите в сторону фреймворков типа Bootstrap, изучите, как там устроена сетка. Это поможет в принципе понять, как лучше делать раскладку страницы.
Не используйте в разметке устаревшие атрибуты - align, valign и т.д. Они, конечно, будут работать, но в html5 это считается дурным тоном. Применяйте магию css.
Меню в виде таблицы - это не айс. Опять же посмотрите, как делаются менюшки в Бутстрапе. И в принципе таблицы в вёрстке лучше использовать лишь тогда, когда требуется собственно таблица. Для всех остальных случаев есть другие элементы.
Применяйте теги html5: header, footer, main, nav, section, aside и т.д. Только сперва изучите, как их грамотно использовать :)
Не забывайте про обязательные атрибуты: например, в img должен быть alt="" (пустой или с каким-то замещающим текстом). Это важно для валидности вёрстки.
Названия классов - дело, во многом, субъективное, но ситуация, когда рядом идут
column-1иcolumn1- это откровенно плохо. В такой разметке легко запутаться и трудно её поддерживать.Флексы использовать можно и нужно (хотя уже стоит смотреть в сторону гридов), но следует хорошо изучить их возможности и особенности.
Без сомнения, одни из самых крутых курсов по вёрстке - это htmlacademy (не реклама, если что, просто они реально топчег).