Frontend Mentor - Recipe page solution

This is a solution to the Recipe page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Recipe page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • Useful resources
  • Do you have any feedback for me?
  • Javascipt framework
    • Vue.js + Vite
  • Recommended IDE Setup
  • Customize configuration
  • Project Setup
    • Compile and Hot-Reload for Development
    • Compile and Minify for Production
  • Javascipt framework
    • Vue.js + Vite
  • Recommended IDE Setup
  • Customize configuration
  • Project Setup
    • Compile and Hot-Reload for Development
    • Compile and Minify for Production
  • Author

Overview

The challenge

Your challenge is to build out this recipe page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Want some support on the challenge? Join our community and ask questions in the #help channel.

Screenshot

Links

• Solution URL: Recipe-page
• Live Site URL: Recipe-page-live

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Responsive design using Typography
• Mobile-first workflow
• Vue.js - Js framework

Useful resources

• web.dev - This helped me for making a responsive layout and many more. I really liked this pattern and will use it going forward.
• fedmentor.dev - This is an amazing article which helped me finally understand how to ask for help(and actually get it!). I'd recommend it to anyone still learning this concept.

Do you have any feedback for me?

I’d love to hear your thoughts and suggestions about this project! Whether it’s a bug you’ve found, a feature you’d like to see, or just general feedback, your input is highly valuable to me.

Here’s how you can provide feedback:

1. Report an Issue: If you encounter a bug or problem, please open an issue.
2. Feature Requests: Have an idea for improvement? Let us know by creating a feature request.
3. Email Us: Prefer direct communication? Feel free to send your feedback to https://bsky.app/profile/cornelio30.bsky.social.

I appreciate your support and contributions to making this project better!

Javascipt framework

Vue.js + Vite

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Javascipt framework

Vue.js + Vite

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Author

• Frontend Mentor - @Timex29
• x - @LlagasCornelio
• bsky.app- @cornelio30.bsky.social

Have fun building! 🚀