World Wide Web and Mobile Applications

CSC 130 - Lab B01 and B02

Teaching Team

Department of Computer Science
University of Victoria

Lab 03 and Lab 04

Table of Contents

Admin

All CSC 130 TA Lab Notes: https://notes.dominiquecharlebois.com/ta/csc130.html

Admin

Lab 03 AND Lab 04 are due at the end of the lab today.
Lab Material: Brightspace CSC 130 Course - Content - Day 4
Checkpoints are optional, thus feel free to work at your own pace and demonstrate your work at the end.
Ask Questions! Answer Questions! Collaborate with Peers!
Resource: https://developer.mozilla.org/en-US/

Admin

Credit is awarded by demonstrating your work at the end of each lab:

Students who complete all required material will obtain 3/4.
Students who complete bonus material AND collaborate with peers will obtain 4/4.

You are expected to collaborate with peers by asking and answering questions.

Table of Contents

Lab 03 - Overview

Objectives

Use a CSS flexbox to create a responsive web page.
Write advanced selectors in CSS.
Write CSS using the @media rule.

Lab 03 - Resources

Resources

Lab 03 - Starter Files

Starter Files

Download the ZIP folder named lab3-starter within a folder named csc130.
Unzip the folder named lab3-starter.

The folder named lab3-starter contains three HTML files and three CSS files.

Lab 03 - Part 01

Check Point 01

Open the file named lab3-p1.html and lab3-p1.css in a programming focused editor.
Open the file named lab3-p1.html in a web browser (e.g., Safari, Firefox, Microsoft Edge).
In the file named lab3-p1.css add the required content (i.e., the content shown in the lab 03 instructions pdf).

Lab 03 - Part 02

Check Point 02a

Open the file named lab3-p2.html and lab3-p2.css in a programming focused editor.
Open the file named lab3-p2.html in a web browser (e.g., Safari, Firefox, Microsoft Edge).
In the file named lab3-p2.css add the required content (i.e., the content shown in the lab 03 instructions pdf).

Lab 03 - Part 02

Check Point 02b

In the file named lab3-p2.css add the required content (i.e., the content shown in the lab 03 instructions pdf).

Lab 03 - Part 03

Check Point 03

Update your file named project.html from lab02. You may want to duplicate the file named project.html into the folder named lab3.

The focus of this content should be the design artifacts of your Project idea, but the mechanics of how the page is should include a flexbox and @media queries.

Lab 03 - Final Check Point

Final Check Point

__1: Send a message (private or public) to the lab TA.
__2: Walk through your code and your web page.

Note: You will need to show your work during lab time to receive credit.

Remember: If you are wanting full marks you will need to complete the bonus material AND participate meaningfully in the lab (e.g., help others, ask questions).

Lab 03 - Bonus Check Point

Bonus Check Point

Important: Setting up the required environment for student web hosting with UVic is a multi step process and can take a significant amount of time. Complete Lab 04 before attempting the Lab 03 bonus check point.

Please send me an email with the URL (i.e., https://studentweb.uvic.ca/~netlink/) when you have successfully uploaded the files named lab3-part3.html and lab3-part3.css.

Lab 03 - Bonus Check Point

Bonus Check Point

Download UVic VPN (students on campus can skip this step).
Follow the instructions outlined here: https://www.uvic.ca/systems/services/internettelephone/remoteaccess/
Activate UVic Web Hosting for Students.
Follow the instructions outlined here: https://www.uvic.ca/systems/support/web/webhosting-students/index.php
Visit: https://studentweb.uvic.ca/~netlink/ where netlink is your NetLink ID.

Lab 03 - Bonus Check Point

Bonus Check Point

Alternatively, you can use web hosting with GitHub.

Follow the instructions outlined here: https://developer.mozilla.org/en-US/docs/Learn/Getting\_started\_with\_the\_web/Publishing\_your\_website\#publishing\_via\_github

Table of Contents

Lab 04 - Overview

Objectives

Understand how to use HTML form elements to get user input.
Understand how to perform basic interactions between HTML elements and JavaScript.

Lab 03 - Resources

Resources

Lab 04 - Part 00

Check Point 00

Go to the JSFiddle site: https://jsfiddle.net/Aestey/91eowp5b/
Explore the HTML, CSS, and JavaScript (JS) sections.
Notice the HTML and JS comments (i.e., < ---PART X --- >).
Notice the HTML comments (i.e., ***TODO ***).
Notice the Run button in the top-left corner.

Lab 04 - Part 01

Check Point 01

Click the Run button in the top-left corner.
Click the “Invert Colors” button and “Reset to default” button.
In the section named PART 1 add the required content (i.e., the content shown in the lab 04 instructions pdf).

Lab 04 - Part 02

Check Point 02

Click the Run button in the top-left corner.
Enter a valid HTML color name in the input text field.
Click the “Change background” button.
In the section named PART 2 add the required content (i.e., the content shown in the lab 04 instructions pdf).

Lab 04 - Part 03

Check Point 03

Click the Run button in the top-left corner.
Click one of the radio buttons.
In the section named PART 3 add the required content (i.e., the content shown in the lab 04 instructions pdf).

Lab 04 - Part 04

Check Point 04

Click the Run button in the top-left corner.
Click one of the options in the dropdown list.
In the section named PART 4 add the required content (i.e., the content shown in the lab 04 instructions pdf).

Lab 04 - Part 05

Check Point 05

Click the Run button in the top-left corner.
Enter a pseudo first and last name into the form.
Click the“ Submit names” button.
In the section named PART 5 add the required content (i.e., the content shown in the lab 04 instructions pdf).

Lab 04 - Part 06

Check Point 06

Choose 2 design artifacts from the following list:
- bodystorming (page 127)
- brainstorming (page 129),
- final hypothesis statement (page 130),
- user stories (page 151),
- user needs (page 154), and
- user journey (page 156)
Create 2 design artifacts to include in your project web page. You may use online tools to help you develop the design artifacts (e.g., https://www.axure.com/).

Lab 04 - Final Check Point

Final Check Point

__1: Send a message (private or public) to the lab TA.
__2: Walk through your code, your web page, and your design artifacts.

Note: You will need to show your work during lab time to receive credit.

Remember: If you are wanting full marks you will need to complete the bonus material AND participate meaningfully in the lab (e.g., help others, ask questions).

Lab 04 - Bonus Check Point

Bonus Check Point

Choose an additional design artifacts from the following list:
- bodystorming (page 127)
- brainstorming (page 129),
- final hypothesis statement (page 130),
- user stories (page 151),
- user needs (page 154), and
- user journey (page 156)
Create an additional design artifacts to include in your project web page. You may use online tools to help you develop the design artifacts (e.g., https://www.axure.com/).

Table of Contents

Lab 03 and Lab 04

Lab 03 and Lab 04 are Finished!

Final Steps

Upload files to Brightspace.