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

DevChallenges - Legacy - Responsive Web Developer - Recipe Page
https://github.com/jdegand/recipe-page

devchallenges devchallenges-legacy

Last synced: about 1 month ago
JSON representation

DevChallenges - Legacy - Responsive Web Developer - Recipe Page

• Host: GitHub
• URL: https://github.com/jdegand/recipe-page
• Owner: jdegand
• Created: 2022-03-03T21:00:44.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-05T21:00:40.000Z (over 1 year ago)
• Last Synced: 2025-01-22T09:12:59.158Z (about 1 year ago)
• Topics: devchallenges, devchallenges-legacy
• Language: HTML
• Homepage: https://jdegand.github.io/recipe-page/
• Size: 244 KB
• 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.





  


    

      Live Link

    

     | 

    

      Challenge

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Useful Resources](#useful-resources)

## Overview

![Mobile](recipe-page-mobile.png)

![Desktop 1](recipe-page-desktop-1.png)

![Desktop 2](recipe-page-desktop-2.png)

### Built With

- HTML

- CSS

## Features

This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://web.archive.org/web/20240526063718/https://legacy.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

**Note**: The previous design document may be incomplete, as you need to find an archived version of the challenge as all `legacy` challenges have had their documentation removed from DevChallenges.

## Useful Resources

- [Steps to replicate a design with only HTML and CSS](https://devchallenges-blogs.web.app/how-to-replicate-design/)

- [Stack Overflow](https://stackoverflow.com/questions/11946098/how-to-remove-dot-after-number-in-ordered-list-items-in-ol-li) - remove dot after number in ordered list

- [Stack Overflow](https://stackoverflow.com/questions/5945161/html-css-ordered-list-without-the-period) - ordered list without the period

- [Mail Trap](https://mailtrap.io/blog/nbsp/) - nbsp

- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) - CSS Counters

- [YouTube](https://www.youtube.com/watch?v=2Sf8E9CUavA) - custom checkbox

- [Blog](https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes) - custom checkboxes with ally

- [Stack Overflow](https://stackoverflow.com/questions/55995977/is-there-any-good-effect-when-put-an-img-tag-in-a-p-tag-is-it-correct-at-all/55996018) - img tag inside a p tag

- [CSS Tricks](https://css-tricks.com/css-counters-custom-list-number-styling/) - CSS counters custom list number styling