Frontend Mentor - Recipe page challenge 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

• Overview
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

Links

• Solution URL: (https://github.com/shalri/fm-recipe-page)
• Live Site URL: (https://shalri.github.io/fm-recipe-page/)

My process

Built with

• React
• Semantic HTML5 markup
• Tailwind
• Prettier Tailwind Plugin
• ViteJS

What I learned

I used React to implement the solution for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with React alongside the challenges.

It was fun to work with lists on this project. Tailwind has a lot of utility classes that could customize list layout so it really helped.

This challenge showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

Continued development

I look forward to doing more challenges from Frontendmentor.io. I like learning and practicing new concepts.

Author

• Website: FScode
• Frontend Mentor: Shalri
• Github: Shalri