1 of 1

6: Advanced Editing

Learning Targets

I can configure a project folder in a cloud-based file system.
I can customize the elements of an HTML template.
I can publish a completed webpage and share the link with my friends.
I can take feedback on my website and publish an improved draft.

Colors

Inspect and Overwrite

Let's identify a rule that's being used by our theme and overwrite it.

New Bootstrap Component

Let's get back to the Bootstrap documentation and shop for a new component to add to our site.

Revisions

We all have to edit our work. We need to collect feedback, review, make a list, and add improvements to our project. The more you repeat this process, the better your end product (as well as first draft on your next project).

Responsive refinement

If you're not frequently having to look things up (and finding W3Schools) you're not trying out enough new things. @media is one I have to repeatedly look up.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Fine Tuning

Extra Addons

Load Screen

We're going to use jQuery

Our Bootstrap template uses jQuery, which is a really handy JavaScript library. JavaScript is a programming language that runs right inside your browser. Most of what you do with jQuery can be done in plain-old vanilla JavaScript. We use jQuery to make life a little easier.

Add a <div id="cover"></div> on the first line of your <body>. Then at the very bottom, add the following script:

  <script>
    $(window).on('load', function(){
      $('#cover').fadeOut(1000);
    });
  </script>

And we'll add the following code to our custom.css.

#cover {
    /* save a file called loading.gif to your img folder */
    background: url("../img/loading.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 9999;
}

Replacing Images

JavaScript