Build Your Site

Build this sample app

To see the Web Starter Kit tools in action, this guide walks you through the build process as you add an image, update HTML and CSS, and add some JavaScript to your starter project. If you want a quick peak at what the Web Starter Kit tools can do, skip ahead to this quick summary .

Before you start, make sure you’ve set up the Web Starter Kit . When you are finished the walking through the steps in this guide, this is what you’ll see in your browser:

Track code changes and optimize

When you’re ready to write code, run gulp serve . This tool tracks changes as you code, reloads live changes in your browser, and automatically runs optimization tools specific to the changes made. For example, when you add an image, the image is automatically optimized and loaded in any browser instance open on any device.

Add an image

To see the gulp serve tool in action: add awesome-photo.jpg to the images folder.

$ cp awesome-photo.jpg web-starter-kit/app/images

$ git add awesome-photo.jpg

Add the image to main in index.html :

<main>
  <h1>Hello.</h1>
  <p>Welcome to Web Starter Kit.</p>
  <div><img src="/images/awesome-photo.jpg"></div>
</main>

As you save index.html , watch your terminal. The gulp serve tool runs the image through imagemin and outputs the optimized image in the dist folder.

Reload the browser live to see the image:

Don’t forget to resize the browser to see how the image looks on different device sizes.

Add CSS

When you add style changes, gulp serve runs the gulp-minify-css tool , minifying CSS and injecting it into all connected browsers.

Add this style change to the main.css in web-starter-kit/apps/styles folder:

main {
    margin: 0 auto;
    /* Height of the header */
    padding: 60px 16px 16px 16px;
    font-size: 16px;
    font-weight: bold;
    color: red;
}

Reload and resize the browser to see how the styles look:

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 Guidelines .

$ cd web-starter-kit/app/styleguide/

Here’s a sneak peak at some of the styles covered:

Add JavaScript

The gulp serve tool minifies your JavaScript ( gulp-jsmin ) and detects errors using gulp jshint .

Update index.html and add the newly created script, and a <span> that will be the container where the date is placed:

<main>
    <h1>Hello.</h1>
    <p>Welcome to Web Starter Kit.</p>
    <div><img src="/images/awesome-photo.jpg"></div>
    <span></span>
    <script src="/scripts/app.js" async></script> 
</main>

Create app.js in web-starter-kit/app/scripts :

var span = document.getElementsByTagName('span')[0];
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';
document.body.appendChild(loadTime);

Reload the browser:

Check performance

Now that you’ve added some html, CSS, and JavaScript, it’s time to checkout how the project is performing.

The Web Starter Kit integrates with PageSpeed Insights . 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 gulp pagespeed :

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. The 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.

Access staged content on external devices

The gulp serve tool makes it easy to access a staged version of your content on external devices.

In your terminal, notice two access points: a local address (for example, http://localhost:3002 ) and an externally friendly address for accessing on other devices (for example, http://123.45.67.103:3002 ).

Navigate to the second address on any other device. Any changes you make to your site are automatically pushed to all local instances; you just have to reload.

Use Chrome DevTools to remote debug your code

You can use the full suite of Chrome DevTools (including performance profiling with Timeline) to debug any page in your site on any device. Assuming you can connect your phone to the same network as your development machine, simply load the page on the device using the externally friendly URL returned by gulp serve .

Any changes you make to a page using Chrome DevTools are automatically visible in all open instances of your staged site. Don’t reload a URL, or you will lose DevTools changes.

You can also debug using port forwarding. Port forwarding makes it easy to connect Chrome on Android to a web server running on your localhost, something that some network environments make difficult without some DNS tricks.

Follow the port forwarding set-up instructions (you need to set up remote debugging first). Then enter the desired port number and externally friendly IP address of your staged site:

Summary of Web Starter Kit tools

A quick summary of the Web Starter Kit Tools: