Course Title: Web Development
Course Code: IMD1005
Semester: Winter 2023
Due Date: 11:59 PM (midnight) 2023-03-19
Assessment: This assignment is worth 25% of your final grade and marked out of 100.
- Build a Todo list wep app.
- Add the code for your web app to a GitHub assignment 03 repository and host the app online using the GitHub pages service.
- Conduct a code review on a team members assignment 03 submission.
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 03 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.
- Use HTML, CSS, and JS to build a 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, atitle, anddonestatus. - 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 03, inform your team members that you require 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 03 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)
- Publish your code to GitHub using the GitHub classrooms generated repository
- Use the GitHub Pages service to host your pages
- Ensure you have a license file in your repository (recommend MIT license)
- Ensure you have the assignment readme.md file in your repository
The creation and posting of this web page is worth 25% of your final grade and marked out of 100.
| Criteria | Total Marks | How we define excellence |
|---|---|---|
| Visual design and layout | 20% | 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. |
| HTML | 20% | The HTML code submitted is well formed, structured, and complaint. Appropriate semantic elements are used throughout the document. For example, use <header> for the page header and <section> for each document section within <main>. Correct use of headings <h1-h6> and heading structure. The web page has the appropriate meta tags in the <head> to set the charset, viewport and IE11 legacy mode values. |
| CSS | 20% | The CSS code submitted is well formed, structured, and compliant. A CSS reset file is used to 'reset' all of the default browser styles. The web page renders correctly in multiple browsers, including but not limited to Firefox and / or Chrome. All CSS should be referenced from an external file. The web page should not use a <style> tag or a embedded style attributes to apply CSS to the page. |
| JavaScript | 20% | The JS code submitted is well formed, structured, and compliant. No run time errors should occur. If an error occurs it should be caught and dealt with appropriately. Your code should be written to the latest ECMAScript 2022 standard. |
| Code review | 10% | Perform a code review on a team members assignment 03 submission and record the results within a GitHub issue in a team members assignment 03 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 intend to use one of your assignment extensions please email [email protected] before the specified due date
- If you are ill or any other issues arise that are beyond your control, please email [email protected] before the specified due date to discuss alternate arrangements
- If you fail to request your late pass, or fail to inform me of any extenuating circumstances that cause a delay in your submission by the due date, you will receive a mark of Zero (0) for the assignment
- If you use your late pass, and fail to submit your assignment by one week after the specified due date, you will receive a mark of Zero (0) for the assignment
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 to for your own designs and features.
- 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.