4: Bootstrap Templates

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.

First Site

Follow along in class. If you miss class, there are some videos below that can catch you up. You'll need:

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.

Publishing

  • https://app.netlify.com/drop

    • Create an account on the site and verify your email address

    • Once logged in, you'll see an area indicated by a dotted line where you can drop a folder

      • If your folder isn't uploading, you may images or other files that are too large. Downsize your images or move unneeded files outside of the bootstrap_project folder

    • Edit your site details so you can change the URL from its randomly-issued name

    • Submit the URL so it can be graded. Remember, if you make further changes, you need to re-publish your site using the following instructions:

Updating your page

You've been seeing your page update on your local machine. That's not on the Internet and the link in your browser won't work on anyone else's machine as it refers to a file on your computer. But we can deploy the website to free host using Netlify.

And then select your site
Go the page that will allow us to update the root folder

Requirements

  • All stock content replaced

  • A color palette implemented uniformly throughout the page and corresponds with the subject of the site

  • Custom header and body fonts that corresponds

  • CSS file formatted into sections with color palette written in a comment at the top

  • CSS rules overwriting theme styles like btn and bg

  • A new section added to the navbar and the body with smooth scroll working to that location

  • A new Bootstrap component taken from the documentation

  • A new CSS class and ID implemented in the CSS and HTML

  • Images (not in conflict with copyright law) successfully added to img folder and added to 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

This comes from a great blog post about "breakpoints"

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

You may have different things to fix than shown in this video, but I hope it shows the process to follow

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