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
  • Link
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Link

• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow

What I learned

I learned how to use pseudo-classes and pseudo-elements like :hover, :last-child, and ::marker. I also used the > selector for direct selection. To see how you can add code snippets, see below:

.preparation ul li::marker {
  color: hsl(332, 51%, 32%);
}
section ul,
ol li {
  padding: 5px 0px;
}

Continued development

I would like to use UI frameworks like Tailwind and Bootstrap for CSS in the future. I also want to use more pseudo-classes and pseudo-elements in my CSS code.

Useful resources

• MDN - This helped me for HTML tag.
• W3Shools - This helped me for CSS selector and pseudo element and classes.

Author

• Github - Akelpha
• Frontend Mentor - @Akelpha