代码拉取完成，页面将自动刷新
<!DOCTYPE html><!-- Doctype HTML5 -->
<html class="no-js" lang="en" dir="ltr">
<head><!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109578378-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-109578378-1');
</script>
<script src="https://platform.twitter.com/widgets.js" async></script>
<script src="https://buttons.github.io/buttons.js" async></script>
<script src="https://codefund.io/scripts/993e28c3-31e1-439b-990b-c137d510c920/embed.js?template=horizontal" async></script><!-- Set character encoding for the document -->
<meta charset="utf-8"><!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Document Title -->
<title>The Front-End Checklist - ✨ Your best Front-End Tool ✨
</title><!-- Meta Description -->
<meta name="description" content="🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report!">
<style>
@charset "UTF-8";ul{list-style:none}*,:after,:before{box-sizing:inherit}html{background-color:#ededed;min-width:100%;overflow-x:hidden;overflow-y:scroll;box-sizing:border-box;font-size:62.5%;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}body{color:#212529;font-size:1rem;font-weight:400;line-height:1.5;font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;margin:0}h1,h2{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}h1{margin:0;padding:15px 0 0;font-weight:700;font-size:2.5rem}h2{font-size:2rem}.img-logo{width:85px;height:85px}a{text-decoration:none}a:not(:disabled){background-color:transparent;color:#d75637}p{font-size:1.2rem;line-height:1.5;margin-top:0}.icon{width:18px;height:18px;fill:#b5b5b5;display:inline-block;text-align:center;speak:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:1}button .icon{margin:0 .7rem 0 -.2rem}.page-wrapper{display:grid;grid-template-columns:auto;grid-template-areas:"a" "b" "c"}.page-wrapper .page-header{grid-area:a}.page-wrapper .page-main{grid-area:b}.sub-heading{margin:5px 15px;font-family:Montserrat,sans-serif;color:hsla(0,0%,100%,.6);font-size:1.3rem;line-height:1.5}.s-header{grid-row:1;grid-column-start:2;padding:15px 0;background-color:#415257;background-image:linear-gradient(45deg,#415257,#292e49);color:#fff;font-size:1rem;text-align:center;position:relative}.s-header__media__list{display:flex;align-items:flex-start;justify-content:center;align-self:center;padding:0}.s-header__media__item{margin:0 5px}.s-header__lang__list{display:flex;flex-direction:row;align-items:flex-start;align-self:center;justify-content:center;margin-top:20px}.s-header__lang__item{margin:0 5px}.c-tag-filter{display:flex;align-items:center;justify-content:space-between;align-self:center;flex-flow:row wrap}.c-tag-filter__title{font-size:1.2rem;font-weight:700}.c-tag-filter__list{flex-direction:row;width:100%;margin:0;padding:10px;background-color:#f8f7f6}.c-tag-filter__item{display:inline-block}.c-tag-filter__item button{display:block;text-transform:uppercase;font-size:1.3rem;line-height:1;color:#121212;padding:5px 10px;border:2px solid transparent;background-color:transparent}.s-main{display:grid;grid-column-start:1;position:relative;background-color:#fff;text-align:left;padding:0 10px}.s-main__section{margin:0 0 10px}.s-main__section:first-child{order:2}.s-main__section:nth-child(2),.s-main__section:nth-child(3){order:4}.s-main__meta{display:none}.s-checklist{position:relative;min-height:1px}.s-checklist:after{content:"";position:absolute;height:2px;border-top:1px solid #e4ebf0;bottom:0;width:98%}.s-checklist__inner{display:grid}.s-checklist__header{padding:15px 0;z-index:4}.s-checklist__header__title{margin:0;text-align:left;color:#415257;font-weight:700;text-transform:uppercase;line-height:1.2;font-size:2.5rem}.c-top-alert{display:none}.no-js .c-top-alert--alert{min-height:35px;background:orange;width:100%;text-align:center;font-weight:700;color:#fff;font-size:1.3rem;padding:5px 0}.no-js .c-top-alert--alert p{margin:0}button{-moz-appearance:none;-webkit-appearance:none;align-items:center;border:1px solid transparent;border-radius:3px;box-shadow:none;display:inline-flex;font-size:1.3rem;padding:7px 10px;justify-content:flex-start;line-height:1.4;position:relative;vertical-align:top;-webkit-touch-callout:none;background-color:#fff;border-color:#999;color:#363636;justify-content:center;text-align:center;white-space:nowrap}.c-button-icon{border-color:#b5b5b5}.c-button-icon .icon{margin:0}.c-button__group{margin:0 5px}.github-corner svg{fill:#fff;color:#151513;position:absolute;top:0;border:0;right:0}.github-corner .octo-arm{-webkit-transform-origin:130px 106px;transform-origin:130px 106px}@-webkit-keyframes a{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes a{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}.c-tools{display:flex}.c-tools .c-button__group:first-child{margin-left:0}.c-progress{position:relative;display:flex;padding:10px 0}.c-progress__counter{text-align:center;margin-left:20px}.c-progress__label{font-size:1.3rem;font-weight:600}.c-progress__text{font-size:1.3rem}.c-progress__bar{background-color:#f5f5f5;border:0;height:19px;border-radius:3px;width:120px}.c-progress__bar::-webkit-progress-value{border-radius:2px}.c-progress__bar::-webkit-progress-bar{background-color:#f5f5f5}@media screen and (min-width:500px){h1{font-size:3rem}.img-logo{width:100px;height:100px}.icon{width:15px;height:15px}.sub-heading{font-size:1.5rem;margin:15px}.s-header{padding-top:25px;padding-bottom:60px}.s-header__banner{width:795px;margin:0 auto}.c-tag-filter__title{font-size:1.3rem}.s-main{display:grid;grid-column-start:3;margin-top:-50px;width:100%;padding:10px;border-radius:5px;border:1px solid rgba(0,0,0,.1)}.s-main__section:first-child,.s-main__section:nth-child(2){padding:0 20px}.s-main__meta{display:flex;justify-content:flex-end}.s-checklist{padding:0 10px}.s-checklist__header{display:flex;align-items:center;justify-content:space-between}.s-checklist__title{display:flex;align-items:center;justify-content:center}.s-checklist__header__title{font-size:4rem;margin:0}.c-progress{padding:0;display:block}.c-progress__counter{margin:0}.c-progress__label{position:absolute;top:28%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.c-progress__text{font-size:1.1rem;padding:0 5px}.c-progress__bar{height:20px;margin:0 20px}}@media screen and (min-width:801px){.page-wrapper{grid-template-areas:"a a a" "b b b" "c c c"}.page-wrapper .page-main{display:grid;grid-template-columns:auto 150px 960px 150px auto}.c-tag-filter{display:flex;flex-direction:row}.c-tag-filter__list{display:flex;flex-wrap:wrap}button{font-size:1.25rem;height:34px;padding:5px 9px}}@media (max-width:500px){.github-corner .octo-arm{-webkit-animation:a .56s ease-in-out;animation:a .56s ease-in-out}}
.c-sponsor p { font-size: 20px; text-align: center; }
</style>
<link rel="preload" as="style" href="/styles/main.min.css" onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="/styles/main.min.css">
</noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function j(a){if(e.body)return a();setTimeout(function(){j(a)})}function l(){f.addEventListener&&f.removeEventListener("load",l),f.media=d||"all"}var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",j(function(){g.parentNode.insertBefore(f,c?g:g.nextSibling)});var k=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){k(a)})};return f.addEventListener&&f.addEventListener("load",l),f.onloadcssdefined=k,k(l),f};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(a){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
</script><!-- Recommended favicon format -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><!-- Microsoft Tiles -->
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#2b2b2b">
<meta name="msapplication-TileColor" content="#2b2b2b">
<meta name="msapplication-TileImage" content="/icons/mstile-144x144.png">
<link rel="manifest" href="/manifest.json">
<meta property="og:site_name" content="Front-End Checklist">
<meta property="og:url" content="https://frontendchecklist.io">
<meta property="og:type" content="website">
<meta property="og:title" content="✨ Your best Front-End Tool ✨">
<meta property="og:description" content="🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report!">
<meta property="og:image" content="https://everywhere-8a59.kxcdn.com/img/social/facebook-banner.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The NEW Front-End Checklist - Start, Check, Generate and enjoy!">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@thedaviddias">
<meta name="twitter:creator" content="@thedaviddias">
<meta name="twitter:image" content="https://everywhere-8a59.kxcdn.com/img/social/facebook-banner.jpg">
<script defer data-domain="frontendchecklist.io" src="https://plausible.io/js/script.hash.outbound-links.pageview-props.tagged-events.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<script>/*! modernizr 3.6.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-flexbox-history-webworkers-domprefixes-mq-prefixedcssvalue-prefixes-setclasses-teststyles !*/
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var l in C)if(C.hasOwnProperty(l)){if(e=[],n=C[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)s=e[i],a=s.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),x.push((o?"":"no-")+a.join("-"))}}function i(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(_&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),_?w.className.baseVal=n:w.className=n)}function s(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):_?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function a(){var e=n.body;return e||(e=s(_?"svg":"body"),e.fake=!0),e}function l(e,t,r,o){var i,l,u,f,d="modernizr",c=s("div"),p=a();if(parseInt(r,10))for(;r--;)u=s("div"),u.id=o?o[r]:d+(r+1),c.appendChild(u);return i=s("style"),i.type="text/css",i.id="s"+d,(p.fake?p:c).appendChild(i),p.appendChild(c),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),c.id=d,p.fake&&(p.style.background="",p.style.overflow="hidden",f=w.style.overflow,w.style.overflow="hidden",w.appendChild(p)),l=t(c,e),p.fake?(p.parentNode.removeChild(p),w.style.overflow=f,w.offsetHeight):c.parentNode.removeChild(c),!!l}function u(e,n){return!!~(""+e).indexOf(n)}function f(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(n,t,r){var o;if("getComputedStyle"in e){o=getComputedStyle.call(e,n,t);var i=e.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(i){var s=i.error?"error":"log";i[s].call(i,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!t&&n.currentStyle&&n.currentStyle[r];return o}function c(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(f(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+f(n[o])+":"+r+")");return i=i.join(" or "),l("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==d(e,null,"position")})}return t}function p(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function m(e,n,o,i){function a(){f&&(delete N.style,delete N.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var l=c(e,o);if(!r(l,"undefined"))return l}for(var f,d,m,v,y,h=["modernizr","tspan","samp"];!N.style&&h.length;)f=!0,N.modElem=s(h.shift()),N.style=N.modElem.style;for(m=e.length,d=0;m>d;d++)if(v=e[d],y=N.style[v],u(v,"-")&&(v=p(v)),N.style[v]!==t){if(i||r(o,"undefined"))return a(),"pfx"==n?v:!0;try{N.style[v]=o}catch(g){}if(N.style[v]!=y)return a(),"pfx"==n?v:!0}return a(),!1}function v(e,n){return function(){return e.apply(n,arguments)}}function y(e,n,t){var o;for(var i in e)if(e[i]in n)return t===!1?e[i]:(o=n[e[i]],r(o,"function")?v(o,t||n):o);return!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+k.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?m(a,n,o,i):(a=(e+" "+P.join(s+" ")+s).split(" "),y(a,n,t))}function g(e,n,r){return h(e,t,t,n,r)}var C=[],S={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=S,Modernizr=new Modernizr;var x=[],w=n.documentElement,_="svg"===w.nodeName.toLowerCase(),b="Moz O ms Webkit",P=S._config.usePrefixes?b.toLowerCase().split(" "):[];S._domPrefixes=P;var z=S._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];S._prefixes=z;var E=function(){var n=e.matchMedia||e.msMatchMedia;return n?function(e){var t=n(e);return t&&t.matches||!1}:function(n){var t=!1;return l("@media "+n+" { #modernizr { position: absolute; } }",function(n){t="absolute"==(e.getComputedStyle?e.getComputedStyle(n,null):n.currentStyle).position}),t}}();S.mq=E;var T=function(e,n){var t=!1,r=s("div"),o=r.style;if(e in o){var i=P.length;for(o[e]=n,t=o[e];i--&&!t;)o[e]="-"+P[i]+"-"+n,t=o[e]}return""===t&&(t=!1),t};S.prefixedCSSValue=T;S.testStyles=l;Modernizr.addTest("history",function(){var n=navigator.userAgent;return-1===n.indexOf("Android 2.")&&-1===n.indexOf("Android 4.0")||-1===n.indexOf("Mobile Safari")||-1!==n.indexOf("Chrome")||-1!==n.indexOf("Windows Phone")||"file:"===location.protocol?e.history&&"pushState"in e.history:!1});var k=S._config.usePrefixes?b.split(" "):[];S._cssomPrefixes=k;var A={elem:s("modernizr")};Modernizr._q.push(function(){delete A.elem});var N={style:A.elem.style};Modernizr._q.unshift(function(){delete N.style}),S.testAllProps=h,S.testAllProps=g,Modernizr.addTest("flexbox",g("flexBasis","1px",!0)),Modernizr.addTest("webworkers","Worker"in e),o(),i(x),delete S.addTest,delete S.addAsyncTest;for(var O=0;O<Modernizr._q.length;O++)Modernizr._q[O]();e.Modernizr=Modernizr}(window,document);
</script>
<!-- MailerLite Universal -->
<script>
(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
.push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
(window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
ml('account', '1212535');
</script>
<!-- End MailerLite Universal -->
</head>
<body>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=1824577741189279";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="page-wrapper">
<div class="page-header">
<div class="c-top-alert">
<div class="c-top-alert--alert">
<p>Your JavaScript seems to be desactivated. Please enable your JavaScript to use all functionnalities of the Front-End Checklist.</p>
</div>
</div>
<header class="s-header">
<div class="c-github-corner"><a class="github-corner" href="https://github.com/thedaviddias/Front-End-Checklist" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>
<path class="octo-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
</svg></a></div>
<div class="s-header__banner">
<div class="text-center">
<picture>
<source srcset="/img/logos/logo-front-end-checklist.jpg" type="image/jpeg"><img class="img-logo" src="/img/logos/logo-front-end-checklist.jpg" alt="Front-End Checklist Logo" width="100" height="100">
</picture>
<h1 class="font-weight-bold">The Front-End Checklist</h1>
<p class="sub-heading">🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers!</p>
</div>
</div>
<div class="s-header__media">
<ul class="s-header__media__list">
<li class="s-header__media__item">
<div class="fb-like" data-href="https://frontendchecklist.io" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
</li>
<li class="s-header__media__item"><a class="twitter-share-button" href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-text="Check the ✨ Front-End Checklist Application ✨ for modern websites and meticulous developers! With more than 69k 🌟 on #Github, now you can use it on your daily workflow and generate reports 📑!" data-via="thedaviddias" data-hashtags="FrontEndChecklist #FrontEnd #Tool #Web" data-show-count="false">Tweet</a></li>
<li class="s-header__media__item"><a class="github-button" href="https://github.com/thedaviddias/Front-End-Checklist" data-icon="octicon-star" data-show-count="true" aria-label="Star thedaviddias/Front-End-Checklist on GitHub">Star</a></li>
</ul>
</div>
</header>
</div>
<div class="page-main">
<main class="s-main" id="js-main">
<div class="s-main__section s-main__meta">
<div class="c-sponsor">
<p>Dev-friendly UX patterns you wish you knew. 👉 <a href="https://uxpatterns.dev">UX Patterns for Devs</a></p>
</div>
</div>
<div class="s-main__section s-main__filter">
<aside class="c-tag-filter">
<h2 class="c-tag-filter__title">Filter by tags</h2>
<ul class="c-tag-filter__list">
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+All+Tag" data-tag="all">All</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Best+Practices+Tag" data-tag="best-practices">Best practices</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Seo+Tag" data-tag="seo">Seo</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Testing+Tag" data-tag="testing">Testing</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Css+Tag" data-tag="css">Css</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Javascript+Tag" data-tag="javascript">Javascript</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Performance+Tag" data-tag="performance">Performance</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Meta-tag+Tag" data-tag="Meta-tag">Meta tag</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+HTML-tag+Tag" data-tag="HTML-tag">HTML tag</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+CSS+Tag" data-tag="CSS">CSS</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Performance+Tag" data-tag="Performance">Performance</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Social-meta+Tag" data-tag="Social-meta">Social meta</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+html+Tag" data-tag="html">Html</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Security+Tag" data-tag="security">Security</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Images+Tag" data-tag="images">Images</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Requests+Tag" data-tag="requests">Requests</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Accessibility+Tag" data-tag="accessibility">Accessibility</button>
</li>
<li class="c-tag-filter__item">
<button class="js-filter-tag plausible-event-name=Button+Click+Webfont+Tag" data-tag="webfont">Webfont</button>
</li>
</ul>
</aside>
</div>
<div class="s-main__section s-main__checklist">
<section class="s-checklist js-section s-checklist__head" data-section="head" data-section-id="0" id="section-head">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">Head</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> Head items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<p class="c-checklist__intro"></p>
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all meta-tag " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-0" id="c-checklist__item-head-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-0"><span class="label__title">Doctype: </span><span class="label__description">The Doctype is HTML5 and is at the top of all your HTML pages.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/bccee9f4dfa728830cf38bb83838d2d3.js"></div>
</div>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding" alt=""/><a href="https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding" target="_blank" rel="noopener noreferrer">Determining the character encoding - HTML5 W3C</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="high" data-item-id="1" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-1" id="c-checklist__item-head-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-1"><span class="label__title">Charset: </span><span class="label__description">The charset declared (UTF-8) is declared correctly.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/7074c2b93faf1ad1f0c2792258a9b060.js"></div>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="high" data-item-id="2" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-2" id="c-checklist__item-head-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-2"><span class="label__title">Viewport: </span><span class="label__description">The viewport is declared correctly.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/0e25ffd442512c79af684b5042366a3c.js"></div>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="high" data-item-id="3" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-3" id="c-checklist__item-head-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-3"><span class="label__title">Title: </span><span class="label__description">A title is used on all pages</span></label>
<div class="c-checklist__details js-details">
<p class="c-checklist__text">SEO: Google calculates the pixel width of the characters used in the title and cuts off between 472 and 482 pixels. Average character limit would be around 55 characters</p>
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/65d0df3b6e2ebcb0d3c738b40f6ff313.js"></div>
</div>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title" alt=""/><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title" target="_blank" rel="noopener noreferrer">Title - HTML - MDN</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.sistrix.com/serp-snippet-generator/" alt=""/><a href="https://www.sistrix.com/serp-snippet-generator/" target="_blank" rel="noopener noreferrer">SERP Snippet Generator</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="high" data-item-id="4" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-4" id="c-checklist__item-head-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-4"><span class="label__title">Description: </span><span class="label__description">A meta description is provided, it is unique and doesn't possess more than 150 characters.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/8f3c61ed6cf08b75524d977828337c62.js"></div>
</div>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_an_author_and_description" alt=""/><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_an_author_and_description" target="_blank" rel="noopener noreferrer">Meta Description - HTML - MDN</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="medium" data-item-id="5" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-5" id="c-checklist__item-head-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-5"><span class="label__title">Favicons: </span><span class="label__description">Each favicon has been created and displays correctly.</span></label>
<div class="c-checklist__details js-details">
<p class="c-checklist__text">If you have only a favicon.ico, put it at the root of your site. Normally you won't need to use any markup. However, it's still good practice to link to it using the example below. Today, PNG format is recommended over .ico format (dimensions: 32x32px).</p>
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/dd4e98c10283d310d24f22dfc49f1aaf.js"></div>
</div>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://github.com/audreyr/favicon-cheat-sheet" alt=""/><a href="https://github.com/audreyr/favicon-cheat-sheet" target="_blank" rel="noopener noreferrer">Favicon Cheat Sheet</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://css-tricks.com/favicon-quiz/" alt=""/><a href="https://css-tricks.com/favicon-quiz/" target="_blank" rel="noopener noreferrer">Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://caniuse.com/#feat=link-icon-png" alt=""/><a href="https://caniuse.com/#feat=link-icon-png" target="_blank" rel="noopener noreferrer">PNG favicons - caniuse</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.favicon-generator.org/" alt=""/><a href="https://www.favicon-generator.org/" target="_blank" rel="noopener noreferrer">Favicon Generator</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://realfavicongenerator.net/" alt=""/><a href="https://realfavicongenerator.net/" target="_blank" rel="noopener noreferrer">RealFaviconGenerator</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="low" data-item-id="6" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-6" id="c-checklist__item-head-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-6"><span class="label__title">Apple Web App Meta: </span><span class="label__description">Apple meta-tags are present.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/4fbbc4c83cd76ebd0d2f18cc1b40f1a9.js"></div>
</div>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html" alt=""/><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html" target="_blank" rel="noopener noreferrer">Configuring Web Applications</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html" alt=""/><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html" target="_blank" rel="noopener noreferrer">Supported Meta Tags</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="low" data-item-id="7" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-7" id="c-checklist__item-head-7"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-7"><span class="label__title">Windows Tiles: </span><span class="label__description">Windows tiles are present and linked.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/4cc20da1a32d201f8dd46edf47d7fb73.js"></div>
</div>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx" alt=""/><a href="https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx" target="_blank" rel="noopener noreferrer">Browser configuration schema reference</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all meta-tag " data-item-priority="medium" data-item-id="8" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-8" id="c-checklist__item-head-8"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-8"><span class="label__title">Canonical: </span><span class="label__description">Use rel="canonical" to avoid duplicate content.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/832a59506fd93e84d62dce0238b0cb23.js"></div>
</div>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://support.google.com/webmasters/answer/139066?hl=en" alt=""/><a href="https://support.google.com/webmasters/answer/139066?hl=en" target="_blank" rel="noopener noreferrer">Use canonical URLs - Search Console Help - Google Support</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html" alt=""/><a href="https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html" target="_blank" rel="noopener noreferrer">5 common mistakes with rel=canonical - Google Webmaster Blog</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">META TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html-tag " data-item-priority="high" data-item-id="9" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-9" id="c-checklist__item-head-9"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-9"><span class="label__title">Language attribute: </span><span class="label__description">The <code>lang</code> attribute of your website is specified and related to the language of the current page.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html-tag " data-item-priority="medium" data-item-id="10" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-10" id="c-checklist__item-head-10"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-10"><span class="label__title">Direction attribute: </span><span class="label__description">The direction of lecture is specified on the html tag (It can be used on another HTML tag).</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html-tag " data-item-priority="low" data-item-id="11" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-11" id="c-checklist__item-head-11"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-11"><span class="label__title">Alternate language: </span><span class="label__description">The language tag of your website is specified and related to the language of the current page.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html-tag " data-item-priority="low" data-item-id="12" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-12" id="c-checklist__item-head-12"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-12"><span class="label__title">Conditional comments: </span><span class="label__description">Conditional comments are present for IE if needed.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx" alt=""/><a href="https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx" target="_blank" rel="noopener noreferrer">About conditional comments (Internet Explorer) - MSDN - Microsoft</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html-tag " data-item-priority="low" data-item-id="13" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-13" id="c-checklist__item-head-13"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-13"><span class="label__title">RSS feed: </span><span class="label__description">If your project is a blog or has articles, an RSS link was provided.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html-tag css performance " data-item-priority="medium" data-item-id="14" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-14" id="c-checklist__item-head-14"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-14"><span class="label__title">Inline critical CSS: </span><span class="label__description">The inline critical CSS is correctly injected in the HEAD.</span></label>
<div class="c-checklist__details js-details">
<p class="c-checklist__text">The CSS critical (or above the fold) collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between `<style></style>` in a single line (minified).</p>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://github.com/addyosmani/critical" alt=""/><a href="https://github.com/addyosmani/critical" target="_blank" rel="noopener noreferrer">Critical by Addy Osmani on GitHub automates this.</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML TAG</li>
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html-tag " data-item-priority="high" data-item-id="15" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-15" id="c-checklist__item-head-15"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-15"><span class="label__title">CSS order: </span><span class="label__description">All CSS files are loaded before any JavaScript files in the HEAD</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML TAG</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all social-meta testing " data-item-priority="low" data-item-id="16" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-16" id="c-checklist__item-head-16"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-16"><span class="label__title">Facebook Open Graph: </span><span class="label__description"></span></label>
<div class="c-checklist__details js-details">
<p class="c-checklist__text">All Facebook Open Graph (OG) are tested and no one is missing or with a false information. Images need to be at least 600 x 315 pixels, although 1200 x 630 pixels is recommended. Using og:image:width and og:image:height will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.</p>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.facebook.com/docs/sharing/webmasters/" alt=""/><a href="https://developers.facebook.com/docs/sharing/webmasters/" target="_blank" rel="noopener noreferrer">A Guide to Sharing for Webmasters</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.facebook.com/docs/sharing/best-practices/" alt=""/><a href="https://developers.facebook.com/docs/sharing/best-practices/" target="_blank" rel="noopener noreferrer">Best Practices - Sharing</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.facebook.com/tools/debug/" alt=""/><a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="noopener noreferrer">Test your page with the Facebook OG testing</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SOCIAL META</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all social-meta testing " data-item-priority="low" data-item-id="17" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-head-17" id="c-checklist__item-head-17"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-head-17"><span class="label__title">Twitter Card: </span><span class="label__description"></span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started" alt=""/><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started" target="_blank" rel="noopener noreferrer">Getting started with cards — Twitter Developers</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://cards-dev.twitter.com/validator" alt=""/><a href="https://cards-dev.twitter.com/validator" target="_blank" rel="noopener noreferrer">Test your page with the Twitter card validator</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SOCIAL META</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__html" data-section="html" data-section-id="1" id="section-html">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">HTML</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> HTML items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<p class="c-checklist__intro"></p>
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all html best-practices " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-0" id="c-checklist__item-html-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-0"><span class="label__title">HTML5 Semantic Elements: </span><span class="label__description">HTML5 Semantic Elements are used appropriately (header, section, footer, main...).</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://htmlreference.io/" alt=""/><a href="http://htmlreference.io/" target="_blank" rel="noopener noreferrer">HTML Reference</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html best-practices " data-item-priority="high" data-item-id="1" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-1" id="c-checklist__item-html-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-1"><span class="label__title">Error pages: </span><span class="label__description">Error 404 page and 5xx exist</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html best-practices security " data-item-priority="medium" data-item-id="2" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-2" id="c-checklist__item-html-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-2"><span class="label__title">Noopener: </span><span class="label__description">In case you are using external links with target="_blank", your link should have a rel="noopener" attribute to prevent tab nabbing. If you need to support older versions of Firefox, use rel="noopener noreferrer"</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://mathiasbynens.github.io/rel-noopener/" alt=""/><a href="https://mathiasbynens.github.io/rel-noopener/" target="_blank" rel="noopener noreferrer">About rel=noopener</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">BEST PRACTICES</li>
<li class="c-tags__item">SECURITY</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html best-practices " data-item-priority="low" data-item-id="3" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-3" id="c-checklist__item-html-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-3"><span class="label__title">Clean up comments: </span><span class="label__description">Unnecessary code needs to be removed before sending the page to production.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html testing " data-item-priority="high" data-item-id="4" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-4" id="c-checklist__item-html-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-4"><span class="label__title">W3C compliant: </span><span class="label__description">All pages need to be tested with the W3C validator to identify possible issues in the HTML code.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://validator.w3.org/" alt=""/><a href="https://validator.w3.org/" target="_blank" rel="noopener noreferrer">W3C validator</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html testing " data-item-priority="high" data-item-id="5" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-5" id="c-checklist__item-html-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-5"><span class="label__title">HTML Lint: </span><span class="label__description">I use tools to help me analyze any issues I could have on my HTML code.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://dirtymarkup.com/" alt=""/><a href="https://dirtymarkup.com/" target="_blank" rel="noopener noreferrer">Dirty markup</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://webhint.io/" alt=""/><a href="https://webhint.io/" target="_blank" rel="noopener noreferrer">webhint</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html testing " data-item-priority="high" data-item-id="6" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-6" id="c-checklist__item-html-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-6"><span class="label__title">Link checker: </span><span class="label__description">There are no broken links in my page, verify that you don't have any 404 error.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://validator.w3.org/checklink" alt=""/><a href="https://validator.w3.org/checklink" target="_blank" rel="noopener noreferrer">W3C Link Checker</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html testing " data-item-priority="medium" data-item-id="7" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-html-7" id="c-checklist__item-html-7"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-html-7"><span class="label__title">Adblockers test: </span><span class="label__description">Your website shows your content correctly with adblockers enabled</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__webfonts" data-section="webfonts" data-section-id="2" id="section-webfonts">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">Webfonts</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> Webfonts items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all webfont " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-webfonts-0" id="c-checklist__item-webfonts-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-webfonts-0"><span class="label__title">Webfont format: </span><span class="label__description">WOFF, WOFF2 and TTF are supported by all modern browsers.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://caniuse.com/#feat=woff" alt=""/><a href="https://caniuse.com/#feat=woff" target="_blank" rel="noopener noreferrer">WOFF - Web Open Font Format - Caniuse</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://caniuse.com/#feat=woff2" alt=""/><a href="https://caniuse.com/#feat=woff2" target="_blank" rel="noopener noreferrer">WOFF 2.0 - Web Open Font Format - Caniuse</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://caniuse.com/#feat=ttf" alt=""/><a href="https://caniuse.com/#feat=ttf" target="_blank" rel="noopener noreferrer">TTF/OTF - TrueType and OpenType font support</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://css-tricks.com/snippets/css/using-font-face/" alt=""/><a href="https://css-tricks.com/snippets/css/using-font-face/" target="_blank" rel="noopener noreferrer">Using @font-face - CSS-Tricks</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">WEBFONT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all webfont " data-item-priority="high" data-item-id="1" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-webfonts-1" id="c-checklist__item-webfonts-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-webfonts-1"><span class="label__title">Webfont size: </span><span class="label__description">Webfont sizes don't exceed 100 KB (all variants included).</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">WEBFONT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all webfont " data-item-priority="low" data-item-id="2" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-webfonts-2" id="c-checklist__item-webfonts-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-webfonts-2"><span class="label__title">Webfont loader: </span><span class="label__description">Control loading behavior with a webfont loader.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://github.com/typekit/webfontloader" alt=""/><a href="https://github.com/typekit/webfontloader" target="_blank" rel="noopener noreferrer">Typekit Web Font Loader</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">WEBFONT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__css" data-section="css" data-section-id="3" id="section-css">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">CSS</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> CSS items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all css " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-0" id="c-checklist__item-css-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-0"><span class="label__title">Responsive Web Design: </span><span class="label__description">The website is using responsive web design.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css " data-item-priority="medium" data-item-id="1" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-1" id="c-checklist__item-css-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-1"><span class="label__title">CSS Print: </span><span class="label__description">A print stylesheet is provided and is correct on each page.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css " data-item-priority="high" data-item-id="2" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-2" id="c-checklist__item-css-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-2"><span class="label__title">Unique ID: </span><span class="label__description">If IDs are used, they are unique to a page.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css " data-item-priority="high" data-item-id="3" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-3" id="c-checklist__item-css-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-3"><span class="label__title">Reset CSS: </span><span class="label__description">A CSS reset (reset, normalize or reboot) is used and up to date.</span></label>
<div class="c-checklist__details js-details">
<p class="c-checklist__text">(If you are using a CSS Framework like Bootstrap or Foundation, a Normalize is already included into it.)</p>
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://meyerweb.com/eric/tools/css/reset/" alt=""/><a href="https://meyerweb.com/eric/tools/css/reset/" target="_blank" rel="noopener noreferrer">Reset.css</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://necolas.github.io/normalize.css/" alt=""/><a href="https://necolas.github.io/normalize.css/" target="_blank" rel="noopener noreferrer">Normalize.css</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://getbootstrap.com/docs/4.0/content/reboot/" alt=""/><a href="https://getbootstrap.com/docs/4.0/content/reboot/" target="_blank" rel="noopener noreferrer">Reboot</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript best-practices " data-item-priority="low" data-item-id="4" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-4" id="c-checklist__item-css-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-4"><span class="label__title">JS prefix: </span><span class="label__description">All classes (or id- used in JavaScript files) begin with js- and are not styled into the CSS files.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css " data-item-priority="high" data-item-id="5" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-5" id="c-checklist__item-css-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-5"><span class="label__title">Embedded or inline CSS: </span><span class="label__description">Avoid at all cost embeding CSS in <style> tags or using inline CSS</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css " data-item-priority="high" data-item-id="6" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-6" id="c-checklist__item-css-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-6"><span class="label__title">Vendor prefixes: </span><span class="label__description">CSS vendor prefixes are used and are generated accordingly with your browser support compatibility.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://autoprefixer.github.io/" alt=""/><a href="https://autoprefixer.github.io/" target="_blank" rel="noopener noreferrer">Autoprefixer CSS online</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css performance " data-item-priority="high" data-item-id="7" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-7" id="c-checklist__item-css-7"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-7"><span class="label__title">Concatenation: </span><span class="label__description">CSS files are concatenated in a single file (Not for HTTP/2).</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css performance " data-item-priority="high" data-item-id="8" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-8" id="c-checklist__item-css-8"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-8"><span class="label__title">Minification: </span><span class="label__description">All CSS files are minified.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css performance " data-item-priority="medium" data-item-id="9" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-9" id="c-checklist__item-css-9"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-9"><span class="label__title">Non-blocking: </span><span class="label__description">CSS files need to be non-blocking to prevent the DOM from taking time to load.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://github.com/filamentgroup/loadCSS" alt=""/><a href="https://github.com/filamentgroup/loadCSS" target="_blank" rel="noopener noreferrer">loadCSS by filament group</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf" alt=""/><a href="https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf" target="_blank" rel="noopener noreferrer">Example of preload CSS using loadCSS</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css testing " data-item-priority="high" data-item-id="10" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-10" id="c-checklist__item-css-10"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-10"><span class="label__title">Stylelint: </span><span class="label__description">All CSS or SCSS files are without any errors.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://sass-guidelin.es/" alt=""/><a href="https://sass-guidelin.es/" target="_blank" rel="noopener noreferrer">Sass guidelines</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://stylelint.io/" alt=""/><a href="https://stylelint.io/" target="_blank" rel="noopener noreferrer">stylelint, a CSS linter</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css testing " data-item-priority="high" data-item-id="11" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-11" id="c-checklist__item-css-11"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-11"><span class="label__title">Responsive web design: </span><span class="label__description">All pages were tested with the correct breakpoints.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css testing " data-item-priority="medium" data-item-id="12" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-12" id="c-checklist__item-css-12"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-12"><span class="label__title">CSS Validator: </span><span class="label__description">The CSS was tested and pertinent errors were corrected.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://jigsaw.w3.org/css-validator/" alt=""/><a href="https://jigsaw.w3.org/css-validator/" target="_blank" rel="noopener noreferrer">CSS Validator</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css testing " data-item-priority="high" data-item-id="13" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-13" id="c-checklist__item-css-13"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-13"><span class="label__title">Desktop Browsers: </span><span class="label__description">All pages were tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, EDGE...)</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css testing " data-item-priority="high" data-item-id="14" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-14" id="c-checklist__item-css-14"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-14"><span class="label__title">Mobile Browsers: </span><span class="label__description">All pages were tested on all current mobile browsers (Native browser, Chrome, Safari...)</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css testing " data-item-priority="high" data-item-id="15" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-15" id="c-checklist__item-css-15"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-15"><span class="label__title">OS: </span><span class="label__description">All pages were tested on all current OS (Windows, Android, iOS, Mac...)</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all css testing " data-item-priority="high" data-item-id="16" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-css-16" id="c-checklist__item-css-16"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-css-16"><span class="label__title">Reading direction: </span><span class="label__description">All pages need to be tested for LTR and RTL languages if they need to be supported.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/" alt=""/><a href="https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/" target="_blank" rel="noopener noreferrer">Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-2/" alt=""/><a href="https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-2/" target="_blank" rel="noopener noreferrer">Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">CSS</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__javascript" data-section="javascript" data-section-id="4" id="section-javascript">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">JavaScript</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> JavaScript items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all javascript " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-0" id="c-checklist__item-javascript-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-0"><span class="label__title">JavaScript Inline: </span><span class="label__description">You don't have any JavaScript code inline (mixed with your HTML code).</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript " data-item-priority="high" data-item-id="1" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-1" id="c-checklist__item-javascript-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-1"><span class="label__title">Concatenation: </span><span class="label__description">JavaScript files are concatenated.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript " data-item-priority="high" data-item-id="2" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-2" id="c-checklist__item-javascript-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-2"><span class="label__title">Minification: </span><span class="label__description">JavaScript files are minified (you can add the .min suffix).</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.google.com/speed/docs/insights/MinifyResources" alt=""/><a href="https://developers.google.com/speed/docs/insights/MinifyResources" target="_blank" rel="noopener noreferrer">Minify Resources (HTML, CSS, and JavaScript)</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript security " data-item-priority="high" data-item-id="3" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-3" id="c-checklist__item-javascript-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-3"><span class="label__title">JavaScript security: </span><span class="label__description"></span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript" alt=""/><a href="https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript" target="_blank" rel="noopener noreferrer">Guidelines for Developing Secure Applications Utilizing JavaScript</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
<li class="c-tags__item">SECURITY</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript " data-item-priority="medium" data-item-id="4" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-4" id="c-checklist__item-javascript-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-4"><span class="label__title">noscript tag: </span><span class="label__description">Use `<noscript>` tag in the HTML body if a script type on the page is unsupported or if scripting is currently turned off in the browser. This will be helpful in client-side rendering heavy apps such as React.js.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-noscript-element--cms-25498" alt=""/><a href="https://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-noscript-element--cms-25498" target="_blank" rel="noopener noreferrer">Quick Tip: Don’t Forget the “noscript” Element</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript performance " data-item-priority="medium" data-item-id="5" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-5" id="c-checklist__item-javascript-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-5"><span class="label__title">Non-blocking: </span><span class="label__description">JavaScript files are loaded asynchronously using async or deferred using defer attribute.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.google.com/speed/docs/insights/BlockingJS" alt=""/><a href="https://developers.google.com/speed/docs/insights/BlockingJS" target="_blank" rel="noopener noreferrer">Remove Render-Blocking JavaScript</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript " data-item-priority="low" data-item-id="6" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-6" id="c-checklist__item-javascript-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-6"><span class="label__title">Modernizr: </span><span class="label__description">If you need to target some specific features you can use a custom Modernizr to add classes in your <html> tag.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://modernizr.com/download?setclasses" alt=""/><a href="https://modernizr.com/download?setclasses" target="_blank" rel="noopener noreferrer">Customize your Modernizr</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all javascript testing " data-item-priority="high" data-item-id="7" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-javascript-7" id="c-checklist__item-javascript-7"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-javascript-7"><span class="label__title">ESLint: </span><span class="label__description">No errors are flagged by ESLint (based on your configuration or standards rules).</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://eslint.org/" alt=""/><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint - The pluggable linting utility for JavaScript and JSX</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">JAVASCRIPT</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__images" data-section="images" data-section-id="5" id="section-images">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">Images</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> Images items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all images best-practices " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-images-0" id="c-checklist__item-images-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-images-0"><span class="label__title">Optimization: </span><span class="label__description">All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage)</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://github.com/imagemin/imagemin" alt=""/><a href="https://github.com/imagemin/imagemin" target="_blank" rel="noopener noreferrer">Imagemin</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://imageoptim.com/" alt=""/><a href="https://imageoptim.com/" target="_blank" rel="noopener noreferrer">Use ImageOptim to optimise your images for free.</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://kraken.io/web-interface" alt=""/><a href="https://kraken.io/web-interface" target="_blank" rel="noopener noreferrer">Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">IMAGES</li>
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all images " data-item-priority="medium" data-item-id="1" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-images-1" id="c-checklist__item-images-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-images-1"><span class="label__title">Picture/Srcset: </span><span class="label__description">You use picture/srcset to provide the most appropriate image for the current viewport of the user.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/" alt=""/><a href="https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/" target="_blank" rel="noopener noreferrer">How to Build Responsive Images with srcset</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">IMAGES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all images " data-item-priority="low" data-item-id="2" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-images-2" id="c-checklist__item-images-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-images-2"><span class="label__title">Retina: </span><span class="label__description">You provide layout images 2x or 3x, support retina display.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">IMAGES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all images " data-item-priority="medium" data-item-id="3" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-images-3" id="c-checklist__item-images-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-images-3"><span class="label__title">Sprite: </span><span class="label__description">Small images are in a sprite file (in the case of icons, they can be in an SVG sprite image).</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">IMAGES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all images " data-item-priority="high" data-item-id="4" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-images-4" id="c-checklist__item-images-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-images-4"><span class="label__title">Width and Height: </span><span class="label__description">Set width and height attributes on <img> if the final rendered image size is known (can be omitted for CSS sizing).</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">IMAGES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all images " data-item-priority="high" data-item-id="5" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-images-5" id="c-checklist__item-images-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-images-5"><span class="label__title">Alternative text: </span><span class="label__description">All <img> have an alternative text which describe the image visually.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://axesslab.com/alt-texts/" alt=""/><a href="https://axesslab.com/alt-texts/" target="_blank" rel="noopener noreferrer">Alt-texts: The Ultimate Guide</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">IMAGES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all images performance " data-item-priority="medium" data-item-id="6" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-images-6" id="c-checklist__item-images-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-images-6"><span class="label__title">Lazy loading: </span><span class="label__description">Images are lazyloaded (A noscript fallback is always provided).</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">IMAGES</li>
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__accessibility" data-section="accessibility" data-section-id="6" id="section-accessibility">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">Accessibility</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> Accessibility items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all best-practices " data-item-priority="medium" data-item-id="0" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-0" id="c-checklist__item-accessibility-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-0"><span class="label__title">Progressive enhancement: </span><span class="label__description">Major functionality like main navigation and search should work without JavaScript enabled.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.youtube.com/watch?v=kBmvq2cE0D8" alt=""/><a href="https://www.youtube.com/watch?v=kBmvq2cE0D8" target="_blank" rel="noopener noreferrer">Enable / Disable JavaScript in Chrome Developer Tools</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all best-practices " data-item-priority="medium" data-item-id="1" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-1" id="c-checklist__item-accessibility-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-1"><span class="label__title">Color contrast: </span><span class="label__description">Color contrast should at least pass WCAG AA (AAA for mobile).</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://leaverou.github.io/contrast-ratio/" alt=""/><a href="https://leaverou.github.io/contrast-ratio/" target="_blank" rel="noopener noreferrer">Contrast Ratio</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all best-practices seo " data-item-priority="high" data-item-id="2" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-2" id="c-checklist__item-accessibility-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-2"><span class="label__title">H1: </span><span class="label__description">All pages have an H1 which is not the title of the website.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">BEST PRACTICES</li>
<li class="c-tags__item">SEO</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all best-practices " data-item-priority="high" data-item-id="3" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-3" id="c-checklist__item-accessibility-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-3"><span class="label__title">Headings: </span><span class="label__description">Headings should be used properly and in the right order (H1 to H6).</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__video">
<h4>Videos</h4>
<ul class="video__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.youtube.com/watch?v=vAAzdi1xuUY&index=9&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g" alt=""/><a href="https://www.youtube.com/watch?v=vAAzdi1xuUY&index=9&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g" target="_blank" rel="noopener noreferrer">Why headings and landmarks are so important -- A11ycasts #18</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all " data-item-priority="medium" data-item-id="4" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-4" id="c-checklist__item-accessibility-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-4"><span class="label__title">Specific HTML5 input types are used: </span><span class="label__description">This is especially important for mobile devices that show customized keypads and widgets for different types.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://mobileinputtypes.com/" alt=""/><a href="http://mobileinputtypes.com/" target="_blank" rel="noopener noreferrer">Mobile Input Types</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all " data-item-priority="high" data-item-id="5" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-5" id="c-checklist__item-accessibility-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-5"><span class="label__title">Label: </span><span class="label__description">A label is associated with each input form element. In case a label can't be displayed, use aria-label instead.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" alt=""/><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" target="_blank" rel="noopener noreferrer">Using the aria-label attribute - MDN</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all testing " data-item-priority="high" data-item-id="6" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-6" id="c-checklist__item-accessibility-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-6"><span class="label__title">Accessibility standards testing: </span><span class="label__description">Use the WAVE tool to test if your page respects the accessibility standards.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://wave.webaim.org/" alt=""/><a href="http://wave.webaim.org/" target="_blank" rel="noopener noreferrer">Wave testing</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all testing " data-item-priority="high" data-item-id="7" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-7" id="c-checklist__item-accessibility-7"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-7"><span class="label__title">Keyboard navigation: </span><span class="label__description">Test your website using only your keyboard in a previsible order. All interactive elements are reachable and usable.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all testing " data-item-priority="medium" data-item-id="8" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-8" id="c-checklist__item-accessibility-8"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-8"><span class="label__title">Screen reader: </span><span class="label__description">All pages were tested in two or more screen readers (such as JAWS, VoiceOver, and NVDA).</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://webaim.org/projects/screenreadersurvey7/#primary" alt=""/><a href="https://webaim.org/projects/screenreadersurvey7/#primary" target="_blank" rel="noopener noreferrer">Screen Reader User Survey #7 Results - Primary Screen Reader</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all testing " data-item-priority="high" data-item-id="9" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-accessibility-9" id="c-checklist__item-accessibility-9"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-accessibility-9"><span class="label__title">Focus style: </span><span class="label__description">If the focus is disabled, it is replaced by visible state in CSS.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__video">
<h4>Videos</h4>
<ul class="video__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.youtube.com/watch?v=srLRSQg6Jgg&index=5&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g" alt=""/><a href="https://www.youtube.com/watch?v=srLRSQg6Jgg&index=5&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g" target="_blank" rel="noopener noreferrer">Managing Focus - A11ycasts #22</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__performance" data-section="performance" data-section-id="7" id="section-performance">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">Performance</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> Performance items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all performance " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-0" id="c-checklist__item-performance-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-0"><span class="label__title">Page weight: </span><span class="label__description">The weight of each page is between 0 and 500 KB.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://evilmartians.com/chronicles/size-limit-make-the-web-lighter" alt=""/><a href="https://evilmartians.com/chronicles/size-limit-make-the-web-lighter" target="_blank" rel="noopener noreferrer">Size Limit: Make the Web lighter</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://tools.pingdom.com/" alt=""/><a href="https://tools.pingdom.com/" target="_blank" rel="noopener noreferrer">Website Page Analysis</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all html performance " data-item-priority="medium" data-item-id="1" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-1" id="c-checklist__item-performance-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-1"><span class="label__title">Minified HTML: </span><span class="label__description">Your HTML is minified.</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">HTML</li>
<li class="c-tags__item">PERFORMANCE</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all best-practices " data-item-priority="medium" data-item-id="2" data-item-check="false" data-item-dropdown="false" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-2" id="c-checklist__item-performance-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-2"><span class="label__title">Lazy loading: </span><span class="label__description">Images, scripts and CSS need to be lazy loaded to improve the response time of the current page (See details in their respective sections)</span></label>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all best-practices " data-item-priority="medium" data-item-id="3" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-3" id="c-checklist__item-performance-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-3"><span class="label__title">Cookie size: </span><span class="label__description">If you are using cookies be sure each cookie doesn't exceed 4096 bytes and your domain name doesn't have more than 20 cookies.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://tools.ietf.org/html/rfc6265" alt=""/><a href="https://tools.ietf.org/html/rfc6265" target="_blank" rel="noopener noreferrer">Cookie specification: RFC 6265</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies" alt=""/><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies" target="_blank" rel="noopener noreferrer">Cookies</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://browsercookielimits.squawky.net/" alt=""/><a href="http://browsercookielimits.squawky.net/" target="_blank" rel="noopener noreferrer">Browser Cookie Limits</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all best-practices " data-item-priority="medium" data-item-id="4" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-4" id="c-checklist__item-performance-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-4"><span class="label__title">Third party components: </span><span class="label__description"></span></label>
<div class="c-checklist__details js-details">
<p class="c-checklist__text">Third party iframes or components relying on external JS (like sharing buttons) are replaced by static components when possible, thus limiting calls to external APIs and keeping your users activity private.</p>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://simplesharingbuttons.com/" alt=""/><a href="https://simplesharingbuttons.com/" target="_blank" rel="noopener noreferrer">Simple sharing buttons generator</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">BEST PRACTICES</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all requests " data-item-priority="low" data-item-id="5" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-5" id="c-checklist__item-performance-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-5"><span class="label__title">DNS resolution: </span><span class="label__description">DNS of third-party services that may be needed are resolved in advance during idle time using dns-prefetch.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/e58e7302c032f8145ca80f302934c895.js"></div>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">REQUESTS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all requests " data-item-priority="low" data-item-id="6" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-6" id="c-checklist__item-performance-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-6"><span class="label__title">Preconnection: </span><span class="label__description">DNS lookup, TCP handshake and TLS negotiation with services that will be needed soon is done in advance during idle time using preconnect.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/661285b7bb83222ba91b449c0d4e3d96.js"></div>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">REQUESTS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all requests " data-item-priority="low" data-item-id="7" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-7" id="c-checklist__item-performance-7"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-7"><span class="label__title">Prefetching: </span><span class="label__description">Resources that will be needed soon (e.g. lazy loaded images) are requested in advance during idle time using prefetch.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/e7b896ce3d0539f5c027b9a66321f116.js"></div>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">REQUESTS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all requests " data-item-priority="low" data-item-id="8" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Low priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-8" id="c-checklist__item-performance-8"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-8"><span class="label__title">Preloading: </span><span class="label__description">Resources needed in the current page (e.g. scripts placed at the end of <body>) in advance using preload.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__code">
<div class="c-checklist__code__loader js-loader">
<div class="code-icons"></div>
</div>
<div class="c-checklist__code__github js-code" data-code-url="https://gist.github.com/thedaviddias/492daa550b8892b95304a7b9b86c3236.js"></div>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf" alt=""/><a href="https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf" target="_blank" rel="noopener noreferrer">Difference between prefetch and preload</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">REQUESTS</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all testing " data-item-priority="high" data-item-id="9" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-performance-9" id="c-checklist__item-performance-9"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-performance-9"><span class="label__title">Google PageSpeed: </span><span class="label__description">All your pages were tested (not only the homepage) and have a score of at least 90/100.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.google.com/speed/pagespeed/insights/" alt=""/><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">Google PageSpeed</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://testmysite.withgoogle.com/" alt=""/><a href="https://testmysite.withgoogle.com/" target="_blank" rel="noopener noreferrer">Test your mobile speed with Google</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.webpagetest.org/" alt=""/><a href="https://www.webpagetest.org/" target="_blank" rel="noopener noreferrer">WebPagetest - Website Performance and Optimization Test</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://gtmetrix.com/" alt=""/><a href="https://gtmetrix.com/" target="_blank" rel="noopener noreferrer">GTmetrix - Website speed and performance optimization</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="s-checklist js-section s-checklist__seo" data-section="seo" data-section-id="8" id="section-seo">
<div class="s-checklist__inner">
<div class="s-checklist__header">
<div class="s-checklist__title">
<h2 class="s-checklist__header__title">SEO</h2>
<div class="c-progress">
<progress class="c-progress__bar js-progress" value="0" max="100"></progress>
<div class="c-progress__counter"><span class="c-progress__label">0 %</span><span class="c-progress__text"> SEO items are ✓</span></div>
</div>
</div>
<div class="c-tools">
<div class="c-button__group">
<button class="c-button-icon js-check-all" title="Check all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
<button class="c-button-icon js-uncheck-all" title="Uncheck all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-expand-all" title="Expand all items">
<svg class="icon icon-check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="expand">
<title>Plus Expand</title>
<path d="M280.5 127.5h-51v102h-102v51h102v102h51v-102h102v-51h-102v-102zM255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm0 459c-112.2 0-204-91.8-204-204S142.8 51 255 51s204 91.8 204 204-91.8 204-204 204z"></path>
</svg>
</button>
<button class="c-button-icon js-collapse-all" title="Collapse all items">
<svg class="icon icon-uncheck" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 510 510" aria-hidden="true" data-icon-name="collapse">
<title>Minus Collapse</title>
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0zm127.5 280.5h-255v-51h255v51z"></path>
</svg>
</button>
</div>
<div class="c-button__group">
<button class="c-button-icon js-hide-section" title="Hide current section">
<svg class="icon icon-eye" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-430 231.5 98.5 98.5" aria-hidden="true" data-icon-name="eye">
<path d="M-332.8 277.3c-.9-1-21.5-24.9-48-24.9-26.4 0-47.1 23.9-48 24.9-1.7 2-1.7 4.9 0 6.9.9 1 21.5 24.9 48 24.9 26.4 0 47.1-23.9 48-24.9 1.7-2 1.7-4.9 0-6.9zm-39.9-10.6c1.8-1 4.3.1 5.5 2.5 1.3 2.3.9 5-.9 6s-4.3-.1-5.5-2.5c-1.3-2.3-.9-5 .9-6zm-8.1 33.8c-18.5 0-34-14.2-39.4-19.7 3.6-3.8 11.9-11.4 22.6-16-2.1 3.2-3.3 6.9-3.3 11 0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1c0-4.1-1.2-7.9-3.3-11 10.7 4.6 18.9 12.3 22.6 16-5.4 5.5-20.9 19.7-39.4 19.7z"></path>
<path d="M-349.675 239.41l8.202 8.202-74.245 74.246-8.202-8.203z"></path>
<path class="st0" d="M-416.16 322.39l75.095-75.093 3.465 3.465-75.094 75.094z"></path>
<title>Eye</title>
</svg>
</button>
</div>
</div>
</div>
<div class="s-checklist__body js-checklist-body" data-body-visibility="visible" aria-hidden="false">
<div class="c-checklist">
<ul class="c-checklist__list">
<li class="c-checklist__item js-item all seo " data-item-priority="high" data-item-id="0" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-seo-0" id="c-checklist__item-seo-0"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-seo-0"><span class="label__title">Google Analytics: </span><span class="label__description">Google Analytics is installed and correctly configured.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://analytics.google.com/analytics/web/" alt=""/><a href="https://analytics.google.com/analytics/web/" target="_blank" rel="noopener noreferrer">Google Analytics</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://www.gachecker.com/" alt=""/><a href="http://www.gachecker.com/" target="_blank" rel="noopener noreferrer">GA Checker (and others)</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SEO</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all seo accessibility html " data-item-priority="medium" data-item-id="1" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-seo-1" id="c-checklist__item-seo-1"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-seo-1"><span class="label__title">Headings logic: </span><span class="label__description">Heading text helps to understand the content in the current page.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://khan.github.io/tota11y/#Try-it" alt=""/><a href="http://khan.github.io/tota11y/#Try-it" target="_blank" rel="noopener noreferrer">Tota11y, tab Headings</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SEO</li>
<li class="c-tags__item">ACCESSIBILITY</li>
<li class="c-tags__item">HTML</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all seo " data-item-priority="high" data-item-id="2" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-seo-2" id="c-checklist__item-seo-2"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-seo-2"><span class="label__title">sitemap.xml: </span><span class="label__description">A sitemap.xml exists and was submitted to Google Search Console.</span></label>
<div class="c-checklist__details js-details">
<p class="c-checklist__text">(previously Google Webmaster Tools)</p>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://websiteseochecker.com/html-sitemap-generator/" alt=""/><a href="https://websiteseochecker.com/html-sitemap-generator/" target="_blank" rel="noopener noreferrer">Sitemap generator</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SEO</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all seo testing " data-item-priority="high" data-item-id="3" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-seo-3" id="c-checklist__item-seo-3"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-seo-3"><span class="label__title">robots.txt: </span><span class="label__description">The robots.txt is not blocking webpages.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://varvy.com/robottxt.html" alt=""/><a href="https://varvy.com/robottxt.html" target="_blank" rel="noopener noreferrer">The robots.txt file</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.google.com/webmasters/tools/robots-testing-tool" alt=""/><a href="https://www.google.com/webmasters/tools/robots-testing-tool" target="_blank" rel="noopener noreferrer">Test your robots.txt with Google Robots Testing Tool</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SEO</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all seo testing " data-item-priority="high" data-item-id="4" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="High priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-seo-4" id="c-checklist__item-seo-4"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-seo-4"><span class="label__title">Structured Data: </span><span class="label__description">Pages using structured data are tested and are without errors. Structured data helps crawlers understand the content in the current page.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.google.com/search/docs/guides/intro-structured-data" alt=""/><a href="https://developers.google.com/search/docs/guides/intro-structured-data" target="_blank" rel="noopener noreferrer">Introduction to Structured Data - Search - Google Developers</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://rdfa.info/" alt=""/><a href="https://rdfa.info/" target="_blank" rel="noopener noreferrer">RDFa - Linked Data in HTML</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://json-ld.org/" alt=""/><a href="https://json-ld.org/" target="_blank" rel="noopener noreferrer">JSON-LD</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://www.w3.org/TR/microdata/" alt=""/><a href="https://www.w3.org/TR/microdata/" target="_blank" rel="noopener noreferrer">Microdata</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.google.com/structured-data/testing-tool/" alt=""/><a href="https://developers.google.com/structured-data/testing-tool/" target="_blank" rel="noopener noreferrer">Test your page with the Structured Data Testing Tool</a>
</li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://schema.org/docs/full.html" alt=""/><a href="http://schema.org/docs/full.html" target="_blank" rel="noopener noreferrer">Complete list of vocabularies that can be used as structured data. Schema.org Full Heirarchy</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://developers.google.com/structured-data/testing-tool/" alt=""/><a href="https://developers.google.com/structured-data/testing-tool/" target="_blank" rel="noopener noreferrer">Test your page with the Structured Data Testing Tool</a></li>
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=http://schema.org/docs/full.html" alt=""/><a href="http://schema.org/docs/full.html" target="_blank" rel="noopener noreferrer">Complete list of vocabularies that can be used as structured data on Schema.org Full Hierarchy</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SEO</li>
<li class="c-tags__item">TESTING</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all seo html " data-item-priority="medium" data-item-id="5" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-seo-5" id="c-checklist__item-seo-5"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-seo-5"><span class="label__title">Sitemap HTML: </span><span class="label__description">An HTML sitemap is provided and is accessible via a link in the footer of your website.</span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://support.google.com/webmasters/answer/183668?hl=en" alt=""/><a href="https://support.google.com/webmasters/answer/183668?hl=en" target="_blank" rel="noopener noreferrer">Sitemap guidelines - Google Support</a>
</li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SEO</li>
<li class="c-tags__item">HTML</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
<li class="c-checklist__item js-item all seo html " data-item-priority="medium" data-item-id="6" data-item-check="false" data-item-dropdown="open" data-item-visible="true" aria-hidden="false">
<div class="c-checklist__item__inner">
<div class="c-checklist__body">
<div class="c-checklist__column c-checklist__priority">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" aria-label="Medium priority item" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__checkbox">
<input class="checkbox" type="checkbox" name="c-checklist__item-seo-6" id="c-checklist__item-seo-6"/>
<svg class="icon icon-checkbox" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
<svg class="icon icon-checked" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="-432 234 94 94" aria-hidden="true" data-icon-name="check">
<title>Check</title>
<path d="M-349 245v72h-72v-72h72m5-11h-82c-3.3 0-6 2.7-6 6v82c0 3.3 2.7 6 6 6h82c3.3 0 6-2.7 6-6v-82c0-3.3-2.7-6-6-6z"></path>
<path class="path-check" d="M-349.2 261.1l-7.2-7.2c-.8-.8-2-.8-2.8 0l-37.3 37.3-13.3-13.3c-.8-.8-2-.8-2.8 0l-7.2 7.2c-.4.4-.6.9-.6 1.4s.2 1 .6 1.4l21.9 21.9c.4.4.9.6 1.4.6.5 0 1-.2 1.4-.6l45.9-45.9c.4-.4.6-.9.6-1.4 0-.5-.2-1-.6-1.4z"></path>
</svg>
</div>
<div class="c-checklist__column c-checklist__label">
<label for="c-checklist__item-seo-6"><span class="label__title">Pagination link tags: </span><span class="label__description">Provide rel="prev" and rel="next" to indicate paginated content. </span></label>
<div class="c-checklist__details js-details">
<div class="c-checklist__documentation">
<h4>Documentation</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://support.google.com/webmasters/answer/1663744?hl=en" alt=""/><a href="https://support.google.com/webmasters/answer/1663744?hl=en" target="_blank" rel="noopener noreferrer">Pagination guidelines - Google Support</a>
</li>
</ul>
</div>
<div class="c-checklist__tools">
<h4>Tools</h4>
<ul class="documentation__list">
<li><img class="c-checklist__favicon" src="/img/icons/1x1.png" data-src="https://www.google.com/s2/favicons?domain_url=https://technicalseo.com/seo-tools/rel-prev-next/" alt=""/><a href="https://technicalseo.com/seo-tools/rel-prev-next/" target="_blank" rel="noopener noreferrer">Pagination (rel="prev/next") Testing Tool</a></li>
</ul>
</div>
</div>
<div class="c-tags">
<ul class="c-tags__list">
<li class="c-tags__item">SEO</li>
<li class="c-tags__item">HTML</li>
</ul>
</div>
</div>
<div class="c-checklist__column c-checklist__dropdown">
<button class="button-icon js-dropdown c-checklist__dropdown__button" aria-label="Open the description section">
<svg class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 98.148 98.149" aria-hidden="true" data-icon-name="arrow">
<title>Arrow</title>
<path d="M97.562 64.692L50.49 17.618c-.75-.75-2.078-.75-2.828 0L.586 64.693C.21 65.068 0 65.577 0 66.106c0 .53.21 1.04.586 1.414l12.987 12.987c.39.39.902.586 1.414.586.512 0 1.023-.195 1.414-.586l32.675-32.674L81.75 80.506c.75.75 2.078.75 2.828 0L97.562 67.52c.782-.78.782-2.048 0-2.828z"></path>
</svg>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="s-main__section s-main__newsletter"></div>
<header class="s-main__section s-main__header">
<div class="s-header__checklist">
<h2 class="s-header__checklist__title">Report and navigation</h2>
<div class="s-header__checklist__el">
<div class="s-form">
<div class="form">
<div class="form-group">
<input type="text" id="project-name" name="project-name" title="Type the name of your project" required>
<label for="project-name">Project Name</label>
</div>
<div class="form-group">
<input type="text" id="page-title" name="page-title" title="Type the name of your page or URL" required>
<label for="page-title">Page title or URL</label>
</div>
<div class="form-group">
<input type="text" id="developer-name" name="developer-name" title="Type your name or the name of your team" required>
<label for="developer-name">Developer's name or team</label>
</div><span id="generated-date"></span>
</div>
</div>
<div class="s-meta">
<button class="button btn--danger js-reset-all">
<svg class="icon icon-reset" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 94.073 94.072" aria-hidden="true" data-icon-name="reset">
<title>Two arrows turn around</title>
<path d="M91.465 5.49c-.748-.31-1.61-.138-2.18.435L80.97 14.24C72.045 5.058 60.124 0 47.4 0c-2.693 0-5.408.235-8.07.697C21.22 3.845 6.543 17.405 1.945 35.244c-.155.6-.023 1.235.355 1.724.378.49.96.775 1.58.775h12.738c.84 0 1.59-.524 1.878-1.313 3.73-10.193 12.992-17.97 23.598-19.814 1.747-.303 3.525-.456 5.288-.456 8.428 0 16.3 3.374 22.168 9.5l-8.445 8.444c-.57.572-.742 1.432-.434 2.18.312.747 1.04 1.234 1.85 1.234H90.7c1.104 0 2-.896 2-2V7.338c0-.808-.49-1.537-1.235-1.847z"></path>
<path d="M90.192 56.328H77.455c-.84 0-1.59.523-1.878 1.312-3.73 10.193-12.992 17.972-23.598 19.814-1.75.303-3.526.456-5.29.456-8.427 0-16.3-3.374-22.167-9.5l8.444-8.444c.572-.572.743-1.432.434-2.18-.31-.747-1.038-1.234-1.847-1.234H3.373c-1.103 0-2 .896-2 2v28.18c0 .81.488 1.54 1.236 1.85.745.31 1.606.137 2.178-.436l8.316-8.315c8.922 9.184 20.843 14.242 33.57 14.242 2.692 0 5.407-.235 8.068-.697 18.112-3.146 32.79-16.708 37.387-34.547.154-.6.022-1.234-.355-1.725-.38-.488-.964-.775-1.583-.775z"></path>
</svg>Start new checklist
</button>
</div>
</div>
<div class="s-header__checklist__el">
<nav class="c-nav">
<ul class="c-nav__list c-nav--inline">
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-head"><span class="c-nav__status" id="js-nav-head" data-notation="0"></span><span>head</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-html"><span class="c-nav__status" id="js-nav-html" data-notation="0"></span><span>html</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-webfonts"><span class="c-nav__status" id="js-nav-webfonts" data-notation="0"></span><span>webfonts</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-css"><span class="c-nav__status" id="js-nav-css" data-notation="0"></span><span>css</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-javascript"><span class="c-nav__status" id="js-nav-javascript" data-notation="0"></span><span>javascript</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-images"><span class="c-nav__status" id="js-nav-images" data-notation="0"></span><span>images</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-accessibility"><span class="c-nav__status" id="js-nav-accessibility" data-notation="0"></span><span>accessibility</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-performance"><span class="c-nav__status" id="js-nav-performance" data-notation="0"></span><span>performance</span></a></li>
<li class="c-nav__item"><a class="c-button js-scroll" href="#section-seo"><span class="c-nav__status" id="js-nav-seo" data-notation="0"></span><span>seo</span></a></li>
</ul>
</nav>
</div>
<div class="s-header__checklist__el">
<div class="c-notation">
<div class="c-notation__details">
<ul class="c-notation__details__list">
<li class="c-notation__details__item js-detail-high">
<svg class="icon icon--small icon-priority--high" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg><span class="js-notation-checked">0</span>/<span class="js-notation-total">47</span> ✓ high priority
</li>
<li class="c-notation__details__item js-detail-medium">
<svg class="icon icon--small icon-priority--medium" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg><span class="js-notation-checked">0</span>/<span class="js-notation-total">25</span> ✓ medium priority
</li>
<li class="c-notation__details__item js-detail-low">
<svg class="icon icon--small icon-priority--low" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 510 510" aria-hidden="true" data-icon-name="bullet">
<path d="M255 0C114.75 0 0 114.75 0 255s114.75 255 255 255 255-114.75 255-255S395.25 0 255 0z"></path>
</svg><span class="js-notation-checked">0</span>/<span class="js-notation-total">16</span> ✓ low priority
</li>
</ul>
</div>
<div class="c-notation__box">
<div class="c-notation__item" id="js-notation" data-notation="0"><span class="c-notation__letter">X</span></div>
</div>
</div>
<div class="c-notation__generate">
<button class="button --fill --large js-print plausible-event-name=Generate+Report" >
<svg class="icon icon-print" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 94.168 94.168" aria-hidden="true" data-icon-name="print">
<title>Printer</title>
<path d="M93.135 27.803H79.167v6.447c0 1.104-.896 2-2 2H17c-1.103 0-2-.896-2-2v-6.447H1.034c-.57 0-1.033.462-1.033 1.033v36.497c0 .57.462 1.033 1.033 1.033H15V59.92c0-1.105.897-2 2-2h60.167c1.104 0 2 .895 2 2v6.446h13.968c.57 0 1.033-.463 1.033-1.033V28.836c0-.57-.463-1.033-1.033-1.033zM82.98 52.625c-2.425 0-4.392-1.965-4.392-4.39 0-2.424 1.967-4.39 4.39-4.39s4.39 1.966 4.39 4.39c0 2.426-1.968 4.39-4.39 4.39z"></path>
<path d="M75.617 22.522c0-.55-.22-1.073-.605-1.46L61.57 7.62c-.39-.388-.913-.606-1.46-.606H20.615c-1.14 0-2.065.925-2.065 2.066v23.754h57.067V22.522zm-17.333 2.952c-.278 0-.546-.11-.742-.306-.196-.197-.308-.463-.308-.742l.002-12.498 13.546 13.546H58.284z"></path>
<path d="M18.55 85.088c0 1.14.926 2.065 2.066 2.065h52.936c1.142 0 2.065-.925 2.065-2.065v-23.42H18.55v23.42z"></path>
</svg>Generate report
</button>
</div>
</div>
</div>
</header>
</main>
</div>
<div class="page-footer">
<footer class="page-footer">
<div class="s-footer">
<div class="ml-embedded" data-form="NjvO7e"></div>
<div class="s-footer__made">
<p>Made with ❤️ by <a href="https://thedaviddias.com">David Dias</a> for the Open-Source Community.</p>
</div>
</div>
</footer>
</div>
</div>
<script src="/scripts/app.bundle.js" async></script>
<script>
if ('serviceWorker' in navigator) {
//- console.log('CLIENT: service worker registration in progress.');
navigator.serviceWorker.register('/service-worker.js').then(function() {
//- console.log('CLIENT: service worker registration complete.');
}, function() {
//- console.log('CLIENT: service worker registration failure.');
});
}
else {
//- console.log('CLIENT: service worker is not supported.');
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手