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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

Screenshot

Links

• Solution URL: Frontendmentor/iliAsghar/recipe-page
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Desktop-first workflow

What I learned

this challange was a harder one of the "newbie" challanges in my opinion. i had fun setting the typography,and making the page responsive.

in this challange, i tred my best to stick with the BEM naming convention .

<h3 class="nutrition__title">Nutrition</h3>
      <p class="nutrition__text">The table below shows nutritional values per serving without the additional fillings.</p>
      <table class="nutritions__table">
        <tr>
          <td class="nutrition__name">Calories</td>
          <td class="nutrition__amount">277kcal</td>
        </tr>
      ...
      </table>

to make the page responsive, i tried not using Media Queries ; since in my knowledge, a web page is responsive by default, and it's best to keep it that way and let the browser do the hard work.

these are some of the things i did to make the page responsive :

• first i set a width 100% and a max-width on the main conrtainer to ensure it fits the width on smaller screen sizes . i also used Calc() function for my padding and margins to have some whitespace in smaller screens :

.recipe-container {
  ...
  width: 100%;
  max-width: 60rem;
  padding-block:  min(max(0px , calc(100vw - 60rem)) , 3rem);
  margin-block: min(10rem , max(0px , calc( (100vw - 60rem) / 2)));
  ...
  }

• i then wrote a Media Query to change my container's border-radius and my <img>'s width:

@media screen and (max-width: 960px){
  .recipe-container {
    border-radius: 0;
  }
  .recipe__img {
    border-radius: 0;
    width: 100vw;
  }
}

Continued development

some of the things that i would love to get better at are designing a responsive layout and increasing my speed of styling a page.

Author

• Frontend Mentor - @iliAsghar
• Twitter - @iliAsghar
• Codepen - @ili-Asghar