Recipe Page

📋 Overview

Welcome to the Recipe Page project! This simple, static website was created using Angular as part of the Frontend Mentor learning path. The goal of this project is to internalize the basics of Angular by building a clean and responsive recipe page, despite it being a straightforward static site.

🚀 Project Goals

• Angular Basics: Practice fundamental Angular concepts, including components, modules, and templates.
• Responsive Design: Create a recipe page that looks great on all devices, from desktops to mobile phones.
• Clean Code: Write modular and maintainable code using Angular, even for a static site.
• Styling: Use CSS to create an aesthetically pleasing and user-friendly recipe layout.

🛠️ Tech Stack

• Angular: Used for structuring the project and applying the basics of component-based architecture.
• TypeScript: Angular's primary language, ensuring type safety and better code management.
• HTML5: For creating the structure of the recipe page.
• CSS3: For styling the recipe page and ensuring responsiveness.
• Git & GitHub: For version control and project hosting.

💡 Key Features

• Responsive Layout: The page is designed to be responsive, providing a consistent user experience across different devices.
• Simple Angular Setup: Utilizes Angular's app component to structure a basic static page.
• Clean Design: The page features a minimalist design focused on showcasing recipes.

📚 Learning Outcomes

By completing this project, you will reinforce your understanding of:

• Angular component basics: Creating and using a root component.
• Structuring an Angular project: Understanding Angular's project structure, even for simple applications.
• Responsive web design: Using CSS in an Angular environment to create layouts that work on all devices.
• Static site development with Angular: Building a basic static site using Angular's powerful framework.

📝 How to Use

1. Clone the repository to your local machine:

   git clone /~https://github.com/mariokreitz/recipe-page.git

2. Navigate into the project directory:

   cd recipe-page

3. Install the dependencies:

   npm install

4. Start the development server:

   ng serve

5. Open your browser and go to http://localhost:4200 to view the recipe page.

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.

🙏 Acknowledgements

• Frontend Mentor: For the inspiration and challenge.
• Angular: For providing a robust framework that makes learning fun.
• You: For taking the time to build and explore this project!