Типичные улучшения

Для поиска по тегу начните название тега с символа '@'.

Улучшения, показаны 40 из 40.

Почините битую вёрстку

В верстке есть ошибки. Это может привести к некорректному отображению сайта в нестандартных браузерах или …

Почините битую вёрстку

В верстке есть ошибки. Это может привести к некорректному отображению сайта в нестандартных браузерах или …

Выровняйте элементы контейнера по линии

Подогнать вёрстку под дизайн бывает сложно. Дизайнер в своём макете задаёт положение каждому элементу на …

Добавьте блок в базовый шаблон

В шаблонах не зря используют наследование. С его помощью общую логику, что повторяется на всех …

Укажите img alt

Атрибут `alt` является обязательным для заполнения. Если оставить его пустым, то вёрстка будет некорректной.

Выделите содержимое блочных тегов

Блоки вёрстки внутри тегов `div`, `p` и прочих блочных элементов принято выделять отступами, чтобы визуально …

Сделайте ссылку на чтение книги крупнее

Это самая важная кнопка на сайте и она оказалась совсем незаметной. Присмотритесь к вёрстке и …

Уберите лишние контейнеры

Чем больше в вёрстке кода, тем сложнее разобраться. Чем труднее разбираться, тем меньше желания читать. …

Оберните атрибут тега в кавычки

HTML требует, чтобы содержимое атрибутов было обернуто в кавычки. Так неправильно: ```html ``` Так верно: …

Перевесьте стили с тегов на классы

Не стоит привязывать CSS стили к тегам. Так вы поменяете настройки глобально для всех тегов …

Закодируйте URL

В адресе URL разрешено использовать не так много символов. Пробелы, квадратные скобки, кириллица — все …

Уточните название класса в HTML

Название классов так же важны, как и названия переменных, функций. Именно классы связывают html-теги со …

Не трогайте стили общих компонентов

Некоторые компоненты на странице являются общими. Например, иконки Font-Awesome подключаются всего раз в шапке файла, …

Добавьте в CSS-селекторы поддержку семантики

В HTML5 есть с десяток тегов, похожих на ``: ``, ``, ``, `` и пр. …

Добавьте в парсер поддержку всех относительных адресов

Сайты в интернете — это вещь динамичная, их код постоянно обновляется, даже если внешне это …

Замените обратные слеши в адресе

По недосмотру на Windows часто используют адреса с обратным слешом `\`: ```html ``` По стандарту …

Откажитесь от id в CSS-селекторах

CSS-селекторы, содержащие id тегов теряют свою ключевую способность — их нельзя использовать повторно, ведь двух …

Укажите HTML title

Вы замечали, что у вкладок браузера есть свои названия? Эти надписи подсказывают на каком сайте …

Добавьте favicon

Каждая вкладка браузера имеет своё название и иконку — так она подсказывает на каком сайте …

Отключите неактивные кнопки

Пользователей бесят сломанные кнопки на сайте. Если на странице есть кнопка, то сайт обязан реагировать …

Не вешайте стили на `js-` селекторы

Во фронтенде принято разделять CSS и JS код, чтобы менять их и тестировать независимо друг …

Почините конфликт Vue.js и Django

Пропала текстовка, что располагась между первой картинкой и галереей снизу. ![Скриншот](https://i.imgur.com/eGvUkms.png) Проблема в конфликте между …

Используйте verbatim на весь тег

Вы используете `{% verbatim %}`, но он захватывает какую-то рандомную область в шаблоне. Получается, что …

Используйте livereload cli

Библиотека livereload предоставляет два интерфейса. Есть обычная библиотека, её можно импортировать и вызвать одну из …

Зафиксируйте размеры кнопок

![](https://i.imgur.com/9AyvGj2.png) По клику на кнопку Play сдвигается кнопка справа от неё. Это потому, что ширину …

Почистите HTML от стилей

Инлайн-стили — это крутой способ быстро добавить стиль нужному тегу. Но в мире фронтенда их …

Переименуйте CSS классы в kebab-case

Как и в Python для CSS классов есть свои правила по наименованию. Придерживайтесь их, чтобы …

Соберите js-скрипты в конце HTML

В загрузке js кода в самом начале страницы есть насколько проблем 1. JS-код будет работать, …

Почините UI звука плеера

Если посмотреть на другие плееры, например, на YouTube, то там, когда звук включен -- показывается …

Почините HTML title

Вы замечали, что у вкладок браузера есть свои названия? Эти надписи подсказывают на каком сайте …

Добавьте блок в базовый шаблон

В шаблонах не зря используют наследование. С его помощью общую логику, что повторяется на всех …

Укажите img alt

Атрибут `alt` является обязательным для заполнения. Если оставить его пустым, то вёрстка будет некорректной.

Сделайте ссылку на чтение книги крупнее

Это самая важная кнопка на сайте и она оказалась совсем незаметной. Присмотритесь к вёрстке и …

Уберите лишние контейнеры

Чем больше в вёрстке кода, тем сложнее разобраться. Чем труднее разбираться, тем меньше желания читать. …

Оберните атрибут тега в кавычки

HTML требует, чтобы содержимое атрибутов было обернуто в кавычки. Так неправильно: ```html ``` Так верно: …

Замените поля CharField / TextField

В базе данных `CharField` и `TextField` представлены по-разному. `CharField` — это поле фиксированного размера, в …

Закодируйте URL

В адресе URL разрешено использовать не так много символов. Пробелы, квадратные скобки, кириллица — все …

Уточните название класса в HTML

Название классов так же важны, как и названия переменных, функций. Именно классы связывают html-теги со …

Сделайте деплойный скрипт исполняемым

Программисты будут ожидать от bash-сприпта, что он будет исполняемым и пробовать делать так: ```shell-session ./deploy.sh …

Отцентрируйте пагинатор

Это не какая-то проблема в вёрстке, просто хотел посоветовать поставить пагинатор по центру. Мне кажется, …