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.
Preview design:
My solution:
- Solution URL: Recipe Page Repo
- Live Site URL: Recipe Page Live
- Semantic HTML5 markup
- CSS custom properties
- Mobile-first workflow
- Flexbox
- Media Queries
I learned a lot from this project, and I will highlight two key points below:
- How to make list markers stay inside the container.
ul, ol {
list-style-position: inside;
}- How to use a selector that applies styles to the first child of a specific type.
.container > p:first-of-type {
/* property: value; */
}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.
- Website - Github
- Frontend Mentor - @lia-oliveira