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.

Overview

Links

• Solution URL: https://github.com/norwegJan/recipe-page-main
• Live Site URL: https://norwegjan.github.io/recipe-page-main/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

I learned how to finally master media query for mobile screens 🥳

I learned the important concept of CSS reseting 👨‍🏫👨‍🏫

Some code I'm proud of

@media (max-width: 576px) { body { background-color: white; padding-top: 0; margin-top: 0; } #recipeCard { padding: 0; margin-top: 0; }

    img {
      padding: 0;
      margin: 0;
      border-radius: 0px;
      width: 100%;
      height: auto;
    }

    #textcontent {
      padding: 0.5rem 2.5rem;
      margin-top: 0;
    }

    h1 {
      font-size: 1.9rem;
      padding-top: 1rem;
    }
    h2 {
      font-size: 1.4rem;
    }
  }

Useful resources

• https://www.youtube.com/watch?v=0RX6nvacS7o

• https://www.geeksforgeeks.org/css/what-is-a-css-reset/

  These links helped me understanding the consept of CSS reseting.

Acknowledgments

Big shout out to Darkstar in the Frontend Mentor community who helped me a lot when I struggled with this challenge 🙌