How to build a website

Free "How to build a website for the mobile web" Guide

Larry the Lighthouse.
Have you met
Larry?

Larry is your new best friend.

Larry looks at your website's

Performance

Accessibility

Best Practicies

SEO

Then Larry shows you how to improve.

Easy way to find Larry on your mobile

web.dev/measure/

Or

1. Download Firefox for mobile.

2. Install the Google Lighthouse add-on.

3. Navigate to your website.

4. Find Larry in your mobile menu.


Find Larry in your browser

1. Open your Chrome browser or download Google Chrome

2. Install the Chrome Google Lighthouse extension.

3. Find & click on baby Larry.


Find Larry on your PC

We'll show you how in Chrome

1. Open an incognito window



Navigate to the website you want to test



Press F12 to open the rabbit hole

1. Click the double arrows >>

2. Choose Lighthouse



Click Generate report



And your report



Thank you Larry.

Now, easily test your websites.


How to build a website?

All free tools

Programmers Notepad

Paint, is on your PC

squoosh.app

Lighthouse, Larry

Free html training

Free css training

Free Google Training

Free Google Study Guide

AMP
Accelerated Mobile Pages

Load pages in an instant
Execute all AMP JavaScript asynchronously
Size all resources statically
Don’t let extension mechanisms block rendering
Keep all third-party JavaScript out of the critical path
All CSS must be inline and size-bound
Font triggering must be efficient
Minimize style recalculations
Only run GPU-accelerated animations
Prioritize resource loading


AMP Stories

Examples

Dogs

Cats

Code & Hedgehogs from this amp.dev guide

PWA
Progressive Web App

<head>
 <script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js">
</head>

and bottom of this page

  <amp-install-serviceworker src="/sw.js"
   data-iframe-src="install-sw.html"
   layout="nodisplay">
  </amp-install-serviceworker>
 </body>
</html>

which calls this

install-sw.html
<!doctype html>
<title>installing service worker
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
  };
</script>

to call this

sw.js
importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
 assetCachingOptions: [{
  regexp: /\.(png|jpg|woff2|woff|css|js)/,
  cachingStrategy: 'CACHE_FIRST',
 }],
});

and we need a

manifest.json
{
 "short_name": "Coffee",
 "name": "Coffee Fix",
 "icons": [
  {
   "src": "/icons-192.png",
   "type": "image/png",
   "sizes": "192x192"
  },
  {
   "src": "/icons-512.png",
   "type": "image/png",
   "sizes": "512x512"
  }
 ],

 "start_url": "/index.html",
 "background_color": "#3367D6",
 "display": "standalone",
 "scope": "/",
 "theme_color": "#3367D6"
}

SEO

Search Engine Optimisation