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.
- Solution URL: My solution
- Live Site URL: Live link
- Semantic HTML5 markup
- CSS custom properties (e.g.,
@font-face, CSS variables, utility classes) - Flexbox
- Mobile-first workflow with media queries
In this project, I gained a deeper understanding of the following concepts:
- Font Integration: Learned how to use
@font-facewithfont-display: swapfor better web performance. - Custom List Markers: Implemented personalized list markers using the
::beforepseudo-element in CSS.
Here's a sample of code I'm proud of:
<figure class="image-container">
<img
src="./assets/images/image-omelette.jpeg"
alt="Simple Omelette"
class="h-full" />
</figure>@font-face {
font-family: "Outfit";
src: url("./assets/fonts/outfit/Outfit-VariableFont_wght.ttf") format("truetype");
font-weight: 400 600;
font-display: swap;
}
@font-face {
font-family: "Young Serif";
src: url("./assets/fonts/young-serif/YoungSerif-Regular.ttf") format("truetype");
font-weight: 400 600;
font-display: swap;
}
ul {
padding-bottom: 25px;
list-style-type: none;
}
ul li::before {
content: ". ";
color: var(--rose-800);
margin-right: 20px;
font-weight: 600;
}In future projects, I plan to:
- Improve accessibility features, such as ARIA roles and more semantic HTML.
- MDN Web Docs - A comprehensive resource that helped me better understand
@font-faceand CSS custom properties. - CSS-Tricks - This site provided useful tips on how to improve the layout using Flexbox and media queries.
I would like to thank the Frontend Mentor community for providing feedback and suggestions that helped me refine our skills.