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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

• Solution URL: link
• Live Site URL: link

1. I started by obeserving figma design for desktop, tablet, and mobile screens
2. I coded the HTML of the project
3. I set the fixed style-guide of the project in root element in css
4. I begin styling the card using "Mobile-First" Strategy
5. Then adjusting the responsitivity for tablet and desktop versions.

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid
• Mobile-first workflowalt text

• This is the first time I deal with CSS grid, It helped me style columns of the last section of the card easily. setting the column gap and the percentege between the two columns.

.row {
  display: grid;
  grid-template-columns: 35% 65%;
  align-items: start;
  margin: 0px 0px var(--spacing-150) 0px;

  column-gap: 2rem;
}

• I learned how to handle different screens in mobile-first strategy, without adopting many properties for adjusting the responsitivity.

I need to practice CSS grid more.

Frontend Mentor - @Fikri-20