diff --git a/app/assets/stylesheets/validator.scss b/app/assets/stylesheets/validator.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9045f81bbb880ad887a6b5c4ec3017d7d693371c
--- /dev/null
+++ b/app/assets/stylesheets/validator.scss
@@ -0,0 +1,47 @@
+//
+// Validator.scss
+// Use CSS colors to help visualize bad HTML
+// --------------------------------------------
+// DO NOT USE IN PRODUCTION
+// --------------------------------------------
+//
+// scss-lint:disable SpaceBeforeBrace
+
+$error-color: red;
+
+
+// Don't forget to include `type` attribute to button
+button:not([type]),
+
+// Don't forget to include `disabled` attribute when .disabled
+button.disabled:not([disabled]),
+
+// Don't forget to include `type` attribute to input
+input:not([type]),
+
+// Don't forget to include `disabled` attribute when .disabled
+input.disabled:not([disabled]),
+
+// Don't forget to include `alt` attribute to image
+img:not([alt]),
+
+// Don't forget to include `href` attribute to anchor
+a:not([href]),
+
+// Don't forget to include `rel=nofollow` attribute to anchor
+// when it has a `download` attribute
+a[download]:not([rel="nofollow"]),
+
+// Don't forget to include `rel="noopener noreferrer nofollow"`
+// attribute to anchor because of security vulnerability
+// https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
+a[target="_blank"]:not([rel~="noopener"]),
+a[target="_blank"]:not([rel~="noreferrer"]),
+a[target="_blank"]:not([rel~="nofollow"]),
+
+// Don't forget to include `aria-hidden` or `aria-label` attribute to <i>
+i.fa:not([aria-hidden]):not([aria-label])
+
+{
+  background-color: $error-color !important;
+}
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index f6d8bb08a646a4c24bc9b8d2aa0261d4b7245fb0..837f827f54696764f11e15d6e1f64655237487d1 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -25,6 +25,9 @@
 
   = favicon_link_tag favicon
 
+  - if Rails.env.development?
+    = stylesheet_link_tag "validator", media: 'all'
+
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"
 
diff --git a/changelogs/unreleased/css-html-validator.yml b/changelogs/unreleased/css-html-validator.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2f3d69a5226a41b90818d99592f0f5a377fdfdf5
--- /dev/null
+++ b/changelogs/unreleased/css-html-validator.yml
@@ -0,0 +1,4 @@
+---
+title: Add html validation using css (development only)
+merge_request: 10571
+author:
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 45a8c1add3e44917cdb1f396015eb86eb74b72e9..3548e58655e352a1d9e08635b9ee1e94202269df 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -33,6 +33,9 @@
   # Raises helpful error messages.
   config.assets.raise_runtime_errors = true
 
+  # Adds CSS that helps highlight invalid HTML during development
+  config.assets.precompile << "validator.css"
+
   # For having correct urls in mails
   config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
   # Open sent mails in browser