Skip to content

LToyyib/Recipe-main-page-Challenge

Repository files navigation

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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Screenshot

Desktop Screenshot Mobile Screenshot

The above are the screenshots of my solution to the challenge.

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties

What I learned

I learned how to insert more than one content to Psudo selector (::before) { content: '.' counter(li);}. Also, I learn how to make (li) a counter, add color to list marker etc.

To see how you can add code snippets, see below:

<h1>Some HTML code I'm proud of</h1>
.proud-of-this-css {
  ol li::before{
    content: '.' counter(li);
    margin-right: 1.2em;
    text-align: right;
    direction: rtl;
    margin-left: -2em;
    font-weight: bold;
    display: inline-block;
    color:  hsl(14, 45%, 36%);
}
ol li {counter-increment: li}

li::marker{
    color: hsl(14, 45%, 36%);
    font-weight: bold;
    font-family: Outfit;
}
ol {
    list-style-type: none;
    counter-reset: li;
}
tbody > tr:last-child > td {
    border-bottom: 0;
}
}


### Continued development

Responsive Web Design is the area I will like to deleop more


### Useful resources

- [W3Schools](https://www.w3schools.com) - This helped me  with RWD. I really liked this pattern and will use it going forward.
- [Stack Overflow]](https://stackoverflow.com/questions/70927582/how-to-make-and-well-position-html-custom-list-marker) - This is an amazing article which helped me finally understand how to insert more than one content to Psudo selector (::before) { content: '.' counter(li);}.. I'd recommend it to anyone still learning this concept.
-[W3org] (https://www.w3org.com) - This helped me learn psudo element content.

## Author

- Website - [Lawal Toheeb Bayonle](https://github.com/LToyyib)
- Frontend Mentor - [@LToyyib](https://www.frontendmentor.io/profile/LToyyib)
- Twitter - [@Teeamir](https://twitter.com/Teeamir)
- Email  -[Gmail] (lawaltoheeb28@gmail.com)


## Acknowledgments

I really appreciate Frontend moentor for this challenge opportunity, which has helped to learn, unlearn, relearned and learning Web development.