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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Desktop

Mobile

Links

• Live Site URL: https://hamdmoin.github.io/recipe-template/

My process

Built with

• HTML5 markup
• CSS
• CSS Flexbox
• CSS media query

What I learned

I learned what are media queries and their use in making responsive web pages

Example of media queries being used in the solution:

@media only screen and (min-width:376px)
{
  body{
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

I also learned how to use and style <ul> , <ol> and <li> tags in html and CSS

Useful resources

• Geeksforgeeks - This website helped me understand more about <ul> and <li> tags and also helped me in understanding media queries
• Stack overflow - This website helped me in solving questions I had during the project

Author

• Instagram - @hamdmoin
• Frontend Mentor - @hamdmoin