Your task in Assignment 1 is to develop a static website that helps you explain your ideal first professional project to friends, family and prospective employers. Build the user interface of the website using static HTML and CSS. Feel free to use any HTML/ CSS elements, the only constraint is that the entire site should be coded by hand using editors such as Visual Studio Code. No frameworks are allowed for this 2 assignment. In the next assignment, you will essentially rebuild the website, with the freedom to use CSS, JavaScript frameworks of your choice to improve the user experience. It should be useful in this assignment for you to focus on developing clarity within the team for the project concept. What is the specific product or service you would like to describe/ sell? What information would be most useful to display? What user calls to action would be most useful and how best can you present them? These take time, and it may even be useful to develop the concept on pen and paper, whiteboards etc. A good site structure would be a landing page, a product page, and an about us page. Plan your site and create a fully functional static version of the site. The about us page is mostly meant to facilitate grading and to help the instructors/ TAs learn about your group and its aspirations.

When completed, upload the website to your My Web folder. The upload to My Web should contain all the elements needs for the website to work, including HTML, CSS, and images files. The assignment is straightforward, and intended to help you practice HTML, CSS to get good design results. Submit the URL to the My Web home page (typically index.html) as the assignment deliverable for your group.

Grading scheme

I. (3 points) Content Website content and the relevance of the site for end users

II. (3 points) Look and feel professionalism, consistency, adoption of recommended design guidelines and general attention to detail across all pages on the site

III. (2 point) Usability ease of use, consistency, and navigation of your interface for end users

IV. (2 points) Responsiveness compatibility with small (mobile), medium (tablet) and large (desktop) screen sizes

V. (2 points) About us page group member details and contributions. This page facilitates grading. Add this page after you have built your site, maintaining consistency with the look and feel of the rest of the site so the page feels like an integral part of the site. The page should include a picture and brief information about each group member and describe each team members contribution 3 in brief. You can also use this page to show off your work to visitors, including any interesting features on the site you would like to draw attention to. VI. (2 points) Each student should add a self-reflection comment to your submission, reflecting on your learnings, total time required and any recommendations for future assignments. This should go to the comments section of the assignment, so it is easier for the instructors and TAs to access later. Note, for any student that does not submit a self-reflection, credit is deducted for all members of the group.

References Design guidelines: https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-guidelines-for-exceptional-website-design-and- usability.aspx

https://www.canva.com/learn/20-web-design-principles-follow/

A directory of designers https://www.webdesignsociety.com/webDevelopers.html

Design tools Balsamiq (for wireframing quick, disposable concept diagrams)

Figma (for precise mockups detailed, pixel-perfect mockups