{"id":19337018,"url":"https://github.com/ataylorn/frontendmentor-recipe-page","last_synced_at":"2026-07-06T10:30:22.082Z","repository":{"id":223944885,"uuid":"760701916","full_name":"ATaylorN/FrontendMentor-Recipe-Page","owner":"ATaylorN","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-01T21:34:43.000Z","size":1511,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-06T10:13:31.388Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ATaylorN.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-20T19:24:29.000Z","updated_at":"2024-02-22T21:10:56.000Z","dependencies_parsed_at":"2024-02-22T22:27:19.570Z","dependency_job_id":"432e169b-6b3b-41be-9705-4e459f8a72c8","html_url":"https://github.com/ATaylorN/FrontendMentor-Recipe-Page","commit_stats":null,"previous_names":["ataylorn/frontendmentor-recipe-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATaylorN%2FFrontendMentor-Recipe-Page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATaylorN%2FFrontendMentor-Recipe-Page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATaylorN%2FFrontendMentor-Recipe-Page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATaylorN%2FFrontendMentor-Recipe-Page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ATaylorN","download_url":"https://codeload.github.com/ATaylorN/FrontendMentor-Recipe-Page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240441955,"owners_count":19801793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T03:13:09.855Z","updated_at":"2026-07-06T10:30:22.024Z","avatar_url":"https://github.com/ATaylorN.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Recipe page solution\n\nThis is a solution to the [Recipe page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n[![My Skills](https://skillicons.dev/icons?i=html,css,vscode,github)](https://skillicons.dev)\n\n[![Generic badge](https://img.shields.io/badge/STATUS-COMPLETE-GREEN.svg)](https://shields.io/)\n\n## Table of contents\n\n- [Overview](#overview)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n- [Author](#author)\n\n## Overview\n\nYour challenge is to build out this recipe page and get it looking as close to the design as possible.\nYou can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.\n\n### Screenshot\n\n\u003cimg src=\"/desktop.jpg\" width=\"500\"\u003e \u003cimg src=\"/mobile.jpg\" height=\"350\"\u003e \n\n### Links\n\n- Live Site URL: [Recipe Page](https://ataylorn.github.io/FrontendMentor-Recipe-Page/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Mobile-first workflow\n\n### What I learned\n\nAfter reviewing the challenge, my thought was that it would be best to try to do the mobile version of this project first and then move to the desktop version. It also seemed like it would be best to focus on the HTML part first, focusing \tprimarily on semantic HTML elements. For this project, I didn't feel like I necessarily NEEDED Vue or React. I do want to use React at some point to practice, but for now, I'm focusing purely on HTML and CSS.\n\nFiguring out how to create spacing between bullet points and the list item and how to change just the color of the bullet points without changing the color of the list item, took me a moment to figure out, a lot of trial and error. \n\nThis allowed me to change the bullet points' color:\n```css\nli::marker {\n  color: hsl(332,51%,32%);\n}\n```\n\nI ran into a similar issue when it came to getting a solid bottom border for each row of the table, the border-collapse property helped with this:\n```css\ntable {\n  border-collapse: collapse; width: 100%; \n}\ntable,td{\n  border-bottom: 1px solid hsl(30, 18%, 87%);\n}\n```\n\nThis project was also good practice for nth child and marker selectors which I used to change the color of only the second column: \n```css\ntd:nth-child(2){\n    color: hsl(14,45%,36%);\n    font-weight: 700;\n}\n```\n\n### Continued development\n\nThis was great practice on using semantic HTML and CSS. I've completed a couple of projects using Vue.js and would like to do similar projects in React in the future.\n\n## Author\n\n- Website - [Portfolio Site](https://amandataylor-portfolio.netlify.app/)\n- Frontend Mentor - [@ATaylorN](https://www.frontendmentor.io/profile/ATaylorN)\n- GitHub - [@ATaylorN](https://github.com/ATaylorN)\n- LinkedIn - [@amanda-taylor1](https://www.linkedin.com/in/amanda-taylor1/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fataylorn%2Ffrontendmentor-recipe-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fataylorn%2Ffrontendmentor-recipe-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fataylorn%2Ffrontendmentor-recipe-page/lists"}