https://github.com/je-jo/recipe-page

devChallenges #4
https://github.com/je-jo/recipe-page

challenge css3 devchallenges html practice

Last synced: about 1 month ago
JSON representation

devChallenges #4

• Host: GitHub
• URL: https://github.com/je-jo/recipe-page
• Owner: je-jo
• Created: 2021-12-26T18:21:15.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-04T15:51:41.000Z (over 4 years ago)
• Last Synced: 2025-11-22T15:02:34.656Z (8 months ago)
• Topics: challenge, css3, devchallenges, html, practice
• Language: HTML
• Homepage: https://je-jo.github.io/recipe-page/
• Size: 1.54 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Recipe Page




   Solution for a challenge from  Devchallenges.io.





  


    

      Demo

    

     | 

    

      Solution

    

     | 

    

      Challenge

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Contact](#contact)

- [Acknowledgements](#acknowledgements)

## Overview

![screenshot](https://raw.githubusercontent.com/je-jo/recipe-page/main/images/recipe-page.png)

This looked simple enough, but there's quite a lot going on. I've practiced a bit with CSS grid, and tried to keep a clean and readable code.

### Built With

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- [Minireset](https://awesomeopensource.com/project/jgthms/minireset.css?categoryPage=29) - A tiny modern CSS reset. 

## Features

This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://devchallenges.io/challenges/OEKdUZ6xs0h99C38XVht) was to build an application to complete the following user stories:

- [x] User story: I can see a recipe with ingredients and instructions

- [x] User story: I can select a checkbox if I have the ingredients

- [x] User story: I can see the number of servings, baking times

## Acknowledgements

- [Pure CSS Custom Checkbox Style](https://moderncss.dev/pure-css-custom-checkbox-style/)

- [Style List Markers in CSS](https://css-tricks.com/style-list-markers-css/)

## Contact

- [Github](https://github.com/je-jo)

- [Frontend Mentor](https://www.frontendmentor.io/profile/je-jo)

- [Codepen](https://codepen.io/je-jo)