# A List Of Tools For Improvement

A set of questions you should use before handing off your application to the client.

***

### Quick Web Developers Website Checklist & A List Of Tools For Improvement

#### A set of questions you should use before handing off your application to the client.

![](https://cdn-images-1.medium.com/max/800/0*QD7rah374uFotVYN.jpg)First off… download this developer checklist extension for chrome that literally evaluates the checkpoints on any webpage you activate it on.. it also provides advice and html validation so that you can improve your site and it’s SEO rankings!

[**Web Developer Checklist**\
\_Analyses any web page for violations of best practices\_chrome.google.com](https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=en-US)

#### Here it is in action :

![](https://cdn-images-1.medium.com/max/800/1*Qh8BZUzF7nRISPrwDTz05Q.png)### Remainder of tool list is below this checklist:

***

### Usefulness & Relevance:

> *Does the content meet user needs, goals, and interests?*

> *Does the content meet business goals?*

> *For how long will the content be useful? When should it expire? Has its usefulness already expired?*

> *Is the content timely and relevant?*

***

### Clarity & Accuracy:

> **Is the content understandable to customers?**

> **Is the content organized logically & coherently?**

> **Is the content correct?**

> **Does the content contain factual errors, typos, or grammatical errors?**

> **Do images, video, and audio meet technical standards, so they are clear?**

***

### Influence & Engagement:

> Does the content use the most appropriate techniques to influence or engage customers?

> Does the content execute those techniques effectively?

> Does the content use too many or too few techniques for the context?

***

### Completeness:

> Does the content include all of the information customers need or might want about a topic?

> Does the content include too much or too little information about a topic for the context?

### Voice & Style:

> Does the content consistently reflect the editorial or brand voice?

> Does its tone adjust appropriately to the context — for example, sales versus customer service?

> Does the content convey the appropriate editorial and brand qualities?

> Does the content seem to have a style? If so, does the content adhere to it consistently?

> Does the content read, look, or sound as though it’s professionally crafted?

***

### Usability & Findability:

> Is the content easy to scan or read?

> Is the content in a usable format, including headings, bulleted lists, tables, white space, or similar techniques, as appropriate to the content?

> Does the content have the appropriate metadata?

> Does the content follow search engine optimization (SEO) guidelines — such as using keywords — without sacrificing quality in other areas?

> Can customers find the content when searching using relevant keywords?

***

### SEO Advice From Google:

### Help Google find your pages

* Ensure that all pages on the site can be reached by a link from another findable page. The referring link should include either text or, for images, an alt attribute, that is relevant to the target page. Crawlable links are `<a>` [tags with an href attribute](https://developers.google.com/search/docs/advanced/guidelines/links-crawlable).
* Provide a [sitemap file](http://sitemaps.org) with links that point to the important pages on your site. Also provide a page with a human-readable list of links to these pages (sometimes called a site index or site map page).
* Limit the number of links on a page to a reasonable number (a few thousand at most).
* Make sure that your web server correctly supports the `If-Modified-Since` HTTP header. This feature directs your web server to tell Google if your content has changed since we last crawled your site. Supporting this feature saves you bandwidth and overhead.
* Use the robots.txt file on your web server to manage your crawling budget by preventing crawling of infinite spaces such as search result pages. Keep your robots.txt file up to date. [Learn how to manage crawling with the robots.txt file](https://developers.google.com/search/docs/advanced/robots/robots-faq). Test the coverage and syntax of your robots.txt file using the [robots.txt Tester](https://www.google.com/webmasters/tools/robots-testing-tool).

**Ways to help Google find your site:**

* [Ask Google to crawl your pages](https://developers.google.com/search/docs/advanced/crawling/ask-google-to-recrawl).
* Make sure that any sites that should know about your pages are aware your site is online.

### Help Google understand your pages

* Create a useful, information-rich site, and write pages that clearly and accurately describe your content.
* Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.
* Ensure that your `<title>` elements and `alt` attributes are descriptive, specific, and accurate.
* Design your site to have a clear conceptual page hierarchy.
* Follow our recommended best practices for [images](https://developers.google.com/search/docs/advanced/guidelines/google-images), [video](https://developers.google.com/search/docs/advanced/guidelines/video), and [structured data](https://developers.google.com/search/docs/guides/intro-structured-data).
* When using a content management system (for example, Wix or WordPress), make sure that it creates pages and links that search engines can crawl.
* To help Google fully understand your site’s contents, allow all site assets that would significantly affect page rendering to be crawled: for example, CSS and JavaScript files that affect the understanding of the pages. The Google indexing system renders a web page as the user would see it, including images, CSS, and JavaScript files. To see which page assets that Googlebot cannot crawl use the [URL Inspection tool](https://support.google.com/webmasters/answer/9012289); to debug directives in your robots.txt file, use the [robots.txt Tester](https://support.google.com/webmasters/answer/6062598) tool.
* Allow search bots to crawl your site without session IDs or URL parameters that track their path through the site. These techniques are useful for tracking individual user behavior, but the access pattern of bots is entirely different. Using these techniques may result in incomplete indexing of your site, as bots may not be able to eliminate URLs that look different but actually point to the same page.
* Make your site’s important content visible by default. Google is able to crawl HTML content hidden inside navigational elements such as tabs or expanding sections, however we consider this content less accessible to users, and believe that you should make your most important information visible in the default page view.
* Make a reasonable effort to ensure that advertisement links on your pages do not affect search engine rankings. For example, use [robots.txt](https://developers.google.com/search/docs/advanced/robots/intro), `rel="nofollow"`, or `rel="sponsored"` to prevent advertisement links from being followed by a crawler.

### Help visitors use your pages

* Try to use text instead of images to display important names, content, or links. If you must use images for textual content, use the `alt` attribute to include a few words of descriptive text.
* Ensure that all links go to live web pages. Use [valid HTML](https://validator.w3.org).
* Optimize your page loading times. Fast sites make users happy and improve the overall quality of the web (especially for those users with slow Internet connections). Google recommends that you use tools like [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) and [Webpagetest.org](https://www.webpagetest.org) to test the performance of your page.
* Design your site for all device types and sizes, including desktops, tablets, and smartphones. Use the [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) to test how well your pages work on mobile devices, and get feedback on what needs to be fixed.
* Ensure that your site [appears correctly in different browsers](https://developers.google.com/search/docs/advanced/guidelines/browser-compatibility).
* If possible, [secure your site’s connections](https://developers.google.com/search/docs/advanced/security/https) with HTTPS. Encrypting interactions between the user and your website is a good practice for communication on the web.
* Ensure that your pages are useful for readers with visual impairments, for example, by testing usability with a screen-reader.

### Basic principles

* Make pages primarily for users, not for search engines.
* Don’t deceive your users.
* Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you’d feel comfortable explaining what you’ve done to a website that competes with you, or to a Google employee. Another useful test is to ask, “Does this help my users? Would I do this if search engines didn’t exist?”
* Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.

### Specific guidelines

**Avoid** the following techniques:

* [Automatically generated content](https://developers.google.com/search/docs/advanced/guidelines/auto-gen-content)
* Participating in [link schemes](https://developers.google.com/search/docs/advanced/guidelines/link-schemes)
* Creating pages with [little or no original content](https://support.google.com/webmasters/answer/66361)
* [Cloaking](https://developers.google.com/search/docs/advanced/guidelines/cloaking)
* [Sneaky redirects](https://developers.google.com/search/docs/advanced/guidelines/sneaky-redirects)
* [Hidden text or links](https://developers.google.com/search/docs/advanced/guidelines/hidden-text-links)
* [Doorway pages](https://developers.google.com/search/docs/advanced/guidelines/doorway-pages)
* [Scraped content](https://developers.google.com/search/docs/advanced/guidelines/scraped-content)
* Participating in [affiliate programs without adding sufficient value](https://developers.google.com/search/docs/advanced/guidelines/affiliate-programs)
* Loading pages with [irrelevant keywords](https://developers.google.com/search/docs/advanced/guidelines/irrelevant-keywords)
* Creating pages with [malicious behavior](https://developers.google.com/search/docs/advanced/guidelines/malicious-behavior), such as phishing or installing viruses, trojans, or other badware
* Abusing [structured data](https://developers.google.com/search/docs/guides/sd-policies) markup
* Sending [automated queries](https://developers.google.com/search/docs/advanced/guidelines/automated-queries) to Google

**Follow** good practices:

* Monitoring your site for [hacking](https://developers.google.com/search/docs/advanced/security/what-is-hacked) and removing hacked content as soon as it appears
* Preventing and removing [user-generated spam](https://developers.google.com/search/docs/advanced/guidelines/user-gen-spam) on your site

If your site violates one or more of these guidelines, then Google may take [manual action](https://support.google.com/webmasters/answer/9044175) against it. Once you have remedied the problem, you can [submit your site for reconsideration](https://support.google.com/webmasters/answer/35843).

***

### Website Launch Checklist:

### Website design checklist

It’s all too easy to miss (or break) something during the many back-and-forths, client feedback sessions, and other design iterations you go through. That’s why we created the design checklist below will help you go back and check for any design mistakes.

To start, be sure to check your:

* Spacing: Is spacing consistent across the site (i.e., did you stick to that 8px grid, or let a rogue 18px in there)? Do all elements have enough breathing room?
* Colors: Have you stuck to a consistent, harmonious color palette? Are all instances of the brand blue *actually* the brand blue?
* Shadows: If you used drop shadows, is the light source consistent for each and every one? Did you use the same blur, opacity, and spread values?
* Typography: Is your font stack logical and consistent (i.e., is there a reason that element is set in a sans)? Are your heading sizes consistent? Have you used proper (not faux) italics and bolding? Do all text links look right? Is all text both legible and readable?
* Imagery: Do any images look blurry, pixelated, or otherwise funky? Are any images broken or crazily heavy in terms of file size? Do all *non-decorative* images have alt tags?
* Logo: It’s (usually) just another image, but it’s so important it warrants its own step. Is it the latest version? Is it crisp (not blurry or pixelated)?

Once you’ve made these initial visual checks, you’ll want to ensure that your site’s appearance is consistent and functional on any screen.

### Cross-browser appearance

Different browsers may render your website in different ways, so it’s important to test your site in different browsers. Take a look at [W3’s browser stats](http://www.w3schools.com/browsers/browsers_stats.asp) to see where you should focus your testing. (Though if you’re working on a redesign, browser-usage stats will be more useful.)

During this process (and the next, in multi-device testing) you’ll want to make sure your layouts, typography, navigation, and other design elements are displaying properly.

The elements that tend to vary most across browsers, and therefore are most important to check, are:

* Fonts
* Colors/gradients
* Images
* Logo

### Cross-device appearance

![](https://cdn-images-1.medium.com/max/800/0*zXLmWvXkMI5Wv2LF.jpeg)Make sure your site looks and performs beautifully on any device.

There have never been more web-capable devices around, and with that comes a staggering array of screen sizes. Done right, your site *should* perform well on any screen size, but be sure to double check. (You are a perfectionist after all, right?)

This is also where mobile navigation is crucial. Be sure to test out the user’s ability to navigate around the website on a touchscreen device, and make sure nothing gets lost in device transition.

In Webflow, we make it easy for you to test the most popular devices and preview your website on almost any size, streamlining the process of cross-device testing all in one place. Of course, nothing replaces real-world testing on a variety of devices as small details may differ on the real device.

### Image optimization

Images and graphics are an important element of many websites, so you’ll want to make sure they display properly, especially on all those ultra-high-definition devices (like Apple’s Retina screens) out there.

The rule of thumb is to upload your image at twice the size it’ll display on your site. In some cases, you can upload two images: an actual-size version for lower-res devices, and another that’s twice the size for high-res devices.

Why? Because the heavier the image, the slower your page will load, and the worse your user experience will be (which also negatively affects SEO, which we’ll cover later on).

In Webflow, we automatically scale, compress, and optimize images for every device. Learn more about our [responsive images feature or check out our more detailed](https://webflow.com/feature/responsive-images) article on [image optimization](https://webflow.com/blog/how-to-boost-your-sites-performance).

### Website functionality testing

Design and functionality go hand in hand, but I like to isolate the two to make sure the website both *looks* the way it was designed to and that it *performs* as intended.

### Integration testing

This one is super important, and can range from a quick task to a giant one, depending on how many integrations you have. Typically, I’ll create a list of integrations *as I add them* so I don’t forget later on.

Some common integrations to test might be:

* Web forms (check that the forms work *and* that submitted information goes to the right place)
* Autoresponders
* Marketing emails (MailChimp, Constant Contact, HubSpot, drip campaigns, etc.)
* RSS feeds
* Ecommerce
* CRM
* CMS

### Link testing

This one can be a doozy, simply because most sites have dozens (if not hundreds) of links. More often than not, there’s a link or two that goes nowhere, and it’s important to find them before your end-users do.

Some of the most important links to check are:

* Top navigation links
* Footer links
* Social media links (Facebook, Twitter, etc.)
* Logo (typically links to the home page)

Rather than doing all this manually, I’d suggest trying a link crawler like the [W3C Link Checker](https://validator.w3.org/checklink), the Chrome plugin [Check My Links](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en-GB), or [Screaming Frog](http://www.screamingfrog.co.uk/seo-spider/) (which is excellent for SEO audits, too).

### Content editing

![](https://cdn-images-1.medium.com/max/800/0*HxnVQM9RoqyuTlLP.jpeg)Give the king its due.

Content is king, and the testing process should be fit for one. Typically this involves making sure that all content has been updated and approved. I can’t tell you how many websites I’ve found that *still* have a l\_orem ipsum\_ paragraph somewhere.

Now, if you practice [content-first design](https://webflow.com/blog/content-first-design), you should have final content already in place, so you can focus on more fine-toothed-comb review, like proofing for spelling and grammatical errors.

It’s also important to note here that it’s okay for content to be changed later on. Clients, team members, or you can always adjust text through a CMS. The main goal here is to ensure that your website content isn’t complete gibberish.

### Search engine optimization (SEO)

![](https://cdn-images-1.medium.com/max/800/0*Ukayn_ZyXfN-Wg-M.jpeg)Analyzing and optimizing your website \*after\* publishing is a never-ending process. And you need to consider semantic site structure from the get-go. But that doesn’t mean you won’t benefit from an SEO review before you hit publish.

There are multiple things that can be done to optimize your website for search engines.

### 1. Use proper semantic structure

Web crawlers (like Google’s bots) read through your website to get an understanding of your content, so that search engines know to display your website when people search for it. To help them crawl your site, you need to use language they’ll understand.

Historically, this has meant using the following semantic tags:

* h1–h6 (heading tags)
* p (paragraph tags)
* ul/ol (unordered and ordered Lists)

You can also go above and beyond with some new [HTML5 semantic tags](https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide):

* \<article>
* \<aside>
* \<details>
* \<figcaption>
* \<figure>
* \<footer>
* \<header>
* \<main>
* \<mark>
* \<nav>
* \<section>
* \<summary>
* \<time>

These tags are important because they let you identify the content that’s most relevant to users. In short: making it easy for search engines makes it easier for users to find you.

### 2. Meta SEO tags

Aside from on-page structure, you can also help web crawlers understand your site by titling and describing your pages as a whole. We outline a few tips [on website SEO on our blog](https://webflow.com/blog/website-seo), narrowed down to 2 main considerations below.

#### Meta title

Your page’s meta title translates to the linked text people will see on search engine result pages (SERPs). It also displays on the browser tab when people click through to your page. Some best practices include:

* Define the page’s central topic
* Keep it under 70 characters in length (including spaces)
* Use relevant keywords
* Put important keywords in the front of the title

#### Meta description

The meta description is a short sentence (or two) that describes what your website has to offer. It will (sometimes) show up below your meta title in search results.

Some best practices include:

* Include keywords that describe the page
* Don’t go over 160 characters
* Write your description for people, not robots. (Google doesn’t use descriptions in web rankings).

### 3. Open Graph settings

Social media has become a key element of SEO, so it’s crucial that you amplify this process by providing effective Open Graph information. Open Graph settings include three pieces of content: title, description, and an image.

The title and description follow the same rules as their SEO counterparts, but instead of showing up in search results, they appear as the default title and description on social media platforms when shared.

This is hugely beneficial because it lets you determine what the messaging (and image) will be when others share your website, helping you keep control of your brand.

***

***

### Tool List:

### Update:

![](https://cdn-images-1.medium.com/max/800/0*8luiRPwHqkyfqJfb)[Can I UseProvides browser support information of front-end web technologies. Enter a search term to find out which browsers support it. *caniuse.com*](https://caniuse.com)![](https://cdn-images-1.medium.com/max/800/0*t50QcwzBkwFuth4o)[Online HTML EditorFree online HTML editor with WYSIWYG and source composer and instant preview and many useful built-in features *html-online.com*](https://html-online.com/editor/)![](https://cdn-images-1.medium.com/max/800/0*SnFMpz919DboGmr-)[Web CleanerOnline HTML, CSS and JavaScript cleaner and code editors with syntax highlighting and customizable cleaning features. *html-cleaner.com*](https://html-cleaner.com)![](https://cdn-images-1.medium.com/max/800/0*2KRsAowQaufNBiSs)[Word HTMLFree online Word and other rich text editor and HTML converter. Copy-paste your document in the editor and switch to HTML view to get the code. *wordhtml.com*](https://wordhtml.com)![](https://cdn-images-1.medium.com/max/800/0*A_wBLhhToeFlXuLg)[HTML Cheat SheetHTML, CSS, JavaScript and other web technology cheat sheet with interactive user interface. Grab the code you’re looking for quickly. *htmlcheatsheet.com*](https://htmlcheatsheet.com)![](https://cdn-images-1.medium.com/max/800/0*393SncqM14lxdAYX)[Stack OverflowHuge programmer community where you usually don’t have to ask for help because probably someone has already answered the same question. *stackoverflow.com*](https://stackoverflow.com)![](https://cdn-images-1.medium.com/max/800/0*veTjmob-9SlcsbfY)[w3schoolsThe place to learn web technologies. There’s a big chance that this site gives the first search result when you’re looking for a HTML term. *w3schools.com*](https://www.w3schools.com)![](https://cdn-images-1.medium.com/max/800/0*mcOcJb9_CRucZ8Hi)[Mozzilla Developer NetworkAn evolving learning platform for web technologies. Providing tutorials, developer tools and the information to easily build projects. *developer.mozilla.org*](https://developer.mozilla.org)![](https://cdn-images-1.medium.com/max/800/0*1A0zYmYhuNwVv-JD)[Markup ValidatorEnter the link of a webpage and the online tool will highlight the errors and warnings to fix in the source code. *validator.w3.org*](https://validator.w3.org)![](https://cdn-images-1.medium.com/max/800/0*qkBfaTWhlKlbtmsf)[GitHubCollaborate with other developers. Fork, send pull requests and manage all your public and private git repositories. *github.com*](https://github.com)![](https://cdn-images-1.medium.com/max/800/0*xuAlgMUU6yPrTp-y)[BitbucketWeb-based hosting service for development projects with version control system that makes it easy for you to collaborate with your team. *bitbucket.org*](https://bitbucket.org)![](https://cdn-images-1.medium.com/max/800/0*XiFbqTuL0zs0ZeWn)[DribbleTell others what are you working on! Dribbble is a community of designers sharing screenshots of their work, process, and projects. *dribbble.com*](https://dribbble.com)![](https://cdn-images-1.medium.com/max/800/0*Z7rf2N2ZanFTyC24)[Built WithEnter a domain name to find out who is hosting it, what CMS and framework is used and many other insights. *builtwith.com*](https://builtwith.com)![](https://cdn-images-1.medium.com/max/800/0*JAKvGWN_Sd05kCwa)[HTML TidyAn online tool for checking and cleaning up HTML source files. Useful for finding and correcting errors in deeply nested HTML. *htmltidy.net*](https://htmltidy.net)![](https://cdn-images-1.medium.com/max/800/0*NobceO9h1WGoiAh5)[Div TableCreate or convert tables to responsive div tags with a few clicks. Use the provided CSS code to render the divs as table cells. *divtable.com*](https://divtable.com)![](https://cdn-images-1.medium.com/max/800/0*NFqBo-YVX2D2dtFh)[BootstrapThe most popular free and open-source HTML, CSS, and JS framework makes front-end development easier and faster. *getbootstrap.com*](https://getbootstrap.com)![](https://cdn-images-1.medium.com/max/800/0*rHGXn1mVlS3XJNCV)[HTMLGProfessional HTML editor. The free version is enough to do magic with your markup. Tag and attribute manager filter etc. *htmlg.com*](https://htmlg.com/html-editor/)![](https://cdn-images-1.medium.com/max/800/0*zzrT9kYMdxxAHwb8)[Facebook DevelopersDeveloper tools for login, share widget, analytics, monetization, messenger platform and more from the biggest social media site. *developers.facebook.com*](https://developers.facebook.com)![](https://cdn-images-1.medium.com/max/800/0*CmpW2L4pVbESIh5J)[Google Mobile-Friendly TestCheck if Google considers your web page mobile-friendly and adjust the deficiencies if there is any. *google.com/mobile-friendly*](https://search.google.com/test/mobile-friendly)![](https://cdn-images-1.medium.com/max/800/0*mKshXXHbzoStzvjr)[Webpage Speed TestAnalize the loading speed of a website from many available servers. The website creates a detailed analysis with screenshot and waterfall view. *webpagetest.org*](https://www.webpagetest.org)![](https://cdn-images-1.medium.com/max/800/0*sYIvpZGnkNhf-_XC)[NetRendererRenders quickly a webpage with the selected version of the old Internet Explorer web browser. NetRenderer goes back to IE version 5.5. *netrenderer.com*](https://netrenderer.com)![](https://cdn-images-1.medium.com/max/800/0*unIWXerRzCuxrzng)[Browser ShotsCreate the screenshot of a webpage with many available browsers in various operating systems. *browsershots.org*](http://browsershots.org)![](https://cdn-images-1.medium.com/max/800/0*bX3AIaYOSzadB8t6)[PageSpeed InsightsThis tool by Google analyzes the submitted link from mobile and desktop to suggest you what to consider optimizing. *developers.google.com*](https://developers.google.com/speed/pagespeed/insights/)![](https://cdn-images-1.medium.com/max/800/0*v1hxqLrwUWL2dbBX)[Google FontsAn interactive directory of over 800 free hosted web fonts. It allows to optimize loading speed by including only what you need. *fonts.google.com*](https://fonts.google.com)![](https://cdn-images-1.medium.com/max/800/0*n4slofmCAW3PUOTn)[Font AwesomeThe most popular icon set based on CSS and LESS. The vector icons can be customized as text — size, color, drop shadow *fontawesome.io*](https://fontawesome.com)![](https://cdn-images-1.medium.com/max/800/0*_k2GQpr-IXMCfCbD)[RGB Color CodesSearch and save color codes. Search by name or mix the RGB, HSV or CMYK values. Use the generated HTML/CSS codes. *rgbcolorcode.com*](https://rgbcolorcode.com)![](https://cdn-images-1.medium.com/max/800/0*IH19Lh2SggZ5fNd_)[FreePicBrowse the large directory of free photos, vector arts, icons, illustrations, PSD files at FreePic. *freepik.com*](https://www.freepik.com)![](https://cdn-images-1.medium.com/max/800/0*g9YcUHOEU2oybdxl)[Placehold.it/Image placeholders with customizable size. Just add the image resolution after the domain name, for example placehold.it/400x250 *placehold.it*](https://placehold.it)![](https://cdn-images-1.medium.com/max/800/0*PSn8d5FL7_ngjJtU)[XML SitemapsGenerate XML sitemaps and URL list of a website. The crawl limit is 500 pages. *xml-sitemaps.com*](https://www.xml-sitemaps.com)![](https://cdn-images-1.medium.com/max/800/0*673487vh2n0o7Ub6)[Broken Link CheckerCrawl a domain for dead links. Locates both internal and external links pointing to 404 error pages. *brokenlinkcheck.com*](http://www.brokenlinkcheck.com)![](https://cdn-images-1.medium.com/max/800/0*NrZDjNLAdMcfK8Hy)[CodepenRegister to create, save and share HTML-CSS-JS code snippets and run them online. *codepen.io*](https://codepen.io)![](https://cdn-images-1.medium.com/max/800/0*1EEf11CeSLOOAAyu)[JSFiddleSimilar to Codepen but this one doesn’t require registration. Test HTML-CSS-JS code online and save your small project in a shareable URL. *jsfiddle.net*](https://jsfiddle.net)![](https://cdn-images-1.medium.com/max/800/0*2Aq8QOCznCo11ypk)[WordPress.OrgMore than 10 million websites use this free and open-source content management system based on PHP-MySql. *wordpress.org*](https://wordpress.org)![](https://cdn-images-1.medium.com/max/800/0*CJX2RwykNQ9O0RbL)[Blog StarterA free guide that shows beginners how to start a blog using WordPress.org *theblogstarter.com*](https://www.theblogstarter.com)![](https://cdn-images-1.medium.com/max/800/0*QSwvNaVB8SOgyDqp)[Website SetupA friendly guide about how to make a website, discussing the hosting, the CMS, domain name and promotion. *websitesetup.org*](https://websitesetup.org)![](https://cdn-images-1.medium.com/max/800/0*m7_ugygIICt4VLea)[Expired DomainsHunt for expired domain names or get inspiration for your next project. It’s worth registering for an account on this free website. *expireddomains.net*](https://www.expireddomains.net)![](https://cdn-images-1.medium.com/max/800/0*PNRVuj1GX-jgppng)[Bad HTMLThe ugliest website on the internet, collecting bad UI/UX practices. A deterrent example about how not to build a website. *badhtml.com*](https://badhtml.com)![](https://cdn-images-1.medium.com/max/800/0*66ncH3hioTVPIr2l)[1st Web DesignerFollow this web design blog to find out what’s new in freelance, marketing, UX etc. categories. *1stwebdesigner.com*](https://1stwebdesigner.com)

***

[**Hire Freelance Developers from the Top 3% - Toptal®**\
\_Toptal is a marketplace for top developers, engineers, programmers, coders, architects, and consultants. Top companies…\_toptal.com](http://toptal.com/developers)

[**Web Developer Checklist**\
\_Analyses any web page for violations of best practices\_chrome.google.com](https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=en-US)

[**Web Developer Checklist - Get this Extension for 🦊 Firefox (en-US)**\
\_Download Web Developer Checklist for Firefox. Analyzes any web page for violations of best practices.\_addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/addon/webdeveloperchecklist/)

[**Link Checker**\
\_Check links and anchors in Web pages or full Web sites This Link Checker looks for issues in links, anchors and…\_validator.w3.org](https://validator.w3.org/checklink)

[**Capitalization - Wikipedia**\
\_Capitalization ( American English) or capitalisation ( British English) is writing a word with its first letter as a…\_en.wikipedia.org](https://en.wikipedia.org/wiki/Capitalization)

[**Writing style - Wikipedia**\
\_In literature, writing style is the manner of expressing thought in language characteristic of an individual, period…\_en.wikipedia.org](https://en.wikipedia.org/wiki/Writing_style)

[**American and British English spelling differences - Wikipedia**\
\_Despite the various English dialects spoken from country to country and within different regions of the same country…\_en.wikipedia.org](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences)

[**Check Browser Compatibility, Cross Platform Browser Test - Browsershots**\
\_Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source…\_browsershots.org](http://browsershots.org)

[**Online cross-browser testing**\
\_Browserling did a custom cross-browser testing solution for UK's National Health Service. Our application needs to…\_browserling.com](https://browserling.com)

[**Most Reliable App & Cross Browser Testing Platform | BrowserStack**\
\_Just played around with BrowserStack: Quite cool, instant access to a browser in a VM with dev tools. Big thanks to…\_www.browserstack.com](https://www.browserstack.com)

[**Most Powerful Cross Browser Testing Tool Online | LambdaTest**\
\_Perform Live Interactive and Automated Cross Browser Testing on 2000+ Real Browsers and Operating Systems Online Run…\_www.lambdatest.com](https://www.lambdatest.com)

[**Cross Browser Testing Tool: 2050+ Real Browsers & Devices**\
\_We have estimated that by transitioning to automated front-end visual testing and by having easy access to so many…\_crossbrowsertesting.com](https://crossbrowsertesting.com)

[**www. is deprecated.**\
\_Stay in touch! Dec 21, 2012 No-WWW now hasa a social media presence! Check us out on Twitter at @www\_deprecated . We…\_no-www.org](http://no-www.org)

[**www. is not deprecated**\
\_Ever since the first traditional media ads began to appear with Web site addresses in them 25 years ago, people have…\_www.yes-www.org](https://www.yes-www.org)

[**URL rewrite and the www subdomain**\
\_What's the address of your website? www.domain.com or domain.com? There are two camps on the subject of the www…\_madskristensen.net](http://madskristensen.net/post/url-rewrite-and-the-www-subdomain)

[**Mobile-Friendly Test - Google Search Console**\
\_Is your web page mobile-friendly? Test how easily a visitor can use your page on a mobile device. Just enter a page URL…\_www.google.com](https://www.google.com/webmasters/tools/mobile-friendly/)

[**Quick Tip: Don't Forget the Viewport Meta Tag**\
\_I remember my maiden voyage into responsive web design; I'd used a classic grid, wrestled with a flexible layout, and…\_webdesign.tutsplus.com](https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972)

[**Input Type : Email,URL,Phone**\
\_Email, Phone number and Website url are the three most commonly used contact detail which has its unique input…\_html5tutorial.info](https://html5tutorial.info/html5-contact.php)

[**Web Forms - Dive Into HTML5**\
\_Edit description\_diveintohtml5.info](http://diveintohtml5.info/forms.html)

[**Responsive Testing On 2000+ Real Devices & Browsers | BrowserStack**\
\_Frequently Asked Questions Why is responsive testing critical for your website? Responsive design enables a website to…\_www.browserstack.com](https://www.browserstack.com/responsive)

[**UptimeRobot | Free Website Monitoring**\
\_Get up to 50 website, port or heartbeat monitors for free. When something happens, we'll notify you via email, SMS…\_www.uptimerobot.com](https://www.uptimerobot.com)

[**StatusCake: Website Monitoring with Uptime Monitoring solution**\
\_Website Monitoring solution that drives revenue & keeps you online. Track your uptime, page speed, domain, server, &…\_www.statuscake.com](https://www.statuscake.com)

[**Analytics Tools & Solutions for Your Business - Google Analytics**\
\_Easily access data from other Google solutions while working in Analytics, for a seamless workflow that saves you time…\_www.google.com](https://www.google.com/analytics)

[**Statcounter - Web Analytics Made Easy**\
\_Watch in real time as visitors navigate through your website. Are they flowing through your site the way you expect…\_statcounter.com](https://statcounter.com)

[**Real Time Web Analytics**\
\_Clicky Web Analytics is simply the best way to monitor, analyze, and react to your blog or web site's traffic in real…\_clicky.com](https://clicky.com)

[**Matomo - The Google Analytics alternative that protects your data**\
\_Matomo's the Google Analytics alternative that protects your data and your customer's privacy. A powerful web analytics…\_matomo.org](https://matomo.org)

[**PageSpeed Insights**\
\_Have specific, answerable questions about using PageSpeed Insights? Ask your question on Stack Overflow. For general…\_developers.google.com](https://developers.google.com/speed/pagespeed/insights/)

[**REDbot**\
\_Lint for your HTTP resources\_redbot.org](https://redbot.org)

[**imgix Page Weight Tool \* Learn how to improve your site or app's speed.**\
\_imgix Page Weight Tool measures the resources on your site and then recommends how to improve your site's load time.\_pageweight.imgix.com](https://pageweight.imgix.com)

[**TinyPNG - Compress PNG images while preserving transparency**\
\_Excellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is…\_tinypng.com](https://tinypng.com)

[**Kraken.io Image Optimizer**\
\_Kraken.io is a robust, ultra-fast image optimizer. Thanks to its vast array of optimization algorithms Kraken.io is a…\_kraken.io](https://kraken.io)

[**Squoosh**\
\_Compress and compare images with different codecs, right in your browser\_squoosh.app](https://squoosh.app)

[**PNGGauntlet - PNG Compression Software**\
\_PNGGauntlet 3.1.2 is a minor update that resolves some bugs, and adds a much-requested option. First, the bugfixes …\_pnggauntlet.com](http://pnggauntlet.com)

[**ImageOptim - better Save for Web**\
\_Reduces image file sizes - so they take up less disk space and down­load faster - by applying advanced compression…\_imageoptim.com](https://imageoptim.com)

[**Can I use... Support tables for HTML5, CSS3, etc**\
\_Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real…\_caniuse.com](https://caniuse.com)

[**Modernizr: the feature detection library for HTML5/CSS3**\
\_All web developers come up against differences between browsers and devices. That's largely due to different feature…\_modernizr.com](https://modernizr.com)

[**W3C I18n Checker**\
\_This checker performs various tests on a Web Page to determine its level of internationalisation-friendliness. It also…\_validator.w3.org](https://validator.w3.org/i18n-checker/)

[**A More Useful 404**\
\_Encountering 404 errors is not new. Often, developers provide custom 404 pages to make the experience a little less…\_www.alistapart.com](https://www.alistapart.com/articles/amoreuseful404/)

[**Favicon Generator for perfect icons on all browsers**\
\_The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including…\_realfavicongenerator.net](https://realfavicongenerator.net)

[**audreyfeldroy/favicon-cheat-sheet**\
\_A painfully obsessive cheat sheet to favicon sizes/types. Compiled from: For the main favicon itself, it's best for…\_github.com](https://github.com/audreyr/favicon-cheat-sheet)

[**URL Structure \[2021 SEO\]**\
\_Keeping URLs as simple, relevant, compelling, and accurate as possible is key to getting both your users and search…\_moz.com](https://moz.com/learn/seo/url)

[**URL Rewrite Module Configuration Reference**\
\_by Ruslan Yakushev This article provides an overview of the URL Rewrite Module and explains the configuration concepts…\_docs.microsoft.com](https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/url-rewrite-module-configuration-reference)

[**mod\_rewrite - Apache HTTP Server Version 2.4**\
\_The mod\_rewrite module uses a rule-based rewriting engine, based on a PCRE regular-expression parser, to rewrite…\_httpd.apache.org](https://httpd.apache.org/docs/current/mod/mod_rewrite.html)

[**How to Create NGINX Rewrite Rules | NGINX**\
\_In this blog post, we discuss how to create NGINX rewrite rules (the same methods work for both NGINX Plus and the open…\_www.nginx.com](https://www.nginx.com/blog/creating-nginx-rewrite-rules/)

[**How To Set Up A Print Style Sheet - Smashing Magazine**\
\_In a time when everyone seems to have a tablet, which makes it possible to consume everything digitally, and the only…\_www.smashingmagazine.com](https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/)

[**Programmable Search Engine by Google**\
\_Decide if you want users to search only your website, or include other sites on the web. Match the design to your site…\_www.google.com](https://www.google.com/cse/)

[**dewitt/opensearch**\
\_OpenSearch is a collection of simple formats for the sharing of search results. The most recent version of the…\_github.com](https://github.com/dewitt/opensearch)

[**Configuring Web Applications**\
\_A web application is designed to look and behave in a way similar to a native application-for example, it is scaled to…\_developer.apple.com](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)

[**Windows 8 integration (Windows)**\
\_This section details the ways in which web developers can take advantage of the tight integration of Windows 8 and…\_docs.microsoft.com](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh781490\(v=vs.85\))

[**Schema.org - Schema.org**\
\_Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for…\_schema.org](https://schema.org)

[**Schema Markup Generator & Structured Data Testing Tool (inc JSON-LD)**\
\_By adding the JSON-LD this tool generates to your pages you help Google better understand their purpose.Make it easy…\_seoscout.com](https://seoscout.com/tools/schema-generator)

[**Structured Data Testing Tool**\
\_Edit description\_search.google.com](https://search.google.com/structured-data/testing-tool/)

[**Sharing Debugger - Facebook for Developers**\
\_Sharing Debugger lets you preview how your content will look when it's shared to Facebook and debug any issues with…\_developers.facebook.com](https://developers.facebook.com/tools/debug/)

[**JavaScript is not available.**\
\_Edit description\_cards-dev.twitter.com](https://cards-dev.twitter.com/validator)

[**Rich Results Test - Google Search Console**\
\_Does your page support rich results? What are rich results? Rich results are experiences on Google surfaces, such as…\_search.google.com](https://search.google.com/test/rich-results)

[**Getting Started - schema.org**\
\_Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the…\_schema.org](https://schema.org/docs/gs.html)

[**Robots.txt Tutorial**\
\_Use our Robots.txt generator to create a robots.txt file. Use our Robots.txt analyzer to analyze your robots.txt file…\_tools.seobook.com](http://tools.seobook.com/robots-txt/)

[**Robots Generator | Generate robots.txt Files Instantly - RobotsGenerator.com**\
\_Select folders and/or files If there are areas of your page you do not wish made public, simply indicate the…\_www.robotsgenerator.com](http://www.robotsgenerator.com)

[**Create your Google Sitemap Online - XML Sitemaps Generator**\
\_Free Online Google Sitemap Generator. XML-sitemaps.com provides free online sitemap generator service, creating an XML…\_www.xml-sitemaps.com](https://www.xml-sitemaps.com)

[**Markup Validation Service**\
\_W3C's easy-to-use markup validation service, based on SGML and XML parsers.\_validator.w3.org](https://validator.w3.org)

[**Validator.nu (X)HTML5 Validator**\
\_Edit description\_html5.validator.nu](https://html5.validator.nu)

[**CSS Validation Service**\
\_Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets\_jigsaw.w3.org](https://jigsaw.w3.org/css-validator/)

[**CSS Lint**\
\_CSS lint found 0 errors and 0 warnings. How can you fix it? See the details below.\_csslint.net](http://csslint.net)

[**JSLint: The JavaScript Code Quality Tool**\
\_JSLint, The JavaScript Code Quality Tool. This file allows JSLint to be run from a web browser. It can accept a source…\_jslint.com](https://jslint.com)

[**JSHint, a JavaScript Code Quality Tool**\
\_Report Cyclomatic complexity Unused variables Undefined variables Warn About == null About debugging code About unsafe…\_jshint.com](https://jshint.com)

[**Web Content Accessibility Guidelines (WCAG) Overview**\
\_Introducing the Web Content Accessibility Guidelines (WCAG), including WCAG 2.0 and WCAG 2.1. Quick links to resources…\_www.w3.org](https://www.w3.org/WAI/standards-guidelines/wcag/)

[**Handling common accessibility problems - Learn web development | MDN**\
\_Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and…\_developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)

[**WAVE Web Accessibility Evaluation Tool**\
\_WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with…\_wave.webaim.org](https://wave.webaim.org)

[**NV Access**\
\_Access to technology no matter your language, location or financial situation Quality over growth, access over profit…\_www.nvaccess.org](https://www.nvaccess.org)

[**Contrast Checker**\
\_The five boxing wizards jump quickly. The five boxing wizards jump quickly. Enter a foreground and background color in…\_webaim.org](https://webaim.org/resources/contrastchecker/)

[**Using ARIA Landmarks - A Demonstration**\
\_ARIA landmarks are attributes you add to elements to create semantically defined sections of a page that allow users of…\_accessibility.oit.ncsu.edu](https://accessibility.oit.ncsu.edu/using-aria-landmarks-a-demonstration/)

[**The Accessibility of WAI-ARIA**\
\_Web developers interested in accessibility issues often discuss WAI-ARIA, an upcoming W3C candidate recommendation…\_alistapart.com](https://alistapart.com/article/the-accessibility-of-wai-aria/)

[**WAI-ARIA states and properties: Practical examples**\
\_I've been trying to include some WAI-ARIA into the project I'm currently working on. Luckily for me I'm using jQuery's…\_www.punkchip.com](http://www.punkchip.com/2010/11/aria-basic-findings/)

[**Mozilla Observatory**\
\_The Mozilla Observatory is a project designed to help developers, system administrators, and security professionals…\_observatory.mozilla.org](https://observatory.mozilla.org)

[**Cross Site Scripting Prevention - OWASP Cheat Sheet Series**\
\_This article provides a simple positive model for preventing XSS using output encoding properly. While there are a huge…\_cheatsheetseries.owasp.org](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)

[**DOM based XSS Prevention - OWASP Cheat Sheet Series**\
\_When looking at XSS (Cross-Site Scripting), there are three generally recognized forms of XSS: The XSS Prevention…\_cheatsheetseries.owasp.org](https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html)

[**Cross-Site Request Forgeries and You**\
\_As the web becomes more and more pervasive, so do web-based security vulnerabilities. I talked a little bit about the…\_blog.codinghorror.com](https://blog.codinghorror.com/cross-site-request-forgeries-and-you/)

[**Cross-Site Request Forgery Prevention - OWASP Cheat Sheet Series**\
\_Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious web site, email, blog, instant…\_cheatsheetseries.owasp.org](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)

[**Let's Encrypt**\
\_Let's Encrypt is a free, automated, and open certificate authority brought to you by the nonprofit Internet Security…\_letsencrypt.org](https://letsencrypt.org)

[**How to Set Up SSL on IIS 7**\
\_by Saad Ladki The steps for configuring Secure Sockets Layer (SSL) for a site are the same in IIS 7 and above and IIS…\_support.microsoft.com](https://support.microsoft.com/en-gb/help/299875/how-to-implement-ssl-in-iis)

[**Apache: CSR & SSL Installation (OpenSSL)**\
\_Use the instructions on this page to use OpenSSL to create your certificate signing request (CSR) and then to install…\_www.digicert.com](https://www.digicert.com/kb/csr-ssl-installation/apache-openssl.htm#ssl_certificate_install)

[**Configuring HTTPS servers**\
\_To configure an HTTPS server, the ssl parameter must be enabled on listening sockets in the server block, and the…\_nginx.org](https://nginx.org/en/docs/http/configuring_https_servers.html)

[**SSL Server Test**\
\_This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet…\_www.ssllabs.com](https://www.ssllabs.com/ssltest/)

[**Strict-Transport-Security - HTTP | MDN**\
\_The HTTP Strict-Transport-Security response header (often abbreviated as HSTS) lets a web site tell browsers that it…\_developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)

[**HTTP Strict Transport Security - OWASP Cheat Sheet Series**\
\_HTTP Strict Transport Security (also named HSTS) is an opt-in security enhancement that is specified by a web…\_cheatsheetseries.owasp.org](https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Strict_Transport_Security_Cheat_Sheet.html)

[**Content Security Policy | Web Fundamentals | Google Developers**\
\_The web's security model is rooted in the same-origin policy . Code from https://mybank.com should only have access to…\_www.html5rocks.com](https://www.html5rocks.com/en/tutorials/security/content-security-policy/)

[**Content Security Policy (CSP) - HTTP | MDN**\
\_Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks…\_developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)

[**CSP Evaluator**\
\_CSP Evaluator allows developers and security experts to check if a Content Security Policy (CSP) serves as a strong…\_csp-evaluator.withgoogle.com](https://csp-evaluator.withgoogle.com)

[**Understand How Structured Data Works | Google Search Central**\
\_Google Search works hard to understand the content of a page. You can help us by providing explicit clues about the…\_developers.google.com](https://developers.google.com/search/docs/guides/intro-structured-data)

[**Open Graph protocol**\
\_The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on…\_ogp.me](https://ogp.me)

[**About Twitter Cards**\
\_With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to…\_developer.twitter.com](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)

[**Webmasters - Sharing - Documentation - Facebook for Developers**\
\_Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to…\_developers.facebook.com](https://developers.facebook.com/docs/sharing/webmasters#markup)

[**Humans TXT: We Are People, Not Machines.**\
\_It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the…\_humanstxt.org](http://humanstxt.org)

### Discover More:

[**Stackbit Web-Dev-HubTheme**\
\_Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…\_bgoonz-blog.netlify.app](https://bgoonz-blog.netlify.app)

By [Bryan Guner](https://medium.com/@bryanguner) on [June 24, 2021](https://medium.com/p/9a52e11c8ee1).

[Canonical link](https://medium.com/@bryanguner/quick-web-developers-website-checklist-a-list-of-tools-for-improvement-9a52e11c8ee1)

Exported from [Medium](https://medium.com) on August 31, 2021.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bryan-guner.gitbook.io/my-docs/copy-of-web-dev-hub-docs/medium-articles/my-articles/a-list-of-tools-for-improvement.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.