⭐️ Cookbook ✌️ The project of Module 2 is all about cooking. Yeah, you heard right! But your ingredients won’t be 🥔 potatoes, 🥕 carrots, or 🧅onions – you will be brewing a “cookbook” with HTML, CSS, and JavaScript. Instructions Technologies In this project you will use the following tech stack:
HTML5
CSS3
Styling Framework/Library (Bootstrap*, Bulma, Foundation)
*In the next exercise of this course you will learn more about Bootstrap. Project Overview
Create a static list of recipes
A recipe must be composed of: Title, Description, Image, Table with ingredients
Example Level 1 – Basic HTML & CSS structures
A basic list of recipes
Each list of recipes must have:
Title: Must visually stand out
Description – Not as important as title, still needs enhancements
Image
Table with ingredients
Level 2 – Styling Framework / Library
Enhance the style with a library and/or framework
Add responsive dimensions on table cells and image
Level 3 – CSS Hover animations
When the user hovers the recipe image with the mouse, the recipe title must be displayed on top of it
Level 4 – Vanilla JavaScript DOM manipulation (just a pinch!)
Add a “Share” button underneath the recipe
When the user clicks on it, an alert with window (JavaScript alert) pops up with the URL of the page
⭐️ Checkout our progress here! ⭐️
↓ ↓ ↓
https://trello.com/invite/b/UMA0CtQ4/ATTIcc1f1b8a21156711d78cede80903b82321F88140/cookbook
Here's our WireFrame: