/recipe_page_main

Primary LanguageHTML

Frontend Mentor - Recipe Page Solution

This is a solution to the Recipe Page challenge on Frontend Mentor. This challenge involves building out a recipe page and ensuring that it is accessible and responsive across devices.

Table of Contents

Links

My Process

Built With

  • Semantic HTML5 markup
  • SCSS (7-1 architecture)
  • Flexbox
  • Vite for development and bundling
  • Responsive design with rem units

What I Learned

While working on this project, I learned several new concepts and improved my skills in the following areas:

  • SCSS architecture: I used the 7-1 SCSS architecture to keep the code modular and maintainable. This helped organize the styles better and avoid duplication.
  • Responsive Design: By using rem units and Flexbox, I achieved a layout that adjusts well across different screen sizes.
  • List Styling: I customized bullet points and list style positions effectively while handling alignment and padding issues with <div> and <span> tags.

Author