{"id":20886894,"url":"https://github.com/barkode/bake-with-joy","last_synced_at":"2026-04-25T06:32:16.561Z","repository":{"id":243839163,"uuid":"813344607","full_name":"barkode/bake-with-joy","owner":"barkode","description":"Modern bakery with old traditions","archived":false,"fork":false,"pushed_at":"2024-06-24T10:36:05.000Z","size":126019,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-19T11:16:05.050Z","etag":null,"topics":["css-flexbox","css3","html5","html5-css3"],"latest_commit_sha":null,"homepage":"https://barkode.github.io/bake-with-joy/","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/barkode.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-06-10T22:50:37.000Z","updated_at":"2024-06-24T10:36:08.000Z","dependencies_parsed_at":"2024-06-21T18:14:14.536Z","dependency_job_id":null,"html_url":"https://github.com/barkode/bake-with-joy","commit_stats":null,"previous_names":["barkode/bake-with-joy"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2Fbake-with-joy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2Fbake-with-joy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2Fbake-with-joy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barkode%2Fbake-with-joy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barkode","download_url":"https://codeload.github.com/barkode/bake-with-joy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243268088,"owners_count":20263803,"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":["css-flexbox","css3","html5","html5-css3"],"created_at":"2024-11-18T08:18:24.520Z","updated_at":"2025-12-27T09:18:02.844Z","avatar_url":"https://github.com/barkode.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bake's JOY - A Modern Bakery With Old Traditions\n\n## Introduction\n\nThe website presents a modern family bakery in which ancient traditions have\nbeen preserved. With the help of the gallery on the website, the buyer can\nimmerse himself in the wonderful world of sweet pastries. We invite you to come\nto our institution.\n\n![Bake's JOY responsive view](./assets/readme-img/home-page.png)\n\nYou can [visit our site here.](https://barkode.github.io/bake-with-joy/)\n\n## Content\n\n- [User Experience](#user-experience-ux)\n  - [User Stories](#user-stories)\n- [Design](#design)\n  - [Website Structure](#website-structure)\n  - [Wireframes](#wireframes)\n  - [Color Scheme](#color-scheme)\n  - [Typography](#typography)\n  - [Media Content](#imagery)\n  - [Accessibility](#accessibility)\n- [Features](#features)\n  - [Favicon](#favicon)\n  - [Header](#header)\n  - [Logo](#logo)\n  - [Navigation Menu](#navigation-menu)\n  - [Footer](#footer)\n  - [Home Page](#home-page)\n  - [Gallery Page](#gallery-page)\n  - [Contact Page](#contact-page)\n  - [Error Page](#error-page)\n  - [Confirmation Page](#confirmation-page)\n- [Technologies and Media](#technologies-used)\n- [Deployment](#deployment)\n  - [Deployment to Github Pages](#github-pages)\n  - [Fork Repository](#forking-the-github-repository)\n  - [Clone Repository](#making-a-local-clone)\n- [Testing](#testing)\n  - [Testing User Stories](#testing-user-stories)\n  - [HTML Validation](#html-validation)\n    - [Home Page](#home-page)\n    - [Gallery Page](#gallery-page)\n    - [Contact Page](#contact-page)\n    - [Error Page](#error-page)\n    - [Confirmation Page](#confirmation-page)\n  - [CSS Validation](#css-validation)\n  - [Lighthouse Performance Tests](#lighthouse-performance-tests)\n    - [Desktop](#desktop)\n    - [Mobile](#mobile)\n  - [Manual Testing](#manual-testing)\n- [Future Improvements](#future-improvements)\n- [Credits](#credits)\n  - [Code \u0026 Content](#code--content)\n  - [Media](#media)\n  - [Acknowledgment](#acknowledgment)\n\n## User Experience (UX)\n\n### User stories\n\nThe user stories upon which the features of the project are based are as\nfollows:\n\n1. As a visiting user, I want to be able to navigate this site easily.\n\n2. As a visiting user, I want to know what services are provided by this\n   business so that I can quickly determine if it may be able to meet my needs.\n\n3. As a visiting user, I want to know if the business has a track record of\n   providing these services.\n\n4. As a visiting user, I would like to see some examples of previous work the\n   business has done.\n\n5. As a visiting user, I want to know how to contact the business if I have a\n   query or if I think it can provide the service I need.\n\n[Back to top](#content)\n\n## Design\n\nThe design was built on the principle of simplicity. The site should be simple\nand at the same time user-friendly.\n\n[Back to top](#content)\n\n### Website structure\n\nThe site consists of 5 pages. The navigation menu is available on all pages.\n\n- The home page presents the main idea of ​​the site.\n\n- On the second page, you can see a gallery presenting examples of products.\n\n- The third page is a page with contacts and a feedback form.\n\n- The last two pages are service pages. One of them shows a message that the\n  form has been completed, and the other reports that an error has occurred. The\n  home page is the default download page.\n\n- The header is fixed on the page, so it is available to the client at any time.\n\n- The logo is located in the upper left corner and the navigation menu is\n  located in the right corner. On devices with a small screen, this navigation\n  menu changes to a drop-down menu.\n\n- Also on the site there is a lower part - a footer. With its help, the client\n  can go to the page of one of the social networks.\n\n[Back to top](#content)\n\n### Wireframes\n\nBalsamiq was used to create the wireframes during the design process\n\n![Balsamiq Desktop version](./assets/readme-img/desktop.png)\n\n![Balsamiq Mobile version](./assets/readme-img/mobile.png)\n\n[Back to top](#content)\n\n### Color Scheme\n\n![Project used colors](./assets/readme-img/pallete.png)\n\nThe color scheme for this project used from\n[Figma design](https://www.figma.com/design/fDlsHwelyuOVsfUmCzm3dA/%D0%A1%D1%83%D1%87%D0%B0%D1%81%D0%BD%D1%8F-%D0%BF%D0%B5%D0%BA%D0%B0%D1%80%D0%BD%D1%8F?node-id=0-1\u0026t=X9B2jIUsiA3Fm8p6-0)\n\n[Back to top](#content)\n\n### Typography\n\nGeometric sans serif typefaces have always been popular, and with support for\nboth the Devanagari and Latin writing systems, Poppins is an internationalist\naddition to the genre. Many of the Latin glyphs (such as the ampersand) are more\nconstructed and rationalist than is typical. The font family\n'[Poppins](https://gwfh.mranftl.com/fonts/poppins?subsets=latin)' was downloaded\nand used from Google Fonts, as it provides an easy-on-the-eye font. This font\nwas used for all text across the website.\n\n![Poppins font](./assets/readme-img/poppins-font.png)\n\n[Back to top](#content)\n\n### Imagery\n\nAll images were downloaded from free resources. Pictures for the site were\ndownloaded from such resources as [Pixels](https://www.pexels.com/),\n[Pixabay](https://pixabay.com/) and [Unsplash](https://unsplash.com/).\n\nIcons for the project were found on [FontAwesome](https://fontawesome.com/) and\n[FLATICON](https://www.flaticon.com/).\n\nAll image sizes were edited using [squoosh](https://squoosh.app/).\n\n[Back to top](#content)\n\n### Accessibility\n\nThe following has been done to ensure that the website is as accessible friendly\nas possible.\n\n- Using semantic HTML.\n- Using descriptive alt attributes on images on the site.\n- Ensuring that there is a sufficient color contrast throughout the site.\n\n[Back to top](#content)\n\n## Technologies Used\n\n### Languages Used\n\n- HTML5 - used to write structure and foundation of code for website.\n- CSS3 - used for styling all content and page structure on site.\n- Git - used to track code changes and as a version control system.\n\n[Back to top](#content)\n\n### Frameworks, Libraries \u0026 Programs Used\n\n#### [Google fonts](https://fonts.google.com/knowledge) and [google webfonts helper](https://gwfh.mranftl.com/fonts)\n\nGoogle fonts and google webfonts helper were used to integrate the 'Poppins'\nfont into the style.css file which is used on all pages throughout the project\n\n#### [Font Awesome](https://fontawesome.com/)\n\nFont Awesome was used on all pages throughout the website to add icons for\naesthetic and UX purposes.\n\n#### [Git](https://gitpod.io/)\n\nGit was used for version control by utilizing the Gitpod terminal to commit to\nGit and Push to GitHub.\n\n#### [GitHub](https://github.com/)\n\nGitHub is used to store the projects code after being pushed from Git.\n\n#### [Balsamiq](https://balsamiq.com/wireframes/)\n\nBalsamiq was used to create [wireframes](#wireframes) for website.\n\n#### [Figma](https://www.figma.com/community)\n\nFigma was used to find inspiration.\n\n#### [Visual Studio Code](https://code.visualstudio.com/)\n\nUsed Visual Studio Code as a main IDE.\n\n[Back to top](#content)\n\n## Features\n\nThe site contains 5 pages. All pages have a favicon, logo, navigation menu and\nfooter.\n\n### Favicon\n\n![Bale's JOY Favicon image](./assets/readme-img/favicon.png)\n\nAn icon suitable for the subject was found on the\n[FlatIcon](https://www.flaticon.com/free-icon/croissant_786967?term=croissant\u0026page=2\u0026position=5\u0026origin=search\u0026related_id=786967)\nresource.\n\n[Back to top](#content)\n\n### Header\n\n![Bale's JOY Header image](./assets/readme-img/header.png)\n\nThe header has been made fixed for easy access to the navigation menu.\n\n![Bale's JOY Mobile Header image](./assets/readme-img/header-mobile.png)\n\nFor small screens, the header has been changed for greater user convenience. The\nnavigation menu has been hidden to allow the user to see more content on a small\nscreen.\n\n[Back to top](#content)\n\n### Logo\n\n![Bale's JOY Logo image](./assets/readme-img/logo-1.png)\n\nThe logo was generated using [app-logo](https://app.logo.com/).\n\n![Bale's JOY Logo image](./assets/readme-img/logo-2.png)\n\nThe logo has a transparent background and has been moved outside the header.\nThis creates an effect as if the logo is flying.\n\n[Back to top](#content)\n\n### Navigation Menu\n\n![Bale's JOY Navigation Menu image](./assets/readme-img/navmenu.png)\n\nIn the navigation menu, the technique of changing color and adding an underline\nwith rounded edges for the active page was used. This was done for the\nconvenience of the customer. So that the client always understands which page he\nis currently on.\n\n![Bale's JOY Mobile Header image](./assets/readme-img/navmenu-mobile.png)\n\nFor small screens, such as mobile phones, the navigation bar has been changed\nfor greater user convenience.\n\n![Mobile choose email sender](./assets/readme-img/mobile-screen-email-phone.png)\n\nAll links are interactive and used for the convenience of the client. If you\ntype in a phone number with me, the phone will offer the client to make a call\nusing the phone.\n\n[Back to top](#content)\n\n### Footer\n\n![Bale's JOY Footer image](./assets/readme-img/footer.png)\n\n![Bale's JOY Footer image](./assets/readme-img/footer-act.png)\n\nA link to the bakery's social networks was placed in the footer. For the\nconvenience of the user, the technique of highlighting the icons when pointing\nwith the mouse was used.\n\n[Back to top](#content)\n\n### Home page\n\nOn the main page, the client can see the logo behind the slogan. Next, he can\nread information about our values. Below is a section that shows the chefs'\nnames.\n\n- **On Desktop**\n\n![Desktop full screen](./assets/readme-img/home-page-desktop.png)\n\nThe team gallery is adaptive. And depending on the width of the screen, it can\nshow 1, 2 or 4 elements per line.\n\n- **On Tablet**\n\n![Tablet full screen](./assets/readme-img/home-page-tablet.png)\n\n- **On Mobile**\n\n![Mobile full screen](./assets/readme-img/home-page-mobile.png)\n\n[Back to top](#content)\n\n### Gallery page\n\nThe gallery page shows examples of delicious baked goods. The gallery is\ninteractive. If the client likes a picture, he can download the full version of\nthe picture. Thanks to the Love Running project from\n[Code Institute](https://codeinstitute.net/ie/), it was possible to make a\nresponsive gallery that adjusts to the width of the screen.\n\n- **On Desktop**\n\n![Gallery Page on Desktop](./assets/readme-img/gallery-page-desktop.png)\n\n- **On Tablet**\n\n![Gallery Page on Tablet](./assets/readme-img/gallery-page-tablet.png)\n\n- **On Mobile**\n\n![Gallery Page on Mobile ](./assets/readme-img/gallery-page-mobile.png)\n\n[Back to top](#content)\n\n### Contact page\n\n![Contact Page](./assets/readme-img/contact-page-desktop.png)\n\nThe contact page was made in a minimalistic design. The page was made taking\ninto account different screen widths.\n\n![Address on Contact Page](./assets/readme-img/contact-page-address.png)\n\nThe page uses interactive elements in the address block. Which add convenience\nto using the site on mobile devices.\n\n![Open Hours on Contact Page](./assets/readme-img/contact-page-work-hours.png)\n\nWorking hours were also shown on the page. They were organized in the form of a\ntable.\n\n![Map on Contact Page](./assets/readme-img/contact-page-map.png)\n\nFor the convenience of customers, a map was integrated into the site, which was\ncreated using the [Google Maps](https://www.google.ie/maps/preview) service.\n\n![Form on Contact Page](./assets/readme-img/contact-page-form.png)\n\nFor the convenience of customers, a feedback form has been integrated into the\nsite.\n\n![Submit form validation](./assets/readme-img/form-testing.png)\n\nValidation of entered data has been added to the form. The form cannot be\nsubmitted with empty fields. In the e-mail field, you must enter words separated\nby the @ sign. Only numbers can be entered in the phone number field. The number\nof digits is 10. The implementation and part of the code was taken from the\n[ZelL Liew](https://medium.com/free-code-camp/how-to-check-if-an-input-is-empty-with-css-1a83715f9f3e)\narticle.\n\n[Back to top](#content)\n\n### Error page\n\n![Error Page](./assets/readme-img/error-page-desktop.png)\n\nAn error page notifies the user of an error. Also, the user can return to the\nmain page or use the interactive link and call and report the error. The page is\nalso made taking into account different device widths.\n\n[Back to top](#content)\n\n### Confirmation page\n\n![Confirmation Page](./assets/readme-img/confirm-page-desktop.png)\n\nThe confirmation page lets the client know that the request has been sent. The\npage is also made taking into account different device widths.\n\n[Back to top](#content)\n\n## Testing\n\n### Testing user stories\n\n1. As a visiting user, I want to be able to navigate this site easily.\n\n   When I go to the site, I see a clear large background image with a text\n   description of the bakery and a large hero whose idea matches the user's site\n   description In the upper left corner of the page there is a clear logo with\n   the name of the site In the same line as the logo, there is a navigation bar\n   that is easy to navigate and designed in such a way that the user never falls\n   into a trap, and also has clear links to pages that we can go to if we want.\n\n2. As a visiting user, I want to know what services are provided by this\n   business so that I can quickly determine if it may be able to meet my needs.\n\n   The website shows what the company does. The first page clearly describes the\n   goals of the company and the products it produces.\n\n3. As a visiting user, I want to know if the business has a track record of\n   providing these services.\n\n   The section with employee reviews tells the history and attitude of employees\n   to this institution.\n\n4. As a visiting user, I would like to see some examples of previous work the\n   business has done.\n\n   This requirement is fulfilled in the gallery section. Many examples of works\n   are shown. You can click on photos to open them in larger windows.\n\n5. As a visiting user, I want to know how to contact the business if I have a\n   query or if I think it can provide the service I need.\n\n   The user can always get to the contacts page from the main menu. The page\n   contains the company's phone number, email address, and address. The user can\n   also use the interactive map available on the contact page. Or click on the\n   map to open the Google Maps application. For the convenience of the user, a\n   feedback form has been added. This form allows the user to send questions or\n   greetings.\n\n[Back to top](#content)\n\n### HTML Validation\n\n- #### Home Page\n\n![HTML Validator OK](./assets/readme-img/home-page-html-validator-ok.png)\n\nThe document has been verified. No errors were found. Non-critical comments were\nfound.\n\n![Home Page HTML Validator Info](./assets/readme-img/home-page-http-validator-warn.png)\n\nAll informational messages refer to the trailing slash at the end of empty\nelements. This is a feature of the Prettier expansion.\n\n[Back to top](#content)\n\n- #### Gallery Page\n\n![Gallery HTML Validator Page](./assets/readme-img/gallery-page-html-validator-ok.png)\n\nThe document has been verified. No errors were found. Non-critical comments were\nfound.\n\n![Gallery HTML Validator Page](./assets/readme-img/gallery-html-validator-info.png)\n\nAll informational messages refer to the trailing slash at the end of empty\nelements. This is a feature of the Prettier expansion.\n\n[Back to top](#content)\n\n- #### Contact Page\n\n![Contact HTML Validator Page](./assets/readme-img/contact-page-html-validator-ok.png)\n\nThe document has been verified. No errors were found. Non-critical comments were\nfound.\n\n![Contact HTML Validator Page](./assets/readme-img/contact-page-html-validator-ingo.png)\n\nAll informational messages refer to the trailing slash at the end of empty\nelements. This is a feature of the Prettier expansion.\n\n[Back to top](#content)\n\n- #### Error Page\n\n![Error HTML Validator Page](./assets/readme-img/error-page-html-validation-ok.png)\n\nThe document has been verified. No errors were found. Non-critical comments were\nfound.\n\n![Error HTML Validator Page](./assets/readme-img/error-page-html-validation-info.png)\n\nAll informational messages refer to the trailing slash at the end of empty\nelements. This is a feature of the Prettier expansion.\n\n[Back to top](#content)\n\n- #### Confirmation Page\n\n![Confirmation HTML Validator Page](./assets/readme-img/confirm-page-html-validator-ok.png)\n\nThe document has been verified. No errors were found. Non-critical comments were\nfound.\n\n![Confirmation HTML Validator Page](./assets/readme-img/confirm-page-html-validator-info.png)\n\nAll informational messages refer to the trailing slash at the end of empty\nelements. This is a feature of the Prettier expansion.\n\n[Back to top](#content)\n\n### CSS Validation\n\n![CSS Validator No Error](./assets/readme-img/css-validation.png)\n\nThe CSS code was validated using the\n[W3C CSS Validation Service](https://jigsaw.w3.org/css-validator/validator.html.en)\nto ensure there are no errors and it adheres to best practices.\n\n![CSS Validator Warnings](./assets/readme-img/css-warnings.png)\n\nMost of these warnings are related to CSS variables (custom properties) not\nbeing statically checked.\n\n[Back to top](#content)\n\n### Lighthouse Performance Tests\n\n#### Desktop\n\n- Home Page\n\n![Home Page Lighthouse](./assets/readme-img/home-page-lh-desk.png)\n\n[Back to top](#content)\n\n- Gallery Page\n\n![Gallery Page Lighthouse](./assets/readme-img/gallery-page-lh-desk.png)\n\n[Back to top](#content)\n\n- Contact Page\n\n![Contact Page Lighthouse](./assets/readme-img/contact-page-lh-desk.png)\n\n[Back to top](#content)\n\n- Error Page\n\n![Error Page Lighthouse](./assets/readme-img/error-page-lh-desk.png)\n\n[Back to top](#content)\n\n- Confirmation Page\n\n![Confirmation Page Lighthouse](./assets/readme-img/confirm-page-lh-desk.png)\n\n[Back to top](#content)\n\n#### Mobile\n\n- Home Page\n\n![Home Page Lighthouse](./assets/readme-img/home-page-lh-mobi.png)\n\n[Back to top](#content)\n\n- Gallery Page\n\n![Gallery Page Lighthouse](./assets/readme-img/gallery-page-lh-mobi.png)\n\n[Back to top](#content)\n\n- Contact Page\n\n![Contact Page Lighthouse](./assets/readme-img/contact-page-lh-mobi.png)\n\n[Back to top](#content)\n\n- Error Page\n\n![Error Page Lighthouse](./assets/readme-img/error-page-lh-mobi.png)\n\n[Back to top](#content)\n\n- Confirmation Page\n\n![Confirmation Page Lighthouse](./assets/readme-img/confirm-page-lh-mobi.png)\n\n[Back to top](#content)\n\n### Manual Testing\n\nAll buttons and links were tested during website creation. The final test was\ndone. The result of the final test is given in the table below.\n\n| Feature                           | Expectation                                                                     | Action                                                        | Result                                       |\n| :-------------------------------- | :------------------------------------------------------------------------------ | :------------------------------------------------------------ | :------------------------------------------- |\n| Navigation menu links             | Transfers the client to the appropriate page                                    | Click the link                                                | The corresponding page is loaded             |\n| Stylized buttons and links        | Change color when hovering over them                                            | Hover over a button or link                                   | The color changes                            |\n| \"Send\" message button             | Submits the form                                                                | Click the button                                              | The form has been sent                       |\n| Submit the form with blank fields | The form cannot be submitted with empty fields. Show a tooltip to the user      | The submission was verified with empty fields                 | The form was not submitted. A hint was shown |\n| Submitted form page               | Show a page with a message to the user that the form was submitted successfully | Form submitted                                                | The page showed up                           |\n| Social media links                | Links to social networks should open externally                                 | Clicked on the social network icons at the bottom of the page | The link will open in a new tab              |\n| Opening the page with an error    | Opening the page with an error                                                  | Enter a non-existent page in the address bar                  | An error page has opened                     |\n\n![Test the form](./assets/readme-img/form-testing.png)\n\n[Back to top](#content)\n\n### Further Testing\n\nIn the future, it is possible to check the functionality of the site for further\noptimization.\n\nTesting on more devices to find optimal values.\n\nUsing more devices to determine optimal color shades.\n\n[Back to top](#content)\n\n## Bugs\n\n- When creating the site, it was difficult to come up with a beautiful and\n  simple site design. I looked at many sites for inspiration.\n- In the process of writing the code, it was difficult to choose a simple and\n  beautiful effect that would fit the theme of the site.\n- During performance testing, it was found that all images needed to be reduced\n  in size.\n- There are indents in the gallery. There are also empty spaces that need to be\n  filled with photos.\n- Need to fix performance on mobile devices.\n\n[Back to top](#content)\n\n## Deployment\n\n### Github pages\n\n- This project was deployed to GitHub Pages using the following steps\n\n  - Log in to GitHub and locate the GitHub Repository\n  - At the top of the Repository (not top of page), locate the \"Settings\" Button\n    on the menu.\n  - Scroll down the Settings page until you locate the \"GitHub Pages\" Section.\n  - Under \"Source\", click the dropdown called \"None\" and select \"Main Branch\".\n  - The page will automatically refresh.\n  - Scroll back down through the page to locate the now published site link in\n    the \"GitHub Pages\" section.\n  - live link for the page can be found here\n    [Bake's JOY](https://barkode.github.io/bake-with-joy/)\n\n[Back to top](#content)\n\n### Forking the GitHub Repository\n\n- By forking the GitHub Repository we make a copy of the original repository on\n  our GitHub account to view and/or make changes without affecting the original\n  repository by using the following steps\n- Log in to GitHub and locate the GitHub Repository\n- At the top of the Repository (not top of page) just above the \"Settings\"\n  Button on the menu, locate the \"Fork\" Button.\n- You should now have a copy of the original repository in your GitHub account.\n\n[Back to top](#content)\n\n### Making a Local Clone\n\n- Log in to GitHub and locate the GitHub Repository\n- Under the repository name, click \"Clone or download\".\n- To clone the repository using HTTPS, under \"Clone with HTTPS\", copy the link.\n- Open Git Bash\n- Change the current working directory to the location where you want the cloned\n  directory to be made\n- Type git clone, and then paste the URL you copied in Step 3.\n  - $ git clone \u003chttps://github.com/YOUR-USERNAME/YOUR-REPOSITORY\u003e\n- Press Enter. Your local clone will be created.\n\n[Back to top](#content)\n\n## Future improvements\n\n- Add a recipe video gallery page.\n- Add a recipe page.\n- Add an order option to the form.\n- Add dish names to the list so customers can order what they like.\n- Add a customer testimonial series.\n\n[Back to top](#content)\n\n## Credits\n\n### Code \u0026 Content\n\n- [Stack overflow](https://www.stackoverflow.com/),\n  [MDN Web Docs](https://developer.mozilla.org/en-US/),\n  [W3 Schools](https://www.w3schools.com/),\n  [LogRocket](https://blog.logrocket.com/)\n\n  Help in solving problems. Help in implementing best practices. Search for the\n  best practices. Good documentation.\n\n- [Figma](https://www.figma.com/design/fDlsHwelyuOVsfUmCzm3dA/%D0%A1%D1%83%D1%87%D0%B0%D1%81%D0%BD%D1%8F-%D0%BF%D0%B5%D0%BA%D0%B0%D1%80%D0%BD%D1%8F?node-id=0-1\u0026t=VeNx8IUKIo2EOdRB-0)\n\n  Figma as a search platform for inspiration and as a graphic editor.\n\n- Love running project from [Code Institute](https://codeinstitute.net/ie/)\n\n  I was inspired by the Gallery page and some of the code for the site's gallery\n  was taken.\n\n- [UIVerse](https://uiverse.io/)\n\n  credits for hover effect over images and other effects for elements goes to\n\n- [LogRocket](https://blog.logrocket.com/responsive-image-gallery-css-flexbox/)\n\n  credits for gallery goes from\n\n- [Google Maps](https://www.google.ie/maps/)\n\n  Was used to show the location\n\n- [ZelL Liev](https://medium.com/free-code-camp/how-to-check-if-an-input-is-empty-with-css-1a83715f9f3e)\n\n  A piece of code to implement form validation using CSS and regular\n  expressions.\n\n- [freeformatter.com](https://www.freeformatter.com/css-minifier.html#before-output)\n\n  It was used to minimize css\n\n- [W3C Markup Validator](https://validator.w3.org/)\n\n  This service was used to validate HTML files\n\n- [W3C CSS Validator](https://jigsaw.w3.org/css-validator/)\n\n  This service was used to validate CSS files\n\n[Back to top](#content)\n\n### Media\n\n- [Unsplash](https://unsplash.com/) and [Pexels](https://www.pexels.com/)\n\n  Images on the site are taken from these resources.\n\n- [app-logo](https://app.logo.com/)\n\n  the resource is used to generate an idea and automatically create a logo for\n  the site\n\n- [MDN Web Docs](https://developer.mozilla.org/en-US/)\n\n  Instructions on how to connect the favicon to the site have been taken.\n\n- [FlatIcon](https://www.flaticon.com/)\n\n  The icon for the site was found on this resource.\n\n- [Squoosh](https://squoosh.app/)\n\n  The service was used to optimize pictures\n\n[Back to top](#content)\n\n### Acknowledgment\n\n- I want to thank my tutor [Marko Tot](https://github.com/tmarkec) for his daily\n  care and help. For the desire to create a favorable atmosphere for learning\n  and creativity.\n- I would like to thank my mentor, Anthony Ugwu, for his helpful advice on\n  writing the project.\n- I would also like to thank the entire\n  [Code Institute](https://codeinstitute.net/ie/) and\n  [Kerry College](https://kerrycollege.ie/) for giving me the opportunity to\n  study and participate in this project.\n\n[Back to top](#content)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarkode%2Fbake-with-joy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarkode%2Fbake-with-joy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarkode%2Fbake-with-joy/lists"}