Start with

• bakground color
• border shadow etc

• Articles
• Recipies
• Add recipie

There could be two rows of recipes for example

Maybe a modal saying Your recipe is saved. Looking at course example it could be two steps for adding a picture or just a section opening underneath. Start without the image part

• There should be a link in the menu and also a button from the first page

Use the smooth fluid typography:
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
To make the fonts smooth

Create the CSS for responsive cards to be used for recipies.

The responsive images in the course example was 1920, 960 and 480 which are way too big for the cards, maybe that can be used for the hero image instead and the separate images for the recipies page.

In the site kokaihop the card images are between 270-300 and are getting the largest about ~900px.

The page was not updated with the new footer
Put some content in the page.

This could be displayed differently depending on device size

The leaf and the heart

• Make a tooltip for leaf icon
• Add checkbox for leaf icon in form

Each image should have a folder with the different resolutions

Some heading, a recipe

Create responsive cards for articles with another layout for example image on the right and text on the left.

Starting with some mobile friendly CSS for the main content of the site, look over the classes in the structure of the document and the semantics

Make sure there is adjustments for tablet

Navigation bar

Hero image should be responsive with different resolutions

Create a sticky footer on the page

Create the semantic structure of a page

There are three recipe cards in the home page that should be clickable. Each click should go to a recipe page. Look into parameters in order to use the same html page and not duplicate too much.

The typography.
The font seems very large sometimes

Clicking on an article should lead to a page for the specific article: