Website Design

Website Design

1. Task Requirements

   • Prescribed Criteria
     • Your website must include TWO aspects styled using CSS
     • 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
       • Image
       • Button
       • Paragraphs
       • Ordered list
       • Different Heading Sizes
     • Your website must have an aesthetic that suits/aligns with your User Persona
   • Self-Determined Criteria
     • The website should show recipes on how to cook eggs and consist of images and three pages
       • The website must have sufficient information on egg recipes
       • It should have clear content and consist of appropriate images, prior to the recipe or the topic
       • It should contain three pages

2. User Persona

   • Needs a website that gives easy egg cooking recipes and teaches basic cooking skills
   • Egg recipe websites aren’t appealing and have too many recipes to remember
   • Wants to visit a website that teaches him general cooking skills, and recipes on how to cook delicious eggs dishes, and start a cooking channel
   • Name is Ethel, is a YouTuber, likes dancing, food, cooking, gaming, and YouTube

3. Existing Solutions

   • https://ourbestbites.com/easy-egg-recipes/
     • Pros
       • Font is neat
       • Appealing style and colours
     • Cons
       • Layout is too crowded and not spacious enough
       • Navigation is uncomfortable
   • https://www.seriouseats.com/breakfast-egg-recipes
     • Pros
       • Attractive images that align with their aesthetic
       • Buttons are well designed, look appealing, and function properly
     • Cons
       • Background looks bland and there is empty space
       • Underlining looks unprofessional and unorganized

4. User Interface

   • Features
     • Heading
     • Easy Navigation
     • Call-to-Action
     • High-Quality Images
   • User Interface Components
     • Buttons
     • Images
     • Links
   • Aesthetic
     • Colours
       • Buttons are dark blue
       • Background is black
     • Clear Layout
       • Images are separated neatly from text
       • Text is organised in paragraphs

5. Coding Environment

   • Developer Tools
     • HTML File Editor
       • A HTML File Editor is used to display HTML code into a structured webpage with content
     • Coding Language
       • HTML
         • HTML (Hyper Text Markup Language) is the programming language used to structure and create webpages
           • Example: <h1>Welcome to my website!</h1> <p> This is my first website!</p>
       • CSS
         • CSS (Cascading Style Sheet) is a styling language used to design layout and style webpages
           • Example: body { background-color: red; }
   • Key Algorithms
     • Website Navigation
       • <nav class=“navbar”></nav>
       • <a href=“”></a>