CPSC 2030: Web Development II

Vids are best viewed on PC instead of mobile devices such as an iPhone!

Overview

PDF

CPSC_2030_Summer2022

Download Link

Week 1 Content:

PDF

CPSC2030 Week 1 Slides

Download Link


1 - Course Introduction


2 - CSS Review

Week 1 Worksheet

PDF

CPSC_2030_Worksheet_1

Download Link

PDF

CPSC_2030_Worksheet_1_Solution

Download Link

Week 1 Assignment

PDF

Assignment_0

Download Link

ZIP

a0_starter_files

Download Link

IMG

screenshot_desktop

Download Link

IMG

screenshot_mobile

Download Link

VID

as0_demo

Download Link

Week 1 Readings

Readings

CSS position property

Mozilla

Readings

30 CSS Selectors you should know

TutsPlus

1

Week 2 Content

PDF

CPSC 2030 Week 2 Slides

Download Link

1 - Intro to Flexbox

2 - Intro to CSS Grid

Week 2 Worksheet

PDF

CPSC_2030_Worksheet_2

Download Link

ZIP

CPSC_2030_Worksheet_2_start-files

Download Link

ZIP

worksheet2-solution

Download Link

Week 2 Assignment

PDF

CPSC_2030_Assignment_1_Summer22

Download Link

VID

as1_demo

Download Link

ZIP

a1_starter_files

Download Link

PNG

Screenshot Mobile

Download Link

PNG

Screenshot Desktop

Download Link

Week 2 Readings

Readings

A Complete Guide to Flexbox

CSS-Tricks

Readings

A Complete Guide to Grid

CSS-Tricks

Readings

Grid Garden

CSS Grid Garden

2

Week 3 Content

PDF

cpsc2030_w3_animations

Download Link

Readings

transition_notes

View Page

1 - Intro to CSS Animations

2 - CSS Animations Example 1

3 - CSS Animations Example 2

4 - CSS Animations Example 3

5 - Assignment 2 Overview & Hints

Week 3 Worksheet

PDF

CPSC 2030 Worksheet 3

Download Link

ZIP

CPSC 2030 Worksheet 3 Solution

Download Link

Week 3 Assignment

PDF

CPSC2030_Assignment_2_Summer22

Download Link

VID

as2_demo

Download Link

ZIP

a2_starter_files

Download Link

Week 3 Readings

Readings

transition CSS property

Mozilla

Readings

transform CSS property

Mozilla

Readings

Using CSS animations

Mozilla

3

Week 4 Content

PDF

cpsc2030_w4_JS_array_methods

Download Link

PDF

cpsc2030_w4_JS_array_methods

Download Link

0 - Intro to JS Array methods

1 - reduce() method

2 - filter() method

3 - map() method

4 - sort() method

5 - Chaining methods

6 - Generate random users - Fetch and async await

7 - Output Users using forEach()

8 - Assignment 3 Overview and Hints

Week 4 Worksheet

PDF

CPSC2030_Worksheet4

Download Link

ZIP

worksheet4_starter_files

Download Link

ZIP

worksheet4_solved

Download Link

JavaScript Review (optional)

PDF

cpsc2030_w4_javascript

Download Link

00 - JS Fundamentals (Review)

Week 4 Assignment

PDF

CPSC2030_Assignment_3

Download Link

VID

as3-demo

Download Link

ZIP

a3_starter_files

Download Link

Week 4 Readings

Readings

Manipulating documents

Mozilla

Readings

map() method

Mozilla

Readings

sort() method

Mozilla

Readings

reduce() method

Mozilla

4

Week 5 Content

PDF

cpsc2030_w5_jquery

Download Link

1 - Intro to jQuery

2 - jQuery Events and Event Listeners

3 - jQuery Effects and Animation

4 - Assignment 4 Overview & Hints

Week 5 Worksheet

PDF

CPSC2030_Worksheet5

Download Link

ZIP

worksheet5_starter_files

Download Link

ZIP

worksheet5_complete

Download Link

Week 5 Assignment

PDF

CPSC2030_Assignment_4

Download Link

VID

as4_demo

Download Link

ZIP

a4-starter-files

Download Link

IMG

desktop_screenshot

Download Link

IMG

mobile_screenshot

Download Link

Week 5 Readings

Readings

jQuery Effects - Fading

W3Schools

Readings

jQuery Effects - Sliding

W3Schools

Readings

jQuery Effects - Animation

W3Schools

Readings

jQuery Examples

W3Schools

5

Week 6 Content

1 - Intro to DOM Manipulation using jQuery

2 - TodoList - HTML&CSS

3 - TodoList - AddNewItem

4 - TodoList - RemoveItem

5 - Assignment 5 Overview & Hints

Week 6 Worksheet

PDF

CPSC 2030 Worksheet 6

Download Link

ZIP

cpsc2030_worksheet6_solution

Download Link

Week 6 Assignment

PDF

CPSC2030_Assignment_5_jQueryDOMTraversal

Download Link

VID

as5_demo

Download Link

ZIP

a5_starter_files

Download Link

Week 6 Readings

Readings

jQuery Traversing

W3Schools

Readings

jQuery append() Method

W3Schools

Readings

jQuery prepend() Method

W3Schools

Readings

jQuery after() Method

W3Schools

Readings

jQuery before() Method

W3Schools

Readings

jQuery attr() Method

W3Schools

Readings

jQuery text() Method

W3Schools

Readings

jQuery - css() Method

W3Schools

6

Week 7 Project Instructions and Proposal

PDF

CPSC_2030_Project_Instructions

Download Link

PDF

CPSC2030-ProjectSlides

Download Link

PDF

CPSC2030-ProjectProposal

Download Link

7

Week 8 Content - Intro to PHP

PDF

cpsc2030_w7_php_part1

Download Link

CPSC2030 Intro to PHP

Week 8 Content - More PHP: Arrays and Superglobals

PDF

cpsc2030_w8_php_part2

Download Link

CPSC 2030 - PHP Arrays & Superglobals

CPSC2030AS6 Tasks1&2

CPSC2030AS6 Tasks3&4

Week 8 Assignment

ZIP

a6_starter_files

Download Link

IMG

cssscreenshot

Download Link

IMG

screenshot

Download Link

PDF

cpsc2030_w8_php_part2

Download Link

HTML

sampleoutput

Download Link

Week 8 Content - Intro to PHP Tutorial Series

VID

PHP Front To Back

YouTube Playlist

Week 8 Readings

Readings

PHP Arrays

W3Schools

Readings

PHP Superglobal - $_GET

W3Schools

Readings

PHP Superglobal - $_POST

W3Schools

Readings

Learn PHP from Scratch (optional)

Educative

8

Week 9 Content

PDF

cpsc2030_w9_form_validation

Download Link

1 - Intro to Form Validation

2 - Handling validation errors

3 - Assignment 7 Overview and Hints

HTML

week9_discussion

Subpage

Week 9 Assignment

PDF

CPSC2030_Assignment_7

Download Link

ZIP

a7_starter_files

Download Link

IMG

screenshot_results

Download Link

VID

demo_as7

Download Link

HTML

sample-output

Download Link

Week 9 Readings

Readings

Client-side form validation

Mozilla

Readings

Sending form data

Mozilla

Readings

PHP Form Handling

W3Schools

Readings

PHP Forms - Validate E-mail and URL

W3Schools

Readings

PHP Complete Form Example

W3Schools

Readings

PHP Form Validation

W3Schools

9

Week 10 Content

PDF

cpsc2030_w10_databases

Download Link

1 - Databases & SQL

2 - Accessing MySQL in PHP

3 - Assignment 8 Overview & Hints

HTML

week10_discussion

Subpage

Week 10 Worksheet

PDF

CPSC2030_Worksheet_7

Download Link

PDF

CPSC2030_Worksheet_7_Solution

Download Link

Week 10 Assignment

PDF

CPSC2030_Assignment_8

Download Link

IMG

comments_table_setup

Download Link

IMG

as8-screenshot

Download Link

HTML

sample-output

Download Link

VID

as8-demo

Download Link

ZIP

a8_starter_files

Download Link

Week 10 Readings

Readings

SQL Tutorial

W3Schools

Readings

PHP MySQL Prepared Statements

W3Schools

10

Week 11 Content

PDF

cpsc2030_w12_ajax

Download Link

1 - Intro to AJAX

2 - jQuery load method

3 - jQuery get & getJSON

4 - jQuery ajax method

5 - jQuery post method

HTML

AJAX Discussion

Subpage

Week 11 Worksheet

PDF

CPSC 2030 Worksheet 8

Download Link

ZIP

CPSC2030Worksheet8Code

Download Link

Week 11 Assignment

PDF

CPSC2030_Assignment_9

Download Link

ZIP

as9-starter-files

Download Link

VID

as9-demo

Download Link

Week 11 Readings

Readings

jQuery load() method

W3Schools

Readings

jQuery get() method

W3Schools

Readings

jQuery getJSON() method

W3Schools

Readings

jQuery post() method

W3Schools

Readings

jQuery ajax() method

W3Schools

Readings

jQuery serialize() method

W3Schools

11

Week 12 Content

PDF

CPSC2030-Week12-localStorage

Download Link

1 - Intro to localStorage

2 - Intro to Worksheet 9

3 - AddToLocalStorage

4 - getTasks from localStorage

5 - Remove task from localStorage

Week 12 Worksheet

PDF

CPSC2030_Worksheet9

Download Link

ZIP

worksheet9_starter_files

Download Link

ZIP

worksheet9_solution

Download Link

Week 12 Readings

Readings

localStorage in JavaScript: A Complete Guide

LogRocket

Readings

localStorage MDN Reference

Mozilla

12

Week 13 Content (optional)

PDF

cpsc2030_w13_WordPress (optional)

Download Link

CPSC2030 Week13 optional

How To Make a Website With WordPress (Optional)

13

End