Portfolio Project Proposal

By @kadeja101 & @ancheetah

Go to website -->

Introduction

4Foodies is a food blog that offers recipes and cooking classes. 4Foodies’ goal is to inspire people to get in the kitchen and become confident chefs. Recipes range from beginner to advanced, so individuals from all cooking levels can learn to cook better. On the website recipes and photos are posted, along with step by step instructions. 4foodies also provides virtual or in-person cooking classes that guests can register and pay for.

The goal is to design a website using a minimalist black and white theme with a clean, simple layout and minimal text to draw attention to colorful food photography. The masonry-style homepage draws the eye around by combining quotes, images, and text in a random fashion. The website should be intuitive to use for a website visitor.

List of Features

• A header with the blog name/logo only on the homepage (becomes sticky-top navbar on other pages)
• Horizontal navbar (aligned right) with navbar brand on left collapses to hamburger icon for smaller screens:
  • About, Recipes, Contact
  • Button for Events
• Should indicate which page is active
• Font awesome icons for categories and social media icons
• Standard footer with nav links, social media, and contact info (telephone/email)

Home Page

• A Bootstrap alert or jumbotron with a dynamic countdown to the next event date and a button linking to the events page
• Full-width photo up top showcasing the recipe of the month
• A unique masonry style grid with a random assortment of the latest recipe cards, inspirational quotes, upcoming events
• Full-width categories carousel for each recipe category: chicken, beef, pork, fish, breakfast, lunch, dinner, dessert (we can start with just three categories for now until we learn about carousels in class)
• Each category will be represented by a circle cutout image and caption below that when hovered over shows an icon
• Categories will be clickable buttons but will all link to recipe page for now

About Us

• h3 element: “This food blog website design template is brought to you by AJ Ancheta and Kadeja Cordova - two Nucamp students building their first Bootstrap project! Our aim is to design a unique, eye-catching food blog that breaks from the norm.”
• Two horizontal rows with two columns each:
  • Headshot; Short description about AJ
  • Short Description about Kadeja; Headshot

Recipe Index

• Category carousel identical to the one on the homepage. No links set up for now.

• Standard 3-column grid using bootstrap cards to display recipe thumbnails with very brief descriptions below

• Each recipe card will link to a single recipe page template for now (not linked in navbar)

  • First Row: Ingredients (unordered list) (col-md-9); Recipe Photo *Second Row: Instructions (ordered list)

Contact Us

• Address, Phone Number, Social Media
• Contact Form:

  “Have feedback about our site or want to contribute? We’re always open to new opinions and help! Send us a message below:”

  • Form fields: Name, Phone Number, Email, Subject, Message
  • Submit button

Events

• Table of upcoming events
  • Header Row: Event Name; Date/Time; Cost; Description
  • Sign Up button for each row

Market Survey

https://www.gimmesomeoven.com/ -Minimalist Theme https://iamafoodblog.com/ - Masonry Gallery; Icons https://ohsweetbasil.com/category/recipes/main-dish/ - Horizontal, collapsing navbar; Recipe category carousel https://www.foodiecrush.com/ - What should I have for dinner quiz? https://naturallyella.com/ - Recipe Index

References

Masonry Grid: https://codepen.io/artursden/pen/dRWeBw https://getbootstrap.com/docs/4.0/components/card/#card-columns

Stock Photography:

https://picsum.photos/ https://unsplash.com/

Design Elements:

https://icons8.com/illustrations https://www.canva.com https://www.ucraft.com/free-logo-maker#create-logo