Sprint 2: Project Design and HTML
Due: February 24, 2025 at 11:59pm
Purpose: This assignment will help you practice the following skills, reinforce knowledge, and experience HTML/CSS development.
- Develop layouts / static web components of your project using HTML, CSS, and bootstrap
- Understand the structures of web application (browser objects and document objects)
- Apply software usability concepts to improve the quality of web application
- Evaluate your web application for compliance with the requirements and the usability evaluation criteria
- Work as a team, collaborate with your project partner(s) professionally and contribute fairly
Overview
In this assignment, you will work in your project groups to build a mockup of the project you proposed in Sprint 1 using HTML and CSS. In addition to your own CSS, you may also make use of Bootstrap. It is important to note that your own CSS is mandatory, utilizing Bootstrap’s CSS is optional.
The goal of this sprint is for you to create a basic design that you will use and embellish over the course of the semester. For the purposes of this sprint, you will be making at least three different screens (UIs from previous assignment or newly designed UIs) that will be part of your project. As an example, you may choose to create the landing page, login page, and some data entry page.
Outside-in, not inside-out! You should start by creating static HTML / CSS layouts and not be concerned with how the pages will handle information (e.g., how to store and process it). For HTML that will eventually be created dynamically based on data or user actions, you should build a mockup and display a version of the page with dummy data.
You will also ensure that your code is valid HTML5 (to ensure optimal compatibility) and that it meets Section 508 standards (to ensure accessibility of your site).
Sprint Requirements
Please consider the following as minimum requirements only. You are strongly encouraged to get creative and do more than this, but this is what will be required to receive full credit.
Minimum Requirements
- HTML: Create at least four different screens with respect to the functionalities you proposed
- If you are building a single page application, be sure to have them as three different views on the same page (you will later add dynamic behavior to each view)
- The screens must allow users to interact with the system
- At least one screen must accept users’ data entries (i.e., inputs)
- You decide the kinds of HTML elements (for data entries) that are appropriate to your project
- CSS: Define at least ten different CSS rules. They must be your own CSS rules (not Bootstrap or from another site). If you have ten CSS rules that set ten different font colors, for example, they are counted as one.
- We expect you to be able to define CSS rules to style the screens
- Some of your CSS rules may be inline or at the document level
- Some of your CSS rules may be in an external CSS file (preferred)
- Reminder: each CSS rule consists of (i) a selector and (ii) a collection of declarations. Thus, having a single selector with multiple declarations counts as one rule. Likewise, having multiple selectors share the same declaration block also counts as one rule.
- Have at least one external CSS file
- Have at least two CSS rules that update the style or layout of your screens when specific events occur
- You may find a “pseudo class” selector particularly useful.
- Support responsive layout (i.e., support different devices, different sizes of screens)
- Produce valid HTML (validate with the W3C validation engine)
- Ensure Section 508 Accessibility Compliance (validate with the open source ANDI tool)
- Use good coding style
- Make identifier names understandable
- Use proper and consistent indentation
- Use comments
- Use carriage return
- Deploy your app (.html, .css) to our cs4640 server. Instructions available online.
- Include the URL for your app in a comment in the header of your
index.html
file. Only one partner needs to host the site on our server, but we encourage everyone to host.
- Include the URL for your app in a comment in the header of your
Suggested Features
You may wish to include additional aspects to improve the usability of your project, such as:
- HTML:
placeholder
attributepattern
attribute (for regex validation)autocomplete
attributevalue
attributealt
attribute- Other attributes of HTML elements such as
title
andrequired
- Semantic layout elements (header, footer, section, article, etc)
- CSS:
- Selector types
- Pseudo classes
- Padding and border
- Z-index and opacity
- Positioning schemes
- Transform
- Transition
- Flexbox or Grid layout
- In addition to your own HTML and CSS rules, you may make use of publicly available template and/or CSS bootstrap. Be sure to cite the resources properly
Grading Rubric
Total: 100 points
- 25 points: HTML
- 20 points: Properly create at least four different screens with respect to the functionalities you proposed (5 points each)
- If you are building a single page application, be sure to have them as three different views on the same page
- 5 points: Properly accept users’ data entries (i.e., inputs), but does not need to process input
- 20 points: Properly create at least four different screens with respect to the functionalities you proposed (5 points each)
- 30 points: CSS
- 20 points: Correctly and properly define at least ten of your own CSS rules (2 points each)
- We expect you to be able to define CSS rules to style the screens
- Reminder: each CSS rule consists of (i) a selection and (ii) a collection of declarations. Thus, having a single selector with multiple declarations counts as one rule. Likewise, having multiple selectors share the same declaration block also counts as one rule.
- 4 points: Properly implement and use at least one external CSS file
- 6 points: At least 3 of your ten CSS rules properly update the style or layout of your screens when specific events occur (2 points each)
- 20 points: Correctly and properly define at least ten of your own CSS rules (2 points each)
- 5 points: Support responsive design / layout - the user demonstration should utilize the responsive design mode of the browser to showcase
- 5 points: Adherence to all usability concepts as discussed in class
- 5 points: Valid HTML (by the W3C Validator)
- 5 points: Section 508 Compliant code (by the ANDI tool)
- 5 points: Use good coding style: readability, style, and maintainability
- Make identifier names understandable
- Use proper and consistent indentation
- Use comments
- Use carriage return
- 5 points: Deploy the site to the cs4640 server
- 15 points: User demonstration
- 10 points: Program is demonstrated clearly
- 5 points: Code segments clearly explained
The overall behavior of your app must be a single unit. It must not be disconnected. All parts / components must be properly connected. That is, once a user enters your app through a web browser, there is an appropriate navigation system and / or an execution flow allowing a user to achieve her / his goal(s) without (re)visiting another part of your app manually (for example, by entering another URL in a web browser’s address bar).
- Overall, your entire project must work as expected (note that the backend functionalities will work at the moment — you will implement the backend functionalities for Sprint 3); it must provide normal behavior, given the domain application of the project.
Note: All partners must be present at the demo. Otherwise, 10 points will be deducted and you are required to reschedule the demo.
- -5 points: More than 5 minutes late for demo
- -10 points: Cancel or change the demo time less than 2 hours before the scheduled time
- -10 points: No show for the 1st signed-up demo time
- -100 points: No show for the 2nd signed-up demo time (no points will be awarded for the sprint if you do not demo your work)
- -100 points: No demo (no points will be awarded if you do not demo your work)
- -10 points: Not submitting all files necessary for your project to be functioning to Gradescope
- -10 points: Not all team member names included as authors of the programs/files (based on contribution, in the
meta
tag or in comments in CSS) or not all team members’ names are included in the group when submitting to Gradescope - Unless a demo arrangement has been made prior to the sprint due date, a demo must be completed within one week after the due date. Otherwise, a zero grade will be assigned.
Submission
Upload all of your .html, .css, and any image files to the Sprint 2 assignment on Gradescope. Gradescope will accept a zip file, individual uploads, or a GitHub repository for your submission. You must include your partner in the group submission on Gradescope for both partners to get credit for the assignment.
- The files submitted must be all the files necessary for your project to run on the cs4640 server or a similarly configured server.
- Include all partners’ names as authors of the files (in a
<meta>
tag in HTML or a comment in CSS) based on their actual contributions (who wrote which content) - Include in a comment in the header of your
index.html
file the URL to your working version on the cs4640 server
Your program will be graded during an interactive session in which you demonstrate it to the course staff (instructor and/or TA). You will have to sign up for a demonstration slot in order to do this. A sign up page will be available for you to use as the deadline approaches. Sign up early so that you get a time slot you want.
If you do not do a demonstration, you will receive no credit for the sprint.
Part of your grade will be based on explaining code segments and/or design to the instructor or TA. Come to the demonstration prepared to talk about your code.
Even though you will be demonstrating the files after the deadline, all the code must EXACTLY match the code that was submitted, and cannot have been modified after submission deadline. Several randomly selected assignments will be tested by installing the submitted files back onto the server before running the program. If it is determined that your code was modified after submission deadline, you will not receive credit for it.
Note: Making your submission available to the course staff is your responsibility; if we cannot access your files and your site on the cs4640 server, then we have to assign a zero grade. Be sure to test access to your files before the due date.
Important Note: All code in this assignment must be your own! You are free to use the course handouts and examples, as well as Bootstrap examples, as a starting point. You may refer to online resources with proper citation but you CANNOT take full code from the web, chatGPT or other generative ai, or any other source. Assignments that are found to have done this will be given a zero and submitted to the Honors Committee. You may not use code you have submitted for another course.