Getting started with Project Two_Emuel_Version

Project Two Folder and File Structure

To get started, create three folders: 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 (images, custom 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!

Grab the Starter Template

To get started, open Visual Studio Code and create a new file. Save it as index.html in your panel-one folder.

Next, head over to Bootstrap to copy the Bootstrap Starter Template with CDN links to both the Bootstrap css and js files (you have done this before).

• Click “Read the Docs”
• Scroll down to “Quick Start”
• Copy the code and paste it into your index.html file

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.css1. You might even include some custom media queries!2