Codecademy exercise for creating breadcrumbs (Navigation Design) - Focused on layout, implementing the breadcrumbs via HTML and CSS. Work on files breadcrumb.css and blueberries.html
The purpose of the project is just personal learning. I may revisit this code to find different solutions or to apply it under other context.
This is a a site for buying groceries. The currently selected product is “Organic Blueberries”. Adding breadcrumbs to the site will include a UI element that hints to some of the questions a customer may have, like Can I buy anything besides blueberries? Is everything on this site organic or can I buy conventional produce? Does this site offer non-produce items? . Users will have a better feeling for what the site provides and the optional attributes of the product they are purchasing.
There are two classes to tell which type of breadcrumb: location and attribute
For attribute breadcrumbs. Specifically, “Organic” is an attribute of these blueberries and we is styled to look like that its an option or filter. Adding classes to the breadcrumb list elements to designate if they are an "attribute" or a "location". And changing the color or setting ::after content to make a “close” notation to tell the user that they can interact with it in a different way from the location breadcrumbs.
The styling is done by assigning the class "breadcrumb" to the unordered list ul and by css displaying them inline and by adding a "/" to separate them using ::before and content.
- The links to the breadcrumbs do not function. Add more links and test them.
- HTML5
- CSS3
NA - It's only coding examples, there's no setup.
Project is: finished, - may come back and improve it, or not.
Based on Codecademy's Learn Navigation Design course