Omelette Recipe Page using HTML and CSS

Solution retrospective
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Creixz
Hello my friend, congratulations for finish this challenge, let me show you some details that can help you to improve your code.
- It's better to use good classnames that can make your code more understandable, I use BEM like this:
<section classname= 'card'> <article classname='card__title'> <p class='card__title-description'>Your text here.</p> </article> </section>
- Use
margin-left=auto
andmargin-right=auto
to center your card. - It's better to use rem instead of % or pixels.
- Use max-width instead of width, it will look better.
- @Hadisuhail188
The best way to distinguish between mobile and desktop width sizes involves using media queries in your CSS.
eg: @media only screen and (min-width: 768px) { /* Desktop-specific styles */ .container { width: 80%; margin: 0 auto; padding: 20px; } }
the min-width 768 is just an example so you might have to make some changes.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord