2 of 10

Learning objectives

By the end of this lesson, you should be able to:

describe the assignment and how you will be marked
understand how this assignment allows you to demonstrate skills you have learnt about the fundamentals of the web
start working on your assignment!

3 of 10

Assignment: Your Epic

There is a school just down the road from yours that has noticed the students at their school are coming unprepared and late to class.

After a staff meeting, the school decided to launch Operation STACOT (Students To Attend Class On Time). This operation involved students creating their own apps and tools to help them get to class on time.

Operation STACOT was such a success that your principal has decided to launch the operation as well. So, your epic is:

The principal of your school wants to see all students attend class on time and prepared.

4 of 10

Assignment: Your User Story

One user story that was generated from your principal’s epic is:

As a principal I want my students to be able to view their classes on a selected day on their phones so that they can attend class on time and prepared, with the correct books.

5 of 10

Assignment: Skills

Your website will allow you to demonstrate:

Your knowledge of HTML
Your knowledge of CSS
Your knowledge of colours
Your knowledge of mobile first development
Your creativity in designing a user interface
Your ability to evaluate a website against a user story

6 of 10

Assignment: Design

Use your worksheets from last time to help guide your design
Incorporate the feedback you have gathered in lesson 6 (where necessary)
We are using the agile methodology, so there is always time for adjustments!
The next few slides will show you how to ‘open’ a mobile phone in google chrome

7 of 10

Mobile Emulator in Google Chrome

You can emulate how your website would look on a mobile in Google Chrome by using the developer tools.

Select “More Tools -> Developer Tools” or;
Use the keyboard shortcut CTRL-SHIFT-I on Windows or;
CMD-OPTION-I on a Mac

8 of 10

Mobile Emulator in Google Chrome

In developer tools, you can “toggle device toolbar” by clicking the phone icon or using the shortcut CTRL-SHIFT-M on Windows and CMD-SHIFT-M on a Mac.

Then you can use the drop down list to choose a device and you web page will be displayed as it would appear on that device.

9 of 10

Assignment: Detailed Instructions & Links

Assignment Specification

Describes what you need to do

Design Template Documents

For brainstorming your design

Startup / Template Code on Replit

Code to help you get started

Getting Started Guide (step-by-step)

If you need help getting started

Assignment Marking Rubric

How you will be marked

Stuck? Watch the

Getting Started Video Guide

1 of 10