Recipe Page


Role:

Developer

Coding Tool:

Glitch

Languages:

HTML & CSS

Timeline:

September 2024

Course:

Web Development

Click here to checkout the HTML and CSS code!

Click here to checkout the the live site!

This project was developed for my Web Development course and focused on creating a clean, structured recipe webpage using only HTML and CSS. The main objective was to demonstrate a strong understanding of semantic HTML elements, content hierarchy, and custom styling; while creating a page that is both functional and visually engaging.

The recipe page includes key parts such as an image of the dish, a title, a list of ingredients, and step by step cooking instructions. I used semantic HTML tags to structure the content clearly and meaningfully, ensuring the page is accessible and easy to navigate. CSS was used to style the page with attention to layout, spacing, typography, and overall visual balance.

Responsiveness was also a priority in this project. I implemented layout techniques to ensure the page remains user-friendly across different devices, without flexboxes or grids, and utilizing consistent styling rules. The goal was to present the recipe content in a simple, digestible way while keeping the design clean.

This project helped reinforce my understanding of fundamental web development skills and the importance of HTML structure, clean code, and thoughtful design in building static pages.