Using HTML and Bootstrap I built and deployed a web page to visualize an analysis performed on weather data comparing the effect of latitude on several other primary weather indicators. Take a look the deployed site Here!

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contact
5. Acknowledgements

About The Project

In this project we created an interactive and responsive web page to serve as a dashboard to display analysed weather data in a user friendly way. This project was built using HTML5 and Bootstrap to build the frame work then to make it responsive to any screen size. The homepage shares a beif introduction the dashboard and clicking into the visualizations themselves will give a more detailed discription the specific graph.

Built With

• HTML5
• Bootstrap

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

It is important to make sure that you have these files refrenced in the head of your HTML file or nothing will show when you try and run the Bootstrap elements.

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384 MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Installation

1. Clone the repo

   git clone https://github.com/JohnShuford/Web-Design-Challenge

2. Get to editing the HTML files in your favorite text editor! I recomend Visual Studio Code

Usage

Here is a code example of a bootstrap navigation bar! They are faily simple to use and customize to any need you may have. Just make sure that you are calling all of the requisite files in the header of your HTML page.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="index.html">
        <div class="box skyblue">
          <img src="Resources/Assets/globe2.svg" width="25" height="25" class="d-inline-block align-top" alt="" loading="lazy">
          Latitude
        </div>
      </a>
      </button>
      <div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active mr-auto">
            <a class="nav-link" href="docs/comparisons.html">Comparisons<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="docs/data.html">Data<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="comparisons.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Plots
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="docs/vsCloudiness.html">vsCloudiness</a>
              <a class="dropdown-item" href="docs/vsHumidity.html">vsHumidity</a>
              <a class="dropdown-item" href="docs/vsTemprature.html">vsTemprature</a>
              <a class="dropdown-item" href="docs/vsWindSpeed.html">vsWindSpeed</a>
            </div>
          </li>
        </ul>
      </div>

For more Bootstrap documentation follow this link! https://getbootstrap.com/docs/4.1/getting-started/introduction/

Contact

John Shuford - LinkedIn - johnshuford@me.com

Project Link: https://github.com/JohnShuford/Web-Design-Challenge

Deployed: https://johnshuford.github.io/Web-Design-Challenge/

Acknowledgements

• This project was completed for and under the supervision of the Trilogy team opperating the Data Analytics Bootcamp through the University of Denver.
• Shoutouts to Svitlana Malenfant (Instructor)