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
• Author

Overview

Screenshot

Preview design:

My solution:

Links

• Solution URL: Recipe Page Repo
• Live Site URL: Recipe Page Live

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• Flexbox
• Media Queries

What I learned

I learned a lot from this project, and I will highlight two key points below:

1. How to make list markers stay inside the container.

ul, ol {
  list-style-position: inside;
}

2. How to use a selector that applies styles to the first child of a specific type.

.container > p:first-of-type {
  /* property: value; */
}

Continued development

I plan to study ways to automate the calculation of margins, paddings, and other measurements, at least during the development phase. Using the CSS calc() function could be a good approach, as recalculating everything manually after each change is tedious and unproductive.

Additionally, I need a Pro account on Frontend Mentor. Not having access to the Figma files makes even simple projects like this take considerably more time to complete.

Author

• Website - Github
• Frontend Mentor - @lia-oliveira