Month: January 2021

To-do for today’s class

• Save this folder in the itp303 folder you created last lecture:
  https://www.dropbox.com/sh/e9jwfqh0ab3nrvg/AAAckNn0XGz7ornMOlaSPkhwa?dl=0
  Click Download -> Direct Download on top left to get a .zip of this folder.

Slides

Link to download PDF version of slides.

Completed Files

• 12pm: https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect04-rwd/
• 4pm:https://github.com/nayeonk/itp303-spring-2021-4pm/tree/main/lect04-rwd/

To-do for today’s class

• Save this folder in the itp303 folder you created last lecture:
  https://www.dropbox.com/sh/xxt8ol95794neq1/AACzvAFzrBLrSMG7OQJuZmPAa?dl=0
  Click Download -> Direct Download on top left to get a .zip of this folder.

Helpful Readings

• The 30 CSS Selectors You Must Memorize (not really, but very helpful guide)
• All About Floats

Slides

Link to download PDF version of slides.

Completed Files

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

Slides

View Slides
Link to download PDF version.

Helpful Readings Before Next Class

• Getting Started with HTML
• HTML Text Fundamentals
• Creating Hyperlinks

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/lect01/

To-do for today’s class

• Save this folder in the itp104 folder you created last lecture:
  https://www.dropbox.com/sh/byi8fsnngnckvwu/AACOnUr76zPfsKME1N-a-H9na?dl=0
  Click Download -> Direct Download on top left to get a .zip of this folder.

Slides

View Slides

Link to download PDF version.

Helpful Readings

• Getting Started with HTML
• HTML Text Fundamentals
• Creating Hyperlinks
• CSS Guide

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/main/lect03

To-do for today’s class

• Save this folder in the itp104 folder you created last lecture:
  https://www.dropbox.com/sh/zwznydc7scz0spt/AAB_nEMIayVYoZeQDTpGAyTaa?dl=0
  Click Download -> Direct Download on top left to get a .zip of this folder.
• View this article for today’s class: https://www.latimes.com/lifestyle/newsletter/2021-02-04/how-to-find-rare-bird-sightings-l-a-mt-whitney-permit-lottery-the-wild

Slides

View Slides

Link to download PDF version.

Helpful Readings

• CSS-Tricks Article: All About Floats

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/lect04/

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 are a species of Pokémon, fictional creatures that appear in an assortment of video games, animated television shows and movies, trading card games, and comic books licensed by The Pokémon Company, a Japanese corporation. They are yellow rodent-like creatures (large-eared pika) with powerful electrical abilities. In most vocalized appearances, including the anime and certain video games, they are primarily voiced by Ikue Ōtani. A Pikachu also appears as part of the main cast in the live-action animated film Pokémon Detective Pikachu, played in CGI and voiced by Ryan Reynolds.

The Pikachu design was conceived by Atsuko Nishida and finalized by Ken Sugimori.[2] 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 original Game Boy.

Slides

View Slides
Link to download PDF version.

Helpful Readings

• Getting Started with HTML
• HTML Text Fundamentals
• Creating Hyperlinks
• CSS Guide

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/lect02/

To-do for today’s class

• Download Sublime Text (or any other text editors such as VS Code or Atom)
• Download FileZilla (client only)
• Later during lecture, copy paste the following text:

Pikachu is a short, chubby rodent Pokémon. It is covered in yellow fur with two horizontal brown stripes on its back. It has a small mouth, long, pointed ears with black tips, brown eyes, and the two red circles on its cheeks contain pouches for electricity storage. It has short forearms with five fingers on each paw, and its feet each have three toes. At the base of its lightning bolt-shaped tail is a patch of brown fur. A female will have a V-shaped notch at the end of its tail, which looks like the top of a heart. It is classified as a quadruped, but it has been known to stand and walk on its hind legs.

The anime has shown that wild Pikachu live in groups in forested areas. Pikachu communicate amongst themselves using squeaks and tail-shaking as friendly gestures. Electricity can be used to receive and send messages with each other, as well as other Electric Pokémon species. It raises its tail to check its surroundings, and is occasionally struck by lightning in this position. When groups grow, they can inadvertently cause lightning storms. Pikachu is found foraging for berries it roasts with electricity to make them tender enough to eat. A sure sign that Pikachu inhabits a location is patches of burnt grass. It has been observed eating and sometimes destroying telephone poles, wires, and other electronic equipment.

Slides

Link to download PDF version.

Helpful Readings

• Getting Started with HTML
• HTML Text Fundamentals
• Creating Hyperlinks

Completed Code

Coming soon…

Overview

This lab serves as a basis and setup for future assignments and labs. You will:

1. Create your first HTML page and add some basic information about yourself.
2. Ensure you can access your account on the itpwebdev web server.
3. Install and set up FileZilla so you can upload your first HTML page to the itpwebdev web server and make it “live” on the Internet.

Requirements

HTML & CSS

1. Create a new HTML file named student_page.html (all lowercase, no spaces)
2. Using the HTML you learned in lecture, add the following info in your student_page.html. Scroll down below for a sample.
   1. Your Name (bolded, bigger font size than rest of the page, use a heading tag)
   2. Your Email Address
   3. A list of courses you are taking this semester (A bulleted list)
   4. At least three of your favorite websites with correct links to them.
   5. Your favorite color. Set the text of your favorite color to that favorite color. (e.g. blue, green, pink etc)
   6. Some kind of background color that covers the entire page.
   7. An area titled “Labs.” You will be adding links to your future labs here.
   8. An area titled “Assignments.” You will be adding links to your future assignments here.
3. When complete, you need to upload this to a web server to make this page “live” on the Internet. Follow the instructions below to get access to the itpwebdev web server.

Server set up

1. Go to https://303.itpwebdev.com/cpanel
2. Log in with your USC NetID as the username. Get the temporary password from the TA.
3. Upon login, change your password by scrolling down to the “Preference” section. Click “Password & Security” and change your password to something memorable but hard to guess.
4. Check that your domain is working. Every ITP 303 student is assigned to a domain that points to your assigned server space. Your domain would be something like: http://303.itpwebdev.com/~youruscusername/ . Replace youruscusername with your USC Net ID and you should see something like the screenshot below:
   
5. If your domain is working correctly, you can now upload your completed student_page.html to the server. Download a File Transfer Protocol (FTP) software like FileZilla (the Clients version).
6. Follow this guide on how to connect and upload files to the itpwebdev web server. Come back to this page when you have uploaded your student_page.html successfully.
7. In your browser, go to http://303.itpwebdev.com/~yourusername/student_page.html to check that your student_page.html has been successfully uploaded and is now live on the Internet. Replace yourusername with your USC NETID that you use to log into Blackboard and etc. Leave the ~ symbol before your username.
8. Lastly, go to the class website and scroll down to your picture under “Student Pages.” Click on your picture. The same student_page.html should open.
9. That’s it! This page is now on the Internet and anyone with this URL can access this page. Do not modify this page since the last modified timestamp is considered the time you submitted this file.

Sample

To-do for today’s class

• Download Sublime Text (or any other text editors such as VS Code or Atom)
• Download FileZilla (client only)
• Later during the lecture, copy paste the following text:

Pikachu is a short, chubby rodent Pokémon. It is covered in yellow fur with two horizontal brown stripes on its back. It has a small mouth, long, pointed ears with black tips, brown eyes, and the two red circles on its cheeks contain pouches for electricity storage. It has short forearms with five fingers on each paw, and its feet each have three toes. At the base of its lightning bolt-shaped tail is a patch of brown fur. A female will have a V-shaped notch at the end of its tail, which looks like the top of a heart. It is classified as quadruped, but it has been known to stand and walk on its hind legs.

The anime has shown that wild Pikachu live in groups in forested areas. Pikachu communicates amongst themselves using squeaks and tail-shaking as friendly gestures. Electricity can be used to receive and send messages with each other, as well as other Electric Pokémon species. It raises its tail to check its surroundings and is occasionally struck by lightning in this position. When groups grow, they can inadvertently cause lightning storms. Pikachu is found foraging for berries it roasts with electricity to make them tender enough to eat. A sure sign that Pikachu inhabits a location is patches of burnt grass. It has been observed eating and sometimes destroying telephone poles, wires, and other electronic equipment.

Slides

Link to download PDF version.

Helpful Readings

• Getting Started with HTML
• HTML Text Fundamentals
• Creating Hyperlinks

Useful References

• List of common HTML tags (MDN)
• List of common HTML tags (W3 Schools)
• List of CSS properties (MDN)
• List of CSS properties (W3 Schools)

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

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

Overview

In his assignment, you will write HTML and CSS to build your first webpage about something that you are interested in. You will use <div> tags to create “sections”, CSS to style the page, and need to look through HTML documentation to add HTML tags that are not covered in this lecture.

Resources

You learned the syntax and some example usage of HTML & CSS in lecture. Now you are expected to look up some HTML tags and CSS properties to use on this assignment. These resources are recommended but you may use other sources.

• List of common HTML tags (MDN)
• List of common HTML tags (W3 Schools)
• List of CSS properties (MDN)
• List of CSS properties (W3 Schools)

Requirements

HTML & CSS

1. Create a new HTML file. Name the file interest.html (all lowercase).
2. Write all CSS in an internal stylesheet. Do not write inline CSS.
3. Pick something that you are interested in that you would want to create a web page about. It could be a TV show, a movie, your pet, a video game, a hobby — anything you like. You can grab images and text from an external source.
4. Save images in a folder named images.
5. At the top, use a heading tag to display the title of the page, which is the topic you chose.
6. Create two sections (use <div> tag to create each section). The first section must include:
   1. A secondary heading tag that displays “About [name of interest]”
   2. An image that represents the image
   3. At least two paragraphs about the topic. The text can be from an external source.
   4. A table with at least three rows and columns. You will need to research how to create a table with HTML.
      1. Add a background color to the table heading (the first row of the table).
   5. Some spacing inside and outside the section (see sample).
7. The second section must include:
   1. A secondary heading tag that displays “Why I like [name of interest]”
   2. A bullet point list with at least three bullet points describing why you like this topic.
   3. Some spacing inside and outside the section (see sample).
8. Both sections must have a border around it and a width set. 
9. Horizontally center both sections.
10. Add a background color to the browser.
11. Bonus: not required but fun — add a custom font using Google fonts (https://fonts.google.com/).
12. Misc requirements
    1. All elements and text need to be readable (i.e. no dark text colors on dark backgrounds).
    2. No text or images should be at edges of containers or text. Add spacing. See sample for details.
    3. Add spacing between the title and the two sections. See sample for details.
13. Make sure all tags are closed, all attributes have opening and closing double quotes, and no extraneous tags linger. You will be deducted points for syntax errors.
    1. You can use a validator like this one to check for syntax errors: https://validator.w3.org/

Submission/Upload to the server

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

1. Open FileZilla and connect to the itpwebdev server as you have done in Lab 1 (click File -> Site Manager). If you forgot how to connect, follow this guide on how to connect and upload files to the itpwebdev web server.
2. After you have successfully connected to the itpwebdev server, created a folder (aka directory) named assignment1 inside the public_html folder. Then upload this assignment HTML file and images to the assignment1 folder. Refer to the guide if you’re not sure how to upload the assignment file.
3. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment1/interest.html to check that the assignment file has been uploaded correctly.
4. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Assignments” so that the TAs can easily access your completed assignment.
5. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.
6. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments -> Assignment 1: Interests Page. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Sample

Note: the sample below covers more than the requirements.