We’re coming to the end of our HTML/CSS unit. Before we introduce JavaScript and begin focusing on adding interactions and dynamic content to our sites, I want to use this opportunity for you to show off all of the techniques we’ve discussed so far.
Objectives
Use your foundational knowledge of HTML/CSS to organize a collection of distinct items.
Practice creating web layouts using a traditional set of components(header, footer, sidebar, etc.)
Prepare for the Elastic Collections project where you will be organizing a larger set of data you don’t have control over.
Assignment
Create an online collection of music using traditional layout components of a website(read about the Holy Grail Layout in the resources below). You may choose to organize artists, albums, songs, record labels, music genres, etc., but the collection you choose must be comprised of distinct types of data.
There should be a theme to your collection. Try to come up with a bigger narrative to tell based on what you choose to collect.
In your catalog you must have at least 25 types of data to organize(25 artists, or 25 albums, or 25 songs, etc.) You may choose to add additional hierarchies to organize your data(a record label features a series of album released by various artists, and each album consists of a series of individual tracks).
The HTML layout of your catalog must include the following components. The way in which you choose to implement these layouts is up to you(Grid, Flexbox, fixed header, etc.)
Header / Nav
Sidebar
Main content area
Footer
Your catalogs must include images and/or other rich media. Consider using embedded content to enhance your catalog. YouTube videos and Spotify playlists are easy to embed using <iframe> tags.
Objectives
Assignment
Resources