Course Title: Web Development
Course Code: IRM1005 / ITEC1005
Semester: Fall 2023
Due Date: 11:59 PM on December 8, 2023
Assessment: This assignment is worth 15% of your final grade and marked out of 100.
- Sketch a concept that the team is going to build (landing page or web app or game)
- Build your one page site or web app or game
- Commit your code to your assignment repository in GitHub.
- Turn on GitHub Pages in your assignment repository to host your web page online.
Project teams must work together to build and deliver a product. Teams will have wide leeway on what they can build, though some possible options are below:
- Full responsive one page website for a non profit or commercial entity
- Productivity app like a complex To Do Manager, Conversion Calculator, or other tool that fulfills a user need
- A fun game like Wordle, Hangman, Checkers, Memory, Rock Paper Scissors
You must use HTML, CSS, and JS to build your product. And your code must be pushed to GitHub using the classroom repository for the Group Project.
Students will also be assessed on their ability to commit their code to GitHub and activate the GitHub pages service.
- Monday November 20th - Sunday November 26th
- Introduce project, discuss expectations and form teams.
- Setup project repository on GitHub
- Monday November 27th - Sunday December 3rd
- Begin initial development of the project
- Publish product description including initial product sketches by Monday November 27th
- Monday December 4rd - Friday December 8th
- Continue development and testing of the project
- Pair and share feedback exercise on Monday December 4th
- 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 |
|---|---|---|
| Product description | 10% | The initial product summary should include a high level description of the product that the team is building, including information on what is in scope and out of scope for the project. The product sketches can be pencil sketches, or low fidelity through an app like figma or tldraw, and must be done for all web pages that are in scope. |
| 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. Note: if your project does not have any JavaScript code then your HTML and CSS marks will be weighted higher |
| 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. |
There are no extensions for the Group Project. Whatever your team has submitted by the specified due date will be assessed.
To help with your submission, make sure that you have reviewed the following items
- Your app or game has the minimum functionality required
- Your code is committed and pushed to the GitHub repo that GitHub Classrooms created for you
- Your webpage is fully responsive and works on a wide variety of devices
- 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?
- Yes. The Product Descriptions are required to be completed by Monday November 27th. Please share your initial design or creative process in your GitHub Repo along with a description of the product that you intend on building.
- 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.