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
    • Screenshot
    • Links
  • My process
    • Useful resources
    • Features
    • Highlights
    • Technologies Used
    • Benefits
  • Author

Overview

Screenshot

Links

• Live Site URL
• Frontend Mentor Profile

My process

Useful resources

• Semantic HTML - This is an amazing article which helped me finally understand semantic HTML tags. I'd recommend it to anyone still learning this concept.
• BEM Methodology - The idea behind it is to divide the user interface into independent blocks. I really liked this pattern and will use it going forward.
• MDN (ARIA) - Accessible Rich Internet Applications (ARIA)
• Flexbox - This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
• Schemas.org - A collaborative, community activity with a mission to create, maintain, and promote schemas for structured data.
• The Open Graph protocol - The Open Graph protocol enables any web page to become a rich object in a social graph.

Features

• Semantic HTML: The page uses semantic HTML tags to enhance readability and accessibility.
• Responsive Design: Adaptable to various screen sizes using CSS media queries.
• Accessible Content: Includes ARIA roles and attributes, Open Graph meta tags for social media sharing, and SEO-friendly descriptions.
• Structured Data: Incorporates schema.org microdata to provide structured information about the recipe (e.g., ingredients, nutrition, cooking time).
• Custom Styling: Styled with Google Fonts and a custom CSS file.

Highlights

• Preparation time, ingredients, and step-by-step instructions.
• Nutritional information table.
• Fully optimized for accessibility and SEO.

Technologies Used

• HTML5: For the structure of the webpage.
• CSS3: For styling the page (using a separate stylesheet).
• Google Fonts: For custom typography (Outfit and Young Serif).
• Open Graph Protocol: For enhancing social media link previews.
• schema.org: For structured data to improve search engine visibility.

Benefits

• Search Engine Optimization: The microdata ensures search engines can understand the content better, improving its ranking and rich snippets.
• Enhanced Usability: Screen readers can now interpret the purpose and structure of the content more effectively.
• Security and Performance: External links are safer with rel="noopener noreferrer".

Author

• Frontend Mentor Profile: jguerra

Happy Coding! 🚀