Прошу оценить вёрстку [закрыт]

330
04 июля 2022, 11:10
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 1 год назад.

Улучшить вопрос

Прошу вас оценить вёрстку.

Интересует, правильно ли сделан адаптив, что можно улучшить в нём/изменить/добавить... Насколько верно сделана логика блока с тестом(с чистым js работал 1-ый раз, до этого jQuery), можно ли как-то минимизировать, сделать проще и т.д. Если есть замечания по другим частям работы, пишите, в следующий раз буду внимательнее=). Возможно ли с таким уровнем выполнять несложные заказы?/брать на доработку отдельные блоки...

Ссылка на вёрстку

Заранее спасибо!

Answer 1

Несколько замечаний после беглого просмотра:

  1. Вёрстка неадаптивная. В эпоху господства мобильных устройств учитесь сразу верстать под любые размеры экранов. Вообще в идеале использовать принцип mobile first. Посмотрите в сторону фреймворков типа Bootstrap, изучите, как там устроена сетка. Это поможет в принципе понять, как лучше делать раскладку страницы.

  2. Не используйте в разметке устаревшие атрибуты - align, valign и т.д. Они, конечно, будут работать, но в html5 это считается дурным тоном. Применяйте магию css.

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

  4. Применяйте теги html5: header, footer, main, nav, section, aside и т.д. Только сперва изучите, как их грамотно использовать :)

  5. Не забывайте про обязательные атрибуты: например, в img должен быть alt="" (пустой или с каким-то замещающим текстом). Это важно для валидности вёрстки.

  6. Названия классов - дело, во многом, субъективное, но ситуация, когда рядом идут column-1 и column1 - это откровенно плохо. В такой разметке легко запутаться и трудно её поддерживать.

  7. Флексы использовать можно и нужно (хотя уже стоит смотреть в сторону гридов), но следует хорошо изучить их возможности и особенности.

  8. Без сомнения, одни из самых крутых курсов по вёрстке - это htmlacademy (не реклама, если что, просто они реально топчег).

READ ALSO
Не подключается внешний css файл

Не подключается внешний css файл

Пытаюсь начать разрабатывать на nodejs

371
Изменение лого в шапке сайта

Изменение лого в шапке сайта

Есть фиксированная прозрачная шапка, белое лого и менюПри скроле вниз от половины высоты 1 блока, шапка становится белой, а логотип должен...

295
Вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имени

Вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имени

Нужно вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имениПример имени колонок:

457
Что значит "Connect to MySQL from the MySQL command line client"?

Что значит "Connect to MySQL from the MySQL command line client"?

Объясните пожалуйста попроще (только начинаю изучать Docker), что значит "Connect to MySQL from the MySQL command line client" (Подключитесь к MySQL из клиента командной...

468