Algonquin College
MAD9022
FullStack: Frontend Development
Course Outline
2023-2024
- Pre-requisite(s)
- MAD9013 and MAD9014
- Co-requisite(s)
- MAD9124
- Prepared by
- Steve Griffith
- Approved by
- Shirley Piersma, Academic Chair, Media Studies
- Approval date
- Monday, November 27, 2023
- Normative hours
- 70.00
- Grading system
- A+ Through F
| Applicable Program | Level | Core/Elective |
|---|---|---|
| 1515X01FWO - Mobile App. Des. & Dev | 2 | Core |
Course Description
Students build on their web design and development skills through applied practice with modern web development features including Web Components and Service Workers. Students learn to build a range of Full-stack web projects with approaches such as Progressive Web Apps, Single Page Applications, JAMStack applications, plus frameworks such as React, Svelte or Vue. Students work in teams to build Full-stack solutions.
Vocational Learning Outcomes
This course provides the opportunity for you to achieve the following outcomes:
1515X01FWO - Mobile App. Des. & Dev
| VLO 3 | Create effective user interfaces that leverage evolving mobile device capabilities. (T, A) |
|---|---|
| VLO 4 | Design and develop websites that deploy to different devices and platforms. (T, A) |
| VLO 5 | Design and develop cross-platform applications built with rich-media and HTML-based technologies. (T, A) |
| VLO 7 | Research and apply various software development kits (SDKs), frameworks and toolkits. (T, A) |
Assessment Levels —T: Taught A: Assessed CP: Culminating Performance
Essential Employability Skills
This course contributes to your program by helping you achieve the following Essential Employability Skills:
| EES 5 | Use a variety of thinking skills to anticipate and solve problems. (T, A) |
|---|---|
| EES 9 | Interact with others in groups or teams in ways that contribute to effective working relationships and the achievement of goals. (T, A) |
| EES 10 | Manage the use of time and other resources to complete projects. (T, A) |
Assessment Levels —T: Taught A: Assessed CP: Culminating Performance
Course Learning Outcomes / Elements of Performance
When you have earned credit for this course, you will have demonstrated the ability to:
1. Construct Web Components with embedded styles and functionality which can be reused in modern web applications.
1.1
Extend HTMLElements to create web components that can be used in HTML pages.
1.2
Define CSS styles inside of a DOM ShadowRoot as part of a web component.
1.3
Use HTML templates and Slots to create web components that can accept external content and data from the HTML page to be used as part of the final component.
1.4
Use built-in web component event methods to manage web component behaviour when they are created, removed, or updated.
1.5
Extend web component classes with additional functions and behaviours beyond the built-in methods.
2. Employ service workers to create offline capable Progressive Web Applications.
2.1
Create web manifest files and launcher icons for installable Progressive Web Apps.
2.2
Write JavaScript and HTML based web applications that demonstrate best security practices with Content-Security-Policies and CORS guidelines.
2.3
Construct a service worker that manages every HTTP Request and Response for its target website.
2.4
Store files with the Cache API to create a PWA capable of running offline.
2.5
Store PWA data in cookies, web storage, and/or IndexedDB.
2.6
Use Chrome Dev Tools and Lighthouse Reports to test a PWA.
2.7
Use the Web Messaging APIs to pass information between web page scripts and service workers.
3. Use version 18 of the React framework with best industry practices for hooks, functional components, and the context API to construct modern web applications.
3.1
Create a web application with React components written with JSX.
3.2
Use React Router version 6 to control website navigation.
3.3
Use React Hooks to manage React components within a web application.
3.4
Use the React Context API to manage global application state.
3.5
Extend Styled Components to style and theme a React Application.
3.6
Create React applications and can run in a development or production environment.
3.7
Explain how to connect a React project on Github with a hosting service like Netlify or Vercel.
4. Combine multiple Web APIs, which use modern device capabilities, within web applications.
4.1
Demonstrate the use of the Media Source API to control media playback within a website.
4.2
Explain the differences between different data storage approaches in the browser, such as Cache API, IndexedDB, Web Storage API, and Cookies.
4.3
Demonstrate how the Geolocation API works.
4.4
Use the Notification API to display messages to website visitors.
4.5
Explain how the Web Authentication API creates an alternative to traditional username and password logins.
5. Work with other developers, using modern web tools, to manage web application projects across development and production environments.
5.1
Use Git branches and pull requests to manage a project with other developers.
5.2
Use Vite as part of a React web application development process.
5.3
Explain the differences between Typescript and JavaScript.
5.4
Demonstrate how to use development and production environments as part of the web application development process.
5.5
Build and integrate a custom REST API with a PWA or React Web App.
Learning Resources
Weekly Activities
In-class lectures, quizzes, coding practice and exercises - 4 hours per week.
Asynchronous learning activities - 1 hour per week.
Assigned readings, video tutorials, practice work, and exercises outside of class - minimum 5 hours per week.
Supporting Resources
No required textbook.
Course website filled with tutorials, videos, and other links.
Numerous online written and video tutorials.
Required Software
Windows 10
MacOS
VS Code IDE for web and mobile development
Android Studio IDE plus Android SDK and APIs
Xcode IDE iOS SDK and APIs
Apple Developer Account
Git
Node JS and NPM
Learning Activities
1. Hands-on exercises, assignments and projects
2. Online quizzes
3. Remote and/or in-class discussions
4. Verbal quizzes
5. Remote and/or in-class lectures
6. Video tutorials
7. Pairs Programming
2. Online quizzes
3. Remote and/or in-class discussions
4. Verbal quizzes
5. Remote and/or in-class lectures
6. Video tutorials
7. Pairs Programming
Pre-defined Evaluation / Earning Credit
The following list provides evidence of this course's learning achievements and the outcomes they validate:
Project(s) (40%)
Validates Outcomes: CLO 2, CLO 3, CLO 5, EES 5, EES 9, EES 10
Assignment(s) (30%)
Validates Outcomes: CLO 1, CLO 4, EES 5, EES 10
Hybrid Assignment(s) (30%)
Validates Outcomes: CLO 4, EES 5, EES 10
Prior Learning Assessment and Recognition
Students who wish to apply for Prior Learning Assessment and Recognition (PLAR) need to demonstrate competency at a post-secondary level in all outlined course learning outcomes. Evidence of learning achievement for PLAR candidates includes:
- Portfolio
- Project/Assignment
Other Information
Grade Scheme
| Final Grade | Mark Equivalent | Numeric Value | Final Grade | Mark Equivalent | Numeric Value |
| A+ | 90% - 100% | 4.0 | A | 85% - 89% | 3.8 |
| A- | 80% - 84% | 3.6 | B+ | 77% - 79% | 3.3 |
| B | 73% - 76% | 3.0 | B- | 70% - 72% | 2.7 |
| C+ | 67% - 69% | 2.3 | C | 63% - 66% | 2.0 |
| C- | 60% - 62% | 1.7 | D+ | 57% - 59% | 1.4 |
| D | 53% - 56% | 1.2 | D- | 50% - 52% | 1.0 |
| F | 0% - 49% | 0 | FSP | 0 | 0 |
Course Related Information
Please refer to the Course website for specific course-related information as provided by your professor.
Program Information
1515X01FWO - Mobile App. Des. & Dev
The late policy for assignments is a 10% per day deduction to a maximum of 30%.
If an assignment is still not submitted 10 days after the due date then a grade of zero will be given for the assignment. Students can still submit work for review and feedback after the 10 days but no grade will be given.
Any extensions to due dates must be arranged with the course instructor BEFORE the due date.
If an assignment is still not submitted 10 days after the due date then a grade of zero will be given for the assignment. Students can still submit work for review and feedback after the 10 days but no grade will be given.
Any extensions to due dates must be arranged with the course instructor BEFORE the due date.
Department Information
College Related Information
Algonquin College’s policies have been developed to ensure the health, safety and security of all students, faculty and staff, and the proper and fair operation of the College as an academic institution and employer. Please refer to the Algonquin College Policies website for the most current policy information available at http://www.algonquincollege.com/policies/.
Students are especially encouraged to be aware of the following College expectations
Academic Integrity
Algonquin College is committed to the highest standards of academic integrity, and students are expected to uphold these standards as part of the learning process. Any academic work submitted by a student is expected to be their own work, unless designated otherwise and all sources must be attributed. All students should be familiar with the Algonquin College policy AA48: Academic Integrity which outlines student’s roles and responsibilities and what represents academic misconduct. In some courses, online proctoring may be used to prevent academic dishonesty. Additional information can be found at Academic Integrity - Student Survival Guide - Subject Guides at Algonquin College (libguides.com) and via Academic Integrity Student Resources. Students with any questions about the course expectations regarding academic integrity are encouraged to speak to their professor and the College’s academic integrity team at acaio@algonquincollege.com
Centre for Accessible Learning
Students with visible and/or non-visible disabilities are encouraged to register with the Centre for Accessible Learning (CAL) in order to be eligible for appropriate learning supports and/or accommodations. Students are strongly encouraged to make an appointment with the Centre for Accessible Learning as early as possible when starting a program. Once your needs are identified, a Letter of Accommodation (LOA) will be issued which you can share with your professors. If you are a returning student, please ensure that professors are given a copy of your LOA each semester.
College Email
Students at Algonquin College are provided with a college email account. This is the address that will be used when the College, your professors, or your fellow students communicate important information about your program or course activities. Your network credentials can be found in the ACSIS portal and you are expected to check your Algonquin email regularly and to use it to send and receive college-related email. Support is available through the college Information Technology Service (ITS) at: https://www.algonquincollege.com/its/
Retroactive Accommodations
Students are expected to meet evaluation and completion deadlines as stated in course outline and course section information documents. In circumstances where evaluation and/or completion deadlines are missed or student performance has been affected by a temporary or permanent disability (including mental health), interim or retroactive accommodations may be considered. In such instances, please consult your course faculty member. For other situations where deferral of evaluations may be warranted, please consult Algonquin College Policy AA21: Deferred Evaluation.
Student Course Feedback
Algonquin College’s invites students to share their course experience by completing a student course feedback survey for each course they take. For further details consult Algonquin College Policy AA25: Student Course Feedback.
Use of Mobile Devices in Class
With the proliferation of small, personal mobile devices used for communications and data storage, Algonquin College believes there is a need to address their use during classes and examinations. During classes, the use of such devices unless authorized by your professor can be disruptive and disrespectful to others. During examinations, the use of such devices is generally prohibited unless authorized by your professor. Otherwise use is considered academic dishonesty in the form of cheating. For further details consult Algonquin CollegePolicy AA32: Use of Mobile Devices in Class
Technology Requirements
Students are required to have access to a computer and to the internet. There may also be additional technology-related resources required to participate in a course that are not included in the course materials fee, such as headphones, webcams, specialized software, etc. Details on these requirements can be found in the Course Section Information of the course outline for each course available on Brightspace.
Transfer of Credit
It is the student’s responsibility to retain course outlines for possible future use to support applications for transfer of credit to other educational institutions.
Safe Harbour
In the event of an unexpected major event (pandemic, etc.), your course may have changes that are not reflected in the Course Outline. Should this happen, the Course Section Information document will have updated information about your course.
Students are especially encouraged to be aware of the following College expectations
Academic Integrity
Algonquin College is committed to the highest standards of academic integrity, and students are expected to uphold these standards as part of the learning process. Any academic work submitted by a student is expected to be their own work, unless designated otherwise and all sources must be attributed. All students should be familiar with the Algonquin College policy AA48: Academic Integrity which outlines student’s roles and responsibilities and what represents academic misconduct. In some courses, online proctoring may be used to prevent academic dishonesty. Additional information can be found at Academic Integrity - Student Survival Guide - Subject Guides at Algonquin College (libguides.com) and via Academic Integrity Student Resources. Students with any questions about the course expectations regarding academic integrity are encouraged to speak to their professor and the College’s academic integrity team at acaio@algonquincollege.com
Centre for Accessible Learning
Students with visible and/or non-visible disabilities are encouraged to register with the Centre for Accessible Learning (CAL) in order to be eligible for appropriate learning supports and/or accommodations. Students are strongly encouraged to make an appointment with the Centre for Accessible Learning as early as possible when starting a program. Once your needs are identified, a Letter of Accommodation (LOA) will be issued which you can share with your professors. If you are a returning student, please ensure that professors are given a copy of your LOA each semester.
College Email
Students at Algonquin College are provided with a college email account. This is the address that will be used when the College, your professors, or your fellow students communicate important information about your program or course activities. Your network credentials can be found in the ACSIS portal and you are expected to check your Algonquin email regularly and to use it to send and receive college-related email. Support is available through the college Information Technology Service (ITS) at: https://www.algonquincollege.com/its/
Retroactive Accommodations
Students are expected to meet evaluation and completion deadlines as stated in course outline and course section information documents. In circumstances where evaluation and/or completion deadlines are missed or student performance has been affected by a temporary or permanent disability (including mental health), interim or retroactive accommodations may be considered. In such instances, please consult your course faculty member. For other situations where deferral of evaluations may be warranted, please consult Algonquin College Policy AA21: Deferred Evaluation.
Student Course Feedback
Algonquin College’s invites students to share their course experience by completing a student course feedback survey for each course they take. For further details consult Algonquin College Policy AA25: Student Course Feedback.
Use of Mobile Devices in Class
With the proliferation of small, personal mobile devices used for communications and data storage, Algonquin College believes there is a need to address their use during classes and examinations. During classes, the use of such devices unless authorized by your professor can be disruptive and disrespectful to others. During examinations, the use of such devices is generally prohibited unless authorized by your professor. Otherwise use is considered academic dishonesty in the form of cheating. For further details consult Algonquin CollegePolicy AA32: Use of Mobile Devices in Class
Technology Requirements
Students are required to have access to a computer and to the internet. There may also be additional technology-related resources required to participate in a course that are not included in the course materials fee, such as headphones, webcams, specialized software, etc. Details on these requirements can be found in the Course Section Information of the course outline for each course available on Brightspace.
Transfer of Credit
It is the student’s responsibility to retain course outlines for possible future use to support applications for transfer of credit to other educational institutions.
Safe Harbour
In the event of an unexpected major event (pandemic, etc.), your course may have changes that are not reflected in the Course Outline. Should this happen, the Course Section Information document will have updated information about your course.