https://github.com/fatemzh/recipe-page

This project is a responsive recipe page built with HTML, CSS, and Sass. It features a clean design, optimized for both mobile and desktop views, and showcases essential skills in web development.
https://github.com/fatemzh/recipe-page

frontend-mentor frontenddevelopment responsive-design sass

Last synced: about 2 months ago
JSON representation

This project is a responsive recipe page built with HTML, CSS, and Sass. It features a clean design, optimized for both mobile and desktop views, and showcases essential skills in web development.

• Host: GitHub
• URL: https://github.com/fatemzh/recipe-page
• Owner: fatemzh
• Created: 2024-07-19T11:25:34.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-22T14:00:55.000Z (7 months ago)
• Last Synced: 2024-11-09T23:12:49.858Z (3 months ago)
• Topics: frontend-mentor, frontenddevelopment, responsive-design, sass
• Language: SCSS
• Homepage: https://fatemzh.github.io/recipe-page/
• Size: 675 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Recipe page

## Welcome! 👋

This is a solution to the [Recipe Page coding challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/recipe-page). 

## Overview

![Design preview for the Recipe page coding challenge](./preview.jpg)

### The Challenge

Your challenge was to build out this recipe page and get it looking as close to the design as possible.

Users should be able to:

- View the optimal layout for the site depending on their device's screen size

- See hover and focus states for all interactive elements on the page

### Links

- Solution URL: [GitHub Repository](https://github.com/fatemzh/recipe-page)

- Live Site URL: [Live Site](https://fatemzh.github.io/recipe-page)

## My Process

### Built With

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Mobile-first workflow

- [Sass](https://sass-lang.com/) - CSS preprocessor

### What I Learned

In this project, I learned how to create a responsive design that adapts to different screen sizes by adopting a mobile-first approach. 

### Continued Development

In future projects, I want to focus more on:

- Improving accessibility

- Implement Responsiveness faster

- Using more advanced CSS features like custom properties and grid layouts