Chilli & Garlic was created with the aim to inspire plant-based food lovers with new and exciting recipes that are posted to the site every week. The site features a recipe of the week, mailing list, spotity playlist and a list of the couples favourite restaurants.

The live site can be accessed here

• Color Pallete

  • The two main colours used are Onyx and White.
  • I had originally wanted to use Light Coral and White but due a poor accessibility score on Google Lighthouse, I had to change it.

• Typography

  • The Montserrat font is used throughout with Sans-Serif as the backup font.

• Initial Concept

  • The initial concept was designed first to structure the layout of the content and media that was envisaged.
  • I had originally wanted to create the site with 3 separate pages but unfortunately had to settle on 4 sections due to time constraints.

This sect#on covers the features used for the website to function seamlesslesly, ensuring accessibility requirements are achieved at the same time.

• Navigation Bar
  • The navigation bar includes an About, Recipe of the Week, Join our mailing list and a Favourite Restaurant section

• The Hero Image
  • The hero image was selected to break up the blank space and offer something more visual to the user. I added a level of transparancy to ensure the text was fully visible to ensure accessibility for all users was optimised.

• About Section
  • The About Us section of the website provides a brief insight to who the site owners are and why they've created the website.
  • The images used were intended to be playful and stylish.

• Recipe Of The Week Section
  • The Recipe of the Week section of the website shares a weekly plant-based recipe for the user to try out, it showcases an image of the meal and provides a detailed ingredients list, and cooking method.
  • The image styling was kept consistent with the About Us section for a consistent UX

• Join Our Mailing List
  • The Join Our Mailing List section of the website was added to give users the ability to opt in for weekly emails of new and exciting plant-based recipes.
  • An embeded Spotify playlist was also added to give users the ability to listen to the site owners favourite songs while trying out the suggested recipe.

• Our Favourite Restaurants
  • The Our Favourite Restaurants section was added to share with users where the site owners draw inspiration from for their suggested meals.
  • An embeded Google Maps list of locations was used to provide an interactive and resourceful source of restaurants in London.

• Footer

  • The Footer includes social media links to the site owners social media accounts, ensuring users can easily find and follow them.

• Validator Testing

  • HTML
    • No errors were returned when passing through the official W3C Validator
  • CSS
    • No errors were found when passing through the official [Jigsaw Validator] (https://jigsaw.w3.org/css-validator/validator)
  • Accessibility
    • Scored the minimum 98% throughout the whole site.
  
  • Mobile Repsonsiveness
    • Minimum screen size was modelled on 375px, using the iPhone 6/7/8 pre-set option in Google's Chrome Developer Tools.

  Bugs

  There were no known bugs at the time of final deployment.

  Deployment

  • The site was deployed to GitHub pages using the following steps..

    • While in the GitHub repository, go to the settings tab
    • In the "Source Section, select "Master Branch"
    • Select Pages
    • In the source section drop-down menu, choose the Main Branch and save

  Credits

  • General
    • Reuben, my Code Institute tutor
    • General challenges with HTML/CSS
    • Fonts
    • Images
    • How to embed