Course Title: Web Development
Course Code: IRM1005 / ITEC1005
Semester: Fall 2023
Due Date: 11:59 PM on November 26, 2023
Assessment: This assignment is worth 15% of your final grade and marked out of 100.
- Build a Todo list wep app.
- Conduct a code review on a team members assignment 04 submission.
- Commit your code to your assignment repository in GitHub.
- Turn on GitHub Pages in your repository to host your web page online.
Todo lists are like a "right of passage" in webdev tutorials. A simple Todo list can be written in a couple dozen lines of code. There is, however, a huge opportunity for innovation, enhancements and features that can take this project from a learning opportunity to a showcase you put on a portfolio.
Your Assignment 04 involves building and shipping an awesome and innovative Todo list app, as well as doing a basic code review on a team member's submission.
Students will also be assessed on their ability to commit their code to GitHub and activate the GitHub pages service.
- Instructions for the app
- Instructions for the code review
- Screenshots for inspiration
- Acceptance criteria
- Grading rubric
- Checklist
- FAQ
- Helpful Links
- Use HTML, CSS, and JS to build a basic Todo List web app.
- The UI/UX is completely up to you, though it must be responsive and at a minimum enable users to view, add, mark as done, and delete
todos. - Using user centered design principles, consider what additional properties and features your users may need for an awesome Todo list.
- Your
todosare going to have, at a minimum, anid,textandcompletedstatus. - You should also have an awesome empty state when a user first opens your app (examples).
- Though not required, consider "branding" your app with a cool product name, and logo.
It is your responsibility to both request a code review from your team members and to conduct a code review for one of your team members.
- When you are between 50% - 100% completed your assignment 04, inform your team members that you require a code review. Post a message in our GitHub Discussion group if you need a code review.
- Work with your team members to identify when someone requests a code review
- Create a GitHub Issue in your team members assignment repository to record the results of the following checks
- Check to see that their HTML code validates using the WC3 HTML Validator
- Check to see that their CSS code validates using the W3C CSS Validator
- Check to see that basic functionality is working in their web app (add todo, delete todo, mark as done)
The following are some samples of excellent Todo List applications out there. You do not, and should not build these specfic designs. This is only being shared to illustrate what the industry is putting out there right now, and to provide some inspiration for your own designs and features.
- Publish your code to GitHub using the GitHub classrooms generated repository
- Use the GitHub Pages service to host your pages
- GitHub time stamps on your project files will be used to asses when the assignment was submitted
- Ensure you have a license file in your repository (recommend MIT license)
The creation and posting of this web app is worth 15% of your final grade and marked out of 100.
| Criteria | Total Marks | How we define excellence |
|---|---|---|
| Visual design and layout | 10% | The design presented demonstrates an excellent use of colour (or lack thereof), typography, high quality graphics, and iconography. The design also comes across as cohesive, inviting, and illustrates a focus on user experience. An excellent design also includes a way of delighting users and adding moments of charm to their experience. The solution is responsive to the users' viewport and displays well in mobile, tablet, and desktop browsers. |
| Overall Code Quality | 10% | The HTML, CSS, and JS Code is well formed, structured, and compliant. Approriate semantic elements and heading structure are used. No run time errors occur. CSS is stored in a seperate file and the style tag as well as inline styles are avoided. |
| Add to do | 10% | Ability to add a to do item |
| Delete to do | 15% | Ability to delete a to do item |
| Mark a to do as done | 15% | Ability to mark a todo item as completed |
| Moments of charm | 10% | App adds something special such as annimations, transitions, categories, or anything else that elevates the user experience from "normal" to "awesome". |
| Code review | 20% | Perform a code review on a team members assignment submission and record the results within a GitHub issue in a team members assignment repository. |
| GitHub submission | 10% | All of the project files (HTML, CSS, JS, assets) are added to your assignment repository on GitHub. The repository has both a populated READMe.md file and a MIT license file. |
- If you are ill or any other issues arise that are beyond your control, please email [email protected] before the specified due date to request a one week extention.
- If you fail to obtain an extentaion or fail to inform the instructor of any extenuating circumstances that cause a delay in your submission by the posted due date, you will receive a mark of Zero (0) for the assignment.
To help with your submission, make sure that you have reviewed the following items
- Your app has the minimum functionality required for a basic Todo List App (add, delete, mark as done)
- Your code is committed and pushed to the GitHub repo that GitHub Classrooms created for you
- You have conducted a code review on one of your team members assignments
- One of your team members have conducted a code review on your assignment
- GitHub Pages is activated for your repo and your web page is live and accessible. If you are unsure, send your link to a team member and see if they can access your site from their machine.
- Do I have to put comments in my code?
- No! You do not need to comment your code. That being said, it is an industry best practice to add comments to your code, so I would recommend that you add comments to your code where it makes sense, but this is not required.
- Does the web page / web app have to work in both mobile and desktop?
- Yes! You must build your app to be completely responsive.
- Can I use lorem ipsum text in my web page / web app?
- You may use lorem ipsum if you need to but ideally by now you should be using relevant content in your projects. Though, if you don't have relevant content you are absolutely permitted to use lorem ipsum, bacon ipsum, or vegan ipsum in your designs. Keep in mind that this should not be used in cases where the meaning of the text is important, for example the call to action buttons in the hero.
- Do I need to include sketches, concepts, or initial low fidelity mockups in my submission?
- No. If you would like to share your design or creative process I'm happy to look at them, but it is not required.
- Can I use trademarked or copywritten material on my page?
- Yes! As this is for educational purposes, all of the source is open, and no one is trying to sell their design or code you can absolutely use trademarked or copywritten material.