Month: April 2021

To-do for today’s class

• Starter file: https://www.dropbox.com/sh/zzwxblf30n07lwi/AABLpsUznfwzfQAo-ICiaONaa?dl=0
• Rellax JS: https://dixonandmoe.com/rellax/
• Lightbox JS: https://lokeshdhakar.com/projects/lightbox2/
• Draggabilly: https://draggabilly.desandro.com/

Slides

Link to download PDF version.

Completed Files

• 12pm: https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect24-js-plugins
• 4pm: https://github.com/nayeonk/itp303-spring-2021-4pm/tree/main/lect24-js-plugins

To-do for today’s class

• Download starter file
• Some fun animations:
  • https://codepen.io/matchboxhero/pen/EwdmmP?editors=1100
  • https://codepen.io/benstanley/pen/icqok
  • https://codepen.io/nxworld/pen/ZYNOBZ
  • https://tympanus.net/Tutorials/OriginalHoverEffects/index.html

Slides

Link to download PDF version.

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Completed files

• 12pm: https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect23-css-transitions/
• 4pm: https://github.com/nayeonk/itp303-spring-2021-4pm/tree/main/lect23-css-transitions/

To-do for today’s class

• None

Slides

View Slides
Link to download PDF version.

Completed Files

No completed files.

Lecture Recording

This is a recorded lecture is from Fall 2020. https://usc.zoom.us/rec/play/zIW5I4eYp7STYCkrKvVpipUKEkaZvZ8BncK0mZawb-wHxbhmMZGi7SWiDhMtqYcwLEUwPMFCBAsioSyX.6zuJdKctPG7vEPdQ

To-do for today’s class

• Download starter file: lect21-curl-share/
• Some setup for Yelp and Spotify APIs. More info here: https://piazza.com/class/kdz01u8rnxxq4?cid=484

Slides

Link to download PDF version.

Resources

• PHP cURL Options
• Programmable Web – API Directory

Completed files

• 12pm:https://github.com/nayeonk/itp303-fall-2020-12pm/tree/master/lect21-curl-share/
• 4pm:https://github.com/nayeonk/itp303-fall-2020-4pm/tree/master/lect21-curl-share/

We did not finish AJAX and PHP during the live Zoom meeting. I made a separate recording (33min) to finish off this lecture. Recording can be found here: https://usc.zoom.us/rec/share/CfUvriw6-HwGAGyxVtCDTFLrCmT-g8LhOd7outTAK3X7oK0HkAp0D9SerwqI3nSx.h1KRJXdyFoSQfM07?startTime=1619058855000

To-do for today’s class

• Download starter file: lect22-ajax-php/

Slides

Link to download PDF version.

Completed files

• 12pm: https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect22-ajax-php/
• 4pm: https://github.com/nayeonk/itp303-spring-2021-4pm/tree/main/lect22-ajax-php/

To-do for today’s class

• Save this Dropbox folder in the itp104 folder that you are saving all the lecture material in:
  https://www.dropbox.com/sh/cbnbtz9n8covb4d/AAB9aPA9O5XDrACqQQXZu6Qea?dl=0
  Click Download -> Direct Download on top left to get a .zip of this folder.

Slides

View Slides
Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

• https://github.com/nayeonk/itp104-spring-2021/tree/master/lect13-bootstrap/

Overview

This assignment serves as a milestone to help you progress along your final project. Now that you submitted a proposal and have an idea of what kind of web application you want to build for the final project, you can start writing code.

Requirements

1. Refer to the wireframes you created in your final project proposal. Your first step in building the final project will be writing HTML and CSS to build the front end parts of your web application. In other words, you are building the “shell” of your web application. Later, you will need to insert PHP into these pages to connect to your database and run the necessary SQL queries, so keep in mind how you want the backend logic to flow as well.
2. Setup: Create a folder named assignment11 and add save all files in here. When ready to submit, upload this entire folder to the web server via FileZilla.
3. Create at least four (4) pages.
4. You may use CSS frameworks like Bootstrap but you may NOT use HTML templates. Layouts must be your own original work.
5. Must have a clear purpose and topic. All pages make up a cohesive website.
   1. Have a clear and obvious logo (can be text) or page title in the same area on every page.
   2. Have a clear and obvious navigation menu that makes it easy for users to navigate around the site.
6. All pages must meet the responsive web design requirements of the final project. The pages must look complete on the following three breakpoints:
   1. Mobile: 767px and smaller
   2. Tablet: 768px – 991px
   3. Desktop: 992px and larger
7. While you are not graded on the aesthetic value of the website, you will be docked points if there are any obvious issues such as:
   1. Unreadable text, due to:
      1. text is too small
      2. color of text blends in with the background
   2. Text or images get cut off at the edges of the screen
   3. Extraneous horizontal scrolling (i.e. don’t let the user scroll if you don’t need to).
8. You do not need to write any PHP or SQL at this point (although you can if you’d like).
9. Use hardcoded values and/or placeholders for data that you will eventually receive from the back-end (similar to the starter code provided for you for the CRUD lectures).

Guest lecture by Prof. Nathan Greenfield. If you have any more questions about this topic, feel free to reach out to him: https://itp.usc.edu/directory/faculty/profile/?lname=Greenfield&fname=Nathan

To-do for today’s class

• None

Slides

Click for slides (requires USC login)

Completed files

• None

To-do for today’s class

• Download starter file: lect20-membership-sessions/
• Log in to your cPanel and go to phpMyAdmin.

Slides

Link to download PDF version.

Completed files

• 12pm: https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect20-membership-sessions/
• 4pm: https://github.com/nayeonk/itp303-spring-2021-4pm/tree/main/lect20-membership-sessions/

To-do for today’s class

• Save this Dropbox folder in the itp104 folder that you are saving all the lecture material in:
  https://www.dropbox.com/sh/bs1cc6hoxeiwwnf/AAD_4_syqe6CGgNsPnt6pJC0a?dl=0
  Click Download -> Direct Download on top left to get a .zip of this folder.

Slides

View Slides
Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

• https://github.com/nayeonk/itp104-spring-2021/tree/master/lect12-jquery/