Lecture 2: HTML & CSS

To-do for today’s lecture

  1. Attendance is taken starting today. Go to Blackboard -> Tools -> Qwickly Attendance to enter the code for today’s attendance. If you are taking this class asynchronously, watch the lecture recording and fill out this google form.
  2. Copy and paste the following text when prompted:

Pikachu is a species of Pokémon, fictional creatures that appear in an assortment of media of the Pokémon franchise by The Pokémon Company. Pikachu is a yellow mouse-like Pokémon with powerful electrical abilities. Pikachu is the best-known species of Pokémon, largely due to its appearance in the anime series as the starter Pokémon of the protagonist, Ash Ketchum. Pikachu is a major character of the Pokémon franchise as well as its mascot, and has become an icon of Japanese pop culture in recent years, as well as one of the major mascots for Nintendo.

Pikachu’s design was conceived by Atsuko Nishida and finalized by Ken Sugimori. Pikachu first appeared in Pokémon Red and Green in Japan, and later in the first internationally released Pokémon video games, Pokémon Red and Blue, for the Game Boy.

Slides

View Slides
Link to download PDF version.

Helpful Readings

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.

Lecture 13: Intro to CSS Frameworks, Bootstrap

To-do for today’s class

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.

 

Lecture 12: Intro to jQuery

To-do for today’s class

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.

 

Lecture 11: JavaScript Plugins

To-do for today’s class

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.

 

Lecture 10: Transitions, Transformations

To-do for today’s class

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.

 

Lecture 9: iframes, Media Tags

To-do for today’s class

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.

 

Midterm Info & Study Guide

Midterm Exam Information

When: Exam will open on Wednesday, 03/17 at 2:00pm Pacific Time and close on Thursday, 03/18 at 11:59pm Pacific time.

Length: 60 minutes to complete the exam.

Where: Blackboard.

Types of questions:

  • True/False
  • Multiple Choice
  • Fill in the blank
  • Short Coding

Topics: Topics covered in lecture from Week 1, Intro to HTML to Week 8. Meta Tags and Responsive Web Design

What to do BEFORE the exam:

  1. Download Respondus LockDown Browser. You will be taking the exam through this tool. Instructions about Respondus and how to download it are here: https://keepteaching.usc.edu/students/student-toolkit/classroom/respondus/
    1. While you take the exam, the browser will “lock down” and will not allow you to access other applications or websites.
  2. Plan ahead to do your best to be in a quiet place during the time you choose to take the exam.
  3. Take the practice exam to get familiar with taking an exam on Blackboard. The practice exam is about half the length of the actual exam.
    1. Practice exam does not count toward your grade, it is purely for practice.
    2. When you complete the practice exam, you will see the correct answers.
    3. You may take the practice exam more than once.

During the exam:

  1. Open up the Lockdown Browser application on your computer. It will direct you to Blackboard and you will need to log in.
  2. Click on ITP 104’s Blackboard section –> click on “Midterm Exam” on the left sidebar.
  3. Respondus will not allow you to access other online sources or software on your desktop. This is a CLOSED BOOK exam.
  4. When you finish the exam, you can exit. Make sure to click submit.

Important Notes:

  • This is a CLOSED BOOK exam: no accessing notes, no online resources, no collaboration with other human beings.
  • You WILL need to have memorized the common HTML tags and their attributes. Any HTML tags discussed in lecture or in lab/assignment is fair game.
  • You WILL need to have memorized the common CSS properties and values. Any CSS properties discussed in lecture or in lab/assignment is fair game.
  • Blackboard “auto saves” your questions as you go, although it’s not 100% reliable so save as you go.

What you should know for the exam

Note: this is not meant to be an exhaustive list. Anything discussed in lecture can appear on the midterm exam. Refer to your lecture notes and assignments for a comprehensive review.

HTML basics
  • The basic HTML skeleton
  • Concept of opening and closing tags
  • What is a tag and what is an attribute? And what do they look like?
  • Common HTML tags and their function
    • <p><div><span><strong><em><h1><h2><h3><ul><li><ol><br><img><a><hr><form><label><select><option><input><textarea> and any other tags discussed in lecture
CSS Style Properties and Stylesheets
  • What is CSS? vs HTML?
  • Common CSS properties and their values
    • color, font-size, text-align, margin, padding, border, background-color, background-image and any other properties discussed in lecture
  • Inline styles vs Stylesheets
    • syntax on inline styling vs using a stylesheet
    • class vs id
    • how to create a stylesheet – <style>
  • Centering things horizontally
  • Fonts
Create layouts and using div tags
  • How to use <div> tags along with specific style properties such as margin, padding, float, width and height to create “boxes” that make up a page’s design and layout.
  • Basic understanding of “float” that forces divs to stack horizontally, thus creating columns.
  • Calculating column widths
  • Basic understanding of CSS positions (e.g. relative vs absolute vs fixed)
Form objects
  • HTML tags that create basic these form elements:
    • text
    • radio buttons
    • checkboxes
    • drop-down/select menu
    • textarea
  • You need to know how to implement the above form elements as well as know each of their functionality
  • How to “submit” a form
  • You need to know how to code a form from scratch
Tables
  • Basic understanding of tables
  • Basic knowledge on how to style tables
  • You need to know how to code a table from scratch.
Compound CSS Selectors
Fonts
Positions
Meta Tags and Responsive Web Design
Some terminology that would be helpful to know
  • tags vs elements
  • tag attributes
  • CSS selectors (ID, class, tag)
  • stylesheet vs inline style
  • CSS property and values
  • inline vs block elements (display property)

 

Lecture 8: Meta Tag, Responsive Web Design

To-do for today’s class

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.

Lecture 7: Fonts, Position Property

A supplemental recording was made for this lecture after the live lecture. Don’t forget to watch it here:  https://usc.zoom.us/rec/share/XhTzvR6HDV_DEa9DnLOSYUH938CJ_BNnXf8ORHZGajCtnXo2C5GaMjRYdlLQNY4C.F7D_w6UBgxTL9vJp?startTime=1614642101000 

To-do for today’s class

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.