6: Advanced Editing

Previous5: Collaboration NextPublish Static HTML

Last updated 1 year ago

Was this helpful?

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

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

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

Fine Tuning

Extra Addons

Load Screen

We're going to use jQuery

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

Previous5: Collaboration NextPublish Static HTML

Last updated 1 year ago

Was this helpful?