Getting started with Project Two

Shoes standing in front of pink text on street saying "start here" — Photo by Gia Oris

Project Two Folder and File Structure

To get started, navigate to the project-two folder in your course file structure.

Panel Folders

You’ll also see a folder for panel-one, panel-two, and panel-three.

Think of each folder for each panel as its own separate miniature site. Even though all three panels/sites will be powered by Bootstrap, each should be entirely separate from the other. Each should contain:

Its own separate index.html
Its own separate folder structure (i.e., a css, js, and img folder)
Its own separate copies of all necessary files in those folders (bootstrap.css, etc.)

This is an important best practice for two reasons:

If you need to move panels around, you won’t have to worry about breaking any links to images, JavaScript, or CSS. (i.e.: your file path will always be “go into XX folder and find XX file” rather than going up and out of the current subdirectory).
You’ll be able to compress (zip) the folder for a panel, and all of the dependent files will travel with it. This is especially helpful if you’re sending the panel to your instructor for troubleshooting!

Creating local copies of Bootstrap’s CSS and JavaScript files

Note for Fall ’24 students: This is optional! It’s good to know the benefits of downloading local CSS and JS files, but for the purposes of this project – I recommend that you use the links.

For this project, it’s a good idea to move from using copies of Bootstrap’s CSS and JavaScript files served by a CDN to locally stored copies. Why?

First, it allows you to work offline. Helpful!
Second, it reduces external dependencies. For your site to function properly when linking to CDN-hosted files, you’re betting that a server besides your own is up and running.1
Third, the CDN files are really intended for rapid development purposes, not for production use. It’s not quite hotlinking, but the concept is similar.

Thankfully, replacing the CDN files with local copies is super easy!

Grab the Starter Template

<!doctype html>
<html lang="en">  
<head>    
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width, initial-scale=1">    
<title>Bootstrap demo</title>       
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>    
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">  
</head>  
<body>        
<h1>Hello, world!</h1>  
</body>
</html>

`bootstrap.css`:

Fall ’24 Students – this is optional

Go to getbootstrap.com → Download → Compiled CSS and JS → Download.
Unzip the file, go to the css folder, and find bootstrap.css
Drag bootstrap.css and bootstrap.min.css 2 into the css folder for panel-one
In your index.html, delete the CDN link (including the integrity and cross-origin attributes) and link the local copy of bootstrap.min.css

Your final result will look like this:

<link rel="stylesheet" href="css/bootstrap.min.css">

Now, we’ll work on the JavaScript file. (Again, this is optional. You can just use the linked JS)

`bootstrap.bundle.js`:

Fall ’24 Students – this is optional

If you have not already: Go to getbootstrap.com → Download → Compiled CSS and JS → Download.3
Unzip the file, go to the js folder, and find bootstrap.js and Unzip the file, go to the js folder, and find bootstrap.bundle.js and bootstrap.bundle.min.js
Drag bootstrap.bundle.js and bootstrap.bundle.min.js into the js folder for panel-one
In your index.html, scroll down to the JavaScript file just above the closing body tag. This bootstrap.bundle.min.js file will replace the script file that calls to the CDN version of bootstrap.js.
Delete the CDN link (including the integrity and cross-origin attributes for the script file and link the local copy of bootstrap.js
- Make sure that you don’t delete the closing </script> tag!

Once you’re done with this you can save your index.html. You now have a perfect starter template to get going on Panel One!

<! doctype html> 
<html lang="en">
     <head>
     <! -- Required meta tags --> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

     <! -- Bootstrap CSS -->
     <link rel="stylesheet" href="css/bootstrap. css"> 
     <link rel="stylesheet" href="css/custom. css">

     <title>Hello, world!</title> 
</head> 
<body>

     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper. js, then Bootstrap JS -->                               <script src="js/jquery-3.4.1.slim.min. js"></script> 
     <script src="js/popper.min.js"></script> 
     <script src="js/bootstrap. js"></script> 
</body> 
</html>

Adding Bootstrap components and customizing with a custom.css

In much the same way you did with your Bootstrap Playground, explore the bounty of offerings at getbootstrap.com and use them to start constructing your Panel One to spec.

Then, customize your site with a custom.css 4. You might even include some custom media queries!5

Granted, this is a reasonably safe bet, but still, it’s easy to de-risk completely!↩
Why include both? (We’ll go through this again for the JavaScript in a minute, too.) The non-minified version of the files is easier to read if you ever need to look through them to learn more about how they work, but the minified versions load more quickly. So, non-minified files for reference, and minified files for performance.↩
You should have just done this for the CSS steps, but if you’re skipping around, you may need to download the file↩
Remember, your custom.css will be added to your HTML document right under the bootstrap.css stylesheet↩
If you’re extra-good and promise only to look at it for reference and not just copy and paste, here’s a start of a sample Panel One that’s headed in the right direction.↩