recipe-page

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

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

Overview

Screenshot

Desktop

Mobile

Links

• Solution URL: Solution
• Live Site URL: Demo

My process

Built with

• Semantic HTML5 markup
• Mobile-First design
• Flexbox
• Grid

What I learned

Adding Border to Table Rows:

I encountered a challenge with adding a border to table rows <tr>. It worked when applied to <td> elements but not to <tr>. After some research, I learned about the border-collapse property, which allows borders to be applied to table rows effectively.

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid #ddd;
}

Useful resources

• CSS border-collapse Property - This helped me understand how it works and its syntax.

Author

• Website - Som3aware.vercel.app
• Frontend Mentor - @ahmedsomaa
• Twitter - @som3aware