Recipe Page Challenge 🍽️

This project is a solution to the recipe page challenge from Frontend Mentor.

New Things I've Learned and Practiced

CSS Grid

• Utilized CSS Grid to create a flexible and responsive layout for the recipe page.
• Learned how to define grid containers and grid items.
• Practiced using grid properties such as grid-template-columns, grid-template-rows, gap, and place-items.

Using @font-face

• Learned how to import custom fonts using the @font-face rule.
• Applied custom fonts to different elements on the page.
• Ensured correct file paths and formats for the font files.

List Item Pseudo Elements

• Used the ::marker pseudo-element to style list item markers (numbers and bullet points).
• Applied custom colors to the list item markers without affecting the text color.

Tables

• Styled tables to display nutritional information.
• Learned how to add horizontal lines under each row using CSS.
• Practiced using properties like border-collapse, border-bottom, and padding to achieve the desired table design.