This was my first experience using solely HTML and CSS to build a working webpage/dashboard, and, to be honest, it was quite difficult for me.
Still, "data is more powerful when we share it with others!"
Using visualizations from a past assignment, I created individual pages for each plot with its corresponding explanation, and "a means by which we can navigate between them". The landing page has a comparison of all plots, and the data page has a table of the data - our foundation. It is seven pages total, and has a navigation menu on every page with: a clickable name of the site that returns the user to the home page; and "Plots", "Comparisons", and "Data" dropdowns respectively. Finally, the web page is made to be responsive ("using media queries") to differently sized devices viewing the site.
The website (that I admittedly am not overly proud of despite a serious amount of hours put in) is deployed to GitHub pages. The URL is https://ognjenstrbanovic.github.io/Web-Design-Challenge/.
You may also see what the home page looks like below:
Objectives for Web Unit:
- Gain a high-level understanding of HTML, CSS, and JavaScript and what their roles are when creating websites.
- Understand the basic parts of an HTML web page and how to create one from scratch.
- Learn to cover and utilize some of the most common HTML tags and selectors.
- Understand how to deploy HTML webpages to the internet using GitHub Pages.
- Understand the basics of CSS styling.
- Position HTML elements on a webpage using CSS.
- Be able to discuss media queries, the technology that is used to create the responsive Bootstrap grid.
- Understand the Bootstrap Grid and discover how to utilize it to position the elements on the page.
- Discover how to quickly and easily build web pages using pre-built Bootstrap components.