Website design

Website design

1. Prescribed criteria

   • PC 1: Use at least two aspects styled with CSS
   • PC 2: Use html to organise the appropriate information that include five of the following items: image, table, links, ordered or unordered list, buttons, different size headings, paragraphs and videos.
   • PC 3: The website has an aesthetic that align to user persona

2. User Persona

   • wants
     • Provide brief description and image/ video of contents in the website
     • Have dark mode
     • Other resources about computer science like operating system and AI
   • needs
     • A website provide links to various programming language resources
     • Information on the website on newest and updated. Also, resources are not blocked at school
   • what don't want
     • lots of ads
     • Messy website
     • Outdated information
     • Some websites are blocked at school, and its annoying when need to access those resources
   • Details
     • Name: Welt Lin
     • Occupation: Yr 9 student at high school
     • Live: Sydeny,NSW
     • Age:14
     • Goal: Master a programming language and create a software

3. Solutions

   • solution 1 (chosen)
     • Pro
       • Simple and clear
       • Showing vital contents without extra decorations
       • Dark and light mode
     • Con
       • Website may not be interesting and be bored
       • The information on the website may not suit user's need because they want to see more rare/ uncommon things. Eg. programming languages that don't used much
   • solution 2
     • Pro
       • Lots of images or GIF that makes the website become more attractive
       • More webpages to have more contents
       • High colour contrast to highlight the important data
     • Con
       • Too much decoration makes website looks messy
       • Too many subpages cause the user can't find the content they need without long time/guide

4. User interface

   • Features
   • User Interface Components
     • Hyperlinks: External links to programming resources, official websites of code editors, Windows and Linux download, windows commands, and computer science articles
     • Images: images of preview of the website or logo were included in mine website
     • Buttons: buttons that direct user to the home page and change to dark/light mode
     • Paragraphs: <p> tag was used to show the descriptions
     • headings: <h1> and <h2> tags for largest and second largest headings
   • Aesthesic
     • Dark and light mode: Dark mode has black background with white text. Light mode has white background with black text
     • Simple and clear information: contents are separated into sectors with <div>, <br> and <hr>

5. Coding environment

   • Key algorithm
     • Website investigation
       • modern websites include various colourful images to attract customers
       • Have features like slideshow
       • Lots of subpages but having search button
   • Developer tools
     • Notepad++: A free text and source code editor that support many programming languages
   • Coding language
     • Hyper Text Markup Language(HTML) : The standard markup language for documents designed to be displayed in a web browser
     • Cascading Style Sheets (CSS): A style sheet language used for specifying the presentation and styling of a document