Apply UX patterns
Don’t write a style guide as an afterthought. Start your project off with UX
patterns, and apply these patterns as you code. Don’t have a style guide? Use
the Web Starter Kit style guide which aligns with the
Web Fundamentals Style
$ cd web-starter-kit/app/styleguide/
Here’s a sneak peak at some of the styles covered:
and detects errors using
index.html and add the newly created script, and a
will be the container where the date is placed:
<p>Welcome to Web Starter Kit.</p>
<script src="/scripts/app.js" async></script>
var span = document.getElementsByTagName('span');
span.textContent = 'the amazing '; // change DOM text content
span.style.display = 'inline'; // change CSSOM property
// create a new element, style it, and append it to the DOM
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
Reload the browser:
how the project is performing.
The Web Starter Kit integrates with
If you haven’t used PageSpeed Insights,
you are about to start.
Once you’ve got a chunk of work done and you want to check your site’s speed
and user experience, stop
gulp serve (control-C), and run
The good news: you got a perfect User Experience score. Yay!
The Speed Score is off by 1 point; compression isn’t enabled. You won’t
compress your site until you are ready to host it.
For more information on how to fix your site based on these PageSpeed results,
see PageSpeed Rules and Recommendations.
Debug your code on multiple devices
Up till now, you’ve checked your code by resizing the browser. This is a good
first step, but it’s no substitute for debugging your code on actual devices.
gulp serve tool makes it easy to access staged content on multiple
devices. You can then use the browser developer tools to debug, just the same
as your current development workflow.