Frontend Mentor - Recipe page solution

This is a solution to the Recipe page challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.

Table of contents

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

Overview

Screenshot

Links

• Solution URL: github.com/RayyanNafees/fm-lvl-1
• Live Site URL: Github Pages , Surge

My process

I started out by first defining all the colors & typography to my themes.css file with al the default styles. And then added all the markup roughly in the html and started customizing each section individually in style.css

Built with

• Semantic HTML5 markup
• CSS pseudo elements
• CSS pseudo selectors
• Mobile-first workflow

What I learned

1. List Markers

I learnt using the li::marker CSS selector for customizing lists

li::marker {
  color: papayawhip;
}

2. Bordered tables

I learnt on how to create those beautiful bordered tables

table {
  border-collapse: collapse;
  width: 100%;

  td {
    border-bottom: 1px solid var(--light-grey);
    padding: 0.5ch 1ch;
  }

  tr:last-child td {
    border-bottom: none;
  }
}

Continued development

I want to continue my learning and development practice on mobile-first & responsive units & media queries

Useful resources

• CSS tricks li element - This helped me knowing how to style the list marker.
• A Guide to Styling Tables - This is an amazing article which helped me finally understand customizing tables. I'd recommend it to anyone still learning this concept.

Author

• Website - RayyanNafees
• Frontend Mentor - @RayyanNafees
• Twitter - @NafeesRayyan
• Github - RayyanNafees