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

• Links
• Built with
• What I learned
• Continued development
• Useful resources
• Author
• Acknowledgments

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• table
• list

What I learned

During this challenge, I learned:

• How to use the

  ---

  tag properly (thanks to MDN).

• How to apply the :not pseudo-class in CSS to style specific elements efficiently.

Exemples:

<hr />

tbody:not(:first-child) {
  border-top: 4px dashed hsl(332, 51%, 32%);
}

Continued development

Next, I would like to deepen my understanding of:

• Media queries for building fully responsive designs.
• Relative units in CSS to improve scalability across different screen sizes.

If you have any resources that could help me, please feel free to share!

Useful resources

Mdn web doc My main reference for understanding the proper use of HTML and CSS during this challenge, especially for the

---

element.

Coder coderHelpful videos for beginner-friendly HTML and CSS concepts.

Super Simple dev Clear and beginner-friendly explanations on CSS layout and workflow.

Author

• Frontend Mentor - @Jeanclaude09-dev
• GitHub - @Jeanclaude09-dev
• instagram - @iamje_nclaude

Acknowledgments

A friend of mine helped me a lot throughout this challenge. Unfortunately, I can't share their name or contact, but I am very grateful for their guidance.