Recipe page solution

This is my solution to the "Recipe page" challenge on Frontend Mentor.

Table of contents

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

Overview

The challenge

In this practice the card must be able to adjust its size depending on the width of the device where it is viewed.

Screenshot

Links

• Solution URL: Recipe page build with HTML and CSS
• Live Site URL: Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• @Font-face
• Modern CSS Reset (Piccadilli)

What I learned

Instead of changing the width of the card using media queries, it was allowed to scale its size freely, limiting its max-width at rem.

CSS Specificity Graph

Continued development

Continue learning about:

• Accesibility
• Rem/ems units

Useful resources

• The Surprising Truth About Pixels and Accessibility - I found this post that I think is quite interesting, it has examples.

• Modern CSS Reset - Andy Bell - option to reset browser styles in modern web development

Author

• Frontend Mentor - @oppahero