Website design

Website design

1. Task Requirements

   • Prescribed Criteria
     • Your website must include TWO aspects styled using CSS • E.g. Background colour / Background image / font type / font colour
       • Using CSS I will implement a background image (crumpled paper texture).
       • I will also use Font colour to make it easier to read and look aesthetically pleasing.
     • You must use HTML to organise appropriate information on your webpages using FIVE of the following: • Image • Table showing information • Hyperlink to an external website • Ordered list or Unordered list • Button • Different heading sizes • Paragraphs • Video or moving image
       • I will use HTML to organize the information into images to display the result of the food cooked such as pasta and pizza.
       • I can use HTML to organize the information into Ordered lists to give step by step instructions of the recipes such as the recipes for pizza and pasta
       • I will use HTML to organize the information into buttons for the different categories of food such as Breakfast, Lunch, Dinner, Desert, and Drinks
       • I will also use HTML to organize the information into different sized headings to indicate which food it is for and the name of the people who wrote a “review”
       • I can use HTML to organize the information into paragraphs to make “reviews”
     • Your website must have an aesthetic that suits/aligns with your User Persona
       • I will add a deep yellow colour to my website
       • I will add a lot of different formats to display the information such as images, tables, lists and more
   • Self Determind criteria
     • Your website must have several recipes for different foods.
       • I will specifically have a recipe for a Smoothie Bowl, Pizza, Pasta, Banana Sundae, and lemonade
       • I will have a couple different recipes for each different course of food such as Breakfast, Lunch, Dinner, Desert, and Drinks

2. User Persona

   • A website with ingredients, helpful tips, images, step by step guides and is visually aesthetic
   • Not being able to find a good cooking website, dying in Valorant, making bad food
   • I want to visit a website that gives me different recipes so I can cook at home
   • Valorant, chess, cooking, dancing, favourite colour is deep yellow

3. Existing solutions

   • Bakers Delight
     • Cons
       • Doesn't have ratings for recipes
       • Can't save or "Favourite" recipes
     • Pros
       • Lots Of Category's for a variety of food, lots of food options
       • Visually pleasing
   • Allrecipes
     • Pros
       • Can save, rate, and share recipes
       • Lots of variety in options
     • Cons
       • Too much information
       • It's too good

4. Coding Enviroment

   • Developer tools
     • Notpad ++
     • HTML, CSS
   • Key Algorithms
     • Website Navigation
     • Searching algorithms

5. User Interface

   • Aesthetics
     • Colour
       • Dark Yellow
       • White
   • User Interface Components
     • Buttons
     • Ordered/Unordered lists
     • Images
   • Features
     • Url
     • Dark mode