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
  • Useful resources

Overview

Screenshot

Desktop:

Tablet:

Mobile:

Links

• Live site: https://michahuhn.github.io/frontendmentor-recipe-page
• Challenge solution: https://www.frontendmentor.io/solutions/recipe-page-using-vuew-k3V9tIEiN0

My process

Built with

• Vue
• SCSS
• Custom CSS properties
• Semantic HTML5 markup
• Mobile-first workflow
• Responsive design
• CSS Grid

What I learned

• I learned how to keep track of every detail in the Figma mockups.
• I made the page responsive by using fluid design and media queries.
• I also learned how to style lists and tables with CSS.

Useful resources

• How to create and style lists with HTML and CSS - YouTube - How to style lists with CSS.
• Get your stylesheets more organized with Sass partials - YouTube - My SCSS folder structure is inspired by this video.