Front End HTML Web Application

Overview

# Web Design Homework - Web Visualization Dashboard (Latitude) ## Background Data is more powerful when we share it with others! Let's take what we've learned about HTML and CSS to create a dashboard showing off the analysis we've done.  ### Before You Begin 1. Create a new repository for this project called `Web-Design-Challenge`. **Do not add this homework to an existing repository**. 2. Clone the new repository to your computer. 3. Inside your local git repository, create a directory for the web challenge. Use a folder name to correspond to the challenge: **WebVisualizations**. 4. Add your **html** files to this folder as well as your **assets**, **Resources** and **visualizations** folders. 5. Push the above changes to GitHub or GitLab. 6. Deploy to GitHub pages. ## Latitude - Latitude Analysis Dashboard with Attitude For this homework we'll be creating a visualization dashboard website using visualizations we've created in a past assignment. Specifically, we'll be plotting [weather data](Resources/cities.csv). In building this dashboard, we'll create individual pages for each plot and a means by which we can navigate between them. These pages will contain the visualizations and their corresponding explanations. We'll also have a landing page, a page where we can see a comparison of all of the plots, and another page where we can view the data used to build them. ### Website Requirements For reference, see the ["Screenshots" section](#screenshots) below. The website must consist of 7 pages total, including: * A [landing page](#landing-page) containing: * An explanation of the project. * Links to each visualizations page. There should be a sidebar containing preview images of each plot, and clicking an image should take the user to that visualization. * Four [visualization pages](#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](#comparisons-page) that: * Contains all of the visualizations on the same page so we can easily visually compare them. * Uses a Bootstrap grid for the visualizations. * The grid must be two visualizations across on screens medium and larger, and 1 across on extra-small and small screens. * A ["Data" page](#data-page) that: * Displays a responsive table containing the data used in the visualizations. * The table must be a bootstrap table component. [Hint](https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables) * The data must come from exporting the `.csv` file as HTML, or converting it to HTML. Try using a tool you already know, pandas. Pandas has a nifty method approprately called `to_html` that allows you to generate a HTML table from a pandas dataframe. See the documentation [here](https://pandas.pydata.org/pandas-docs/version/0.17.0/generated/pandas.DataFrame.to_html.html) The website must, at the top of every page, have 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). The nav must have similar behavior as the screenshots ["Navigation Menu" section](#navigation-menu) (notice the background color change). Finally, the website must be deployed to GitHub pages. When finished, submit to BootcampSpot the links to 1) the deployed app and 2) the GitHub repository. Ensure your repository has regular commits (i.e. 20+ commits) and a thorough README.md file ### Considerations * You may use the [weather data](Resources/cities.csv) or choose another dataset. Alternatively, you may use the included [cities dataset](Resources/cities.csv) and pull the images from the [assets folder](Resources/assets). * You must use Bootstrap. This includes using the Bootstrap `navbar` component for the header on every page, the bootstrap table component for the data page, and the Bootstrap grid for responsiveness on the comparison page. * You must deploy your website to GitHub pages, with the website working on a live, publicly accessible URL as a result. * Be sure to use a CSS media query for the navigation menu. * Be sure your website works at all window widths/sizes. * Feel free to take some liberty in the visual aspects, but keep the core functionality the same.

Front-End-HTML-Web-Application was published by riggiobill and stands out as one of the more thoughtfully crafted navbars implementations in the open source ecosystem.

It follows progressive enhancement principles: the markup remains semantic without JavaScript, while the interactive layer adds momentum, focus management, and keyboard accessibility for users who expect more than the default browser behavior.

The styling leans on modern CSS — custom properties, fluid spacing, and logical properties — so the snippet adapts cleanly to dark mode, right-to-left layouts, and constrained viewports without requiring a full design-system rewrite.

On the JavaScript side the code prefers small, dependency-free helpers over framework lock-in. That means you can paste it into a Vite, Astro, Laravel, Rails, or plain HTML project and ship it the same afternoon.

Because the snippet was extracted from a real production-grade repository it already accounts for the awkward edge cases — long labels that wrap to two lines, touch devices that fire spurious focus events, and assistive technology that needs a meaningful aria role.

Use it as-is for a prototype, or treat it as the starting point for a more opinionated component library. Either way, the heavy lifting around timing, easing, and state has been done for you.

Why this snippet works

The Front End HTML Web Application component succeeds because it respects the boring constraints first. The markup is semantic, the styles fall back gracefully when JavaScript is unavailable, and the visible state never lies about what the underlying control is doing. Frontend code that follows that order tends to age well across browser releases, framework migrations, and design refreshes.

It is also small enough to read in a single sitting. There is no hidden orchestration layer, no compiled output you have to trust on faith, and no opinionated build pipeline you have to adopt. Drop the snippet into a fresh HTML file, open it in a browser, and you can see exactly what every line of code does.

How to integrate

Copy the block below into the relevant template in your project. If you already use a CSS reset or a design-system token file, you can swap the literal colour values for your own custom properties — the structural rules will continue to work.

For projects on a JavaScript framework, drop the markup into a presentational component (a .jsx, .vue, or .svelte file) and move the styles into your preferred styling layer. Keep the aria-* attributes intact when you do so; they are doing real accessibility work, not decorative prop-passing.

The code

<nav class="sf-nav">
  <a class="sf-brand" href="#">Front-End-HTML-Web-Application</a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
.sf-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #fff; box-shadow: 0 1px 0 #e2e8f0; }
.sf-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.sf-nav a { color: #1e293b; text-decoration: none; font-weight: 500; }
.sf-brand { font-weight: 700; color: #6366f1; }
</style>

Customising it for your brand

Most teams will want to retune two things before shipping: the colour palette and the timing curve. The colour values in the snippet were chosen to read well against a neutral background — replace them with tokens from your own design system to keep the component on-brand. The timing curves use values that feel responsive on both desktop and mobile; if your product has a more deliberate motion language, slow them down rather than speeding them up. Faster is rarely better.

It is also worth checking the snippet against the prefers-reduced-motion media query. If the component animates, wrap the animation rules in @media (prefers-reduced-motion: no-preference) so users who have asked for less motion are not subjected to extra movement they did not opt into.

Credits

This snippet was indexed from https://github.com/riggiobill/Front-End-HTML-Web-Application, originally published by riggiobill. SnippetForge does not host the original source code; we link to the canonical repository so you can star, fork, and follow the author for future updates.