cmdenys / web-design-with-bootstrap

Designed a responsive web page using html, Bootstrap, and CSS. The page features a navbar with active links to the homepage, a drop-down menu for different plots, a link to a html data table, and a link to a comparisons page. The main page contains a summary and visualizations containing links with further information about each. Bootstrap was used to create the layout and CSS was used for additional styling.

For this project, a visualization dashboard website was created using visualizations created in a previous assignment concerning weather data.

Included in the website are:

A landing page containing:

• An explanation of the project.
• Links to each visualizations page, with a sidebar containing preview images of each plot and link that takes user to that visualization.

Four visualization pages, each with:

• A descriptive title and heading tag.
• The plot/visualization itself for the selected comparison.
• A paragraph describing the plot and its significance.

A "Comparisons" page that:

• Contains all of the visualizations on the same page for easy comparison.
• Uses a Bootstrap grid for the visualizations.

A "Data" page that:

• Displays a responsive table containing the data used in the visualizations.
• Contains data from a .csv file as HTML, converted to HTML.

---

At the top of each page, the website contains a navigation menu that:

• Has the name of the site on the left of the nav which allows users to return to the landing page from any page.
• Contains a dropdown menu on the right of the navbar named "Plots" that provides a link to each individual visualization page.

  

• Provides two more text links on the right: "Comparisons," which links to the comparisons page, and "Data," which links to the data page.
• Is responsive (using media queries).