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

  • Links

• My process

  • Built with
  • What I learned
  • Continued development

• Author

Overview

Links

• Solution URL: (https://github.com/RoxySash/Recipe-Page-Challenge.git)
• Live Site URL: (https://roxysash.github.io/Recipe-Page-Challenge/)

My process

1. Initialized project as a public repository
2. Configured repository to publish your code to a web address.
3. Looked through the designs to started planning.
4. Wrote HTML first then added CSS.
5. Write out the base styles for your project, including general content styles, such as font-family and font-size.
6. Started adding styles to the top of the page and work down. Jumped back and forth for a while.
7. Couldnt lauch the github page had to delete a folder within a folder mishap

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS

What I learned

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

<h1>Some HTML code I'm proud of</h1>

body {
    font-family: "Outfit", sans-serif;
    background-color: hsl(330, 100%, 98%);
    font-size: 16px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 80px;
    line-height: 1.9;
    
}

th,td {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-bottom: 1px solid lightgray;
}

Continued development

This one was a little hard because there were so many different components with different styles. I need to work on table elements. This challenege made me want to do more projects.

I could not deploy my page live for some reason after not finding the answer I double checked the vscode files and realized I had a file within a file. I deleted one then relaunced as github couldnt find my html file within a folder.

Useful resources

• (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_lists/Consistent_list_indentation) - This helped me with indentation. I really liked this solution and will use it going forward.

Author

• Frontend Mentor - @RoxySash