Category: 20211_itp303

To-do for today’s class

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

Helpful Readings

• Flexbox Cheat Sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Bootstrap documentation here: http://getbootstrap.com/

Slides

Link to download PDF version of slides.

Completed files

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

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

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

You will be re-creating your student_page.html to be structured that it has two rows and two columns.

Requirements

HTML & CSS

1. Create a new HTML file called student_page.html. You can edit your previous student_page.html from Lab 1, but you may find it easier to just start from scratch.
2. All content requirements are the same as in Lab 1:
   1. Name, email, favorite color, website, activity, etc.
3. Put entire content within a <div>  with set width (≤ 950px) and center it on the page.
4. First row:
   1. Name as heading
   2. Email address
5. Second row:
   1. First column: Favorite color, website, and activity
   2. Second column: List of classes you are taking this semester
6. Third row:
   1. First column: Links to assignments
   2. Second column: Links to labs
7. Make sure links to all of your previous assignments and labs are working.
   1. You do not need to include Lab 1.
   2. Link Lab 2 to this file (itself).
8. Feel free to add any additional styling or design as long as the requirements above are met.
9. Tips: Create a <div> for every row.

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. Upload this file to the public_html folder. Overwrite the previous student_page.html.
3. Go to class website, click on your picture to double check that the file has been uploaded correctly. Sometimes browsers cache old versions of your file. If you do not see the file update, hard refresh the page by pressing Shift and click on the refresh icon.
4. (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 ->Lab 2: Updated Student Page. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Sample

Annotated:

Overview

For this assignment, you will create a mobile-first, responsive web page about a product. Choose any product you wish to “sell.” You can grab images and text about any existing product or you can make up your own.

Requirements

HTML & CSS

1. Create a brand new HTML file. Name it product.html.
2. Create a brand new CSS file. Write all CSS in this file. Don’t forget to link this external CSS file in your HTML file.
3. Use at least ONE custom font (meaning not a default font like Times New Roman or Arial). You can use google fonts or your own font.
4. Do not use flexbox or bootstrap on this assignment. Must use floats, percentages, and media queries to create rows and columns for this page and make it responsive to different screen sizes.
5. Required components:
   1. A colored bar on top that states name of your online store.
   2. A product that is being sold. Display the name, image, price, number of reviews (ok if it’s an image), and description.
   3. A colored promo code box.
   4. A related products section where at least four (4) other product names and images are displayed.
      1. Each product must have a border around it.
6. Your site needs to be implemented using mobile-first approach.
   1. Default CSS should be for mobile (0-767px). Then use media queries to handle tablet sizes (768px – 992px) and desktop sizes (992px and above).
   2. Hint: See slides for a better understanding of writing CSS mobile-first vs desktop-first.
   3. Hint 2: See mobile-first sample code here: https://codepen.io/nayeon/pen/OJLQXKz?editors=1100 . Try resizing the browser and see what happens to the header. Read comments in the CSS panel.
7. Before writing code right away, you may find it helfpul to review the samples and plan on how to construct your divs first. Sketch out boxes on a piece of paper and plan out how divs will change depending on the screen size.
8. Mobile Devices (0-767px):
   1. Single-column layout,
   2. Name of product is above the product image.
   3. Below the product image, display a colored promo code box with some info in it.
   4. Promo code box width is smaller than the main product’s image.
   5. Promo code box is horizontally centered.
   6. One (1) related product item is listed per row.
      1. Create a <div> per related item. Put image inside this div. Add border around the <div> and not the image.
   7. Related products all have a width that is smaller than the main product’s image.
   8. Related products are all horizontally centered.
   9. All images scale up as browser size increases.
9. Tablet Devices (768px – 991px):
   1. Two-column layout – the product image and promo code box on the left and the product details on the right.
      1. Product name is on top of the product details on the right. Hint: show this only for tablet devices and up.
   2. Two (2) related products listed per row.
   3. All images scale up as browser size increases.
   4. The bar on top with store name is as wide as the browser
10. Desktop Devices (992px – above):
    1. Two-column layout,
    2. Four (4) related products listed per row
    3. The “box” that contains all the product information must not grow wider than 1000px.
    4. The bar on top with store name must always be as wide as the browser.
11. Hover effect:
    1. When user hovers over any related product, show an overlay (div) that also displays the product’s name.
    2. Sample has the product’s name vertically centered but you do not need to have product name vertically centered.
    3. The overlay must span across the entire product (see sample).
    4. The overlay must have a background color that is slightly transparent.
       1. Hint: CSS value rgba() is helpful here.
12. For each device, adjust font sizes, images sizes, etc. as necessary.
13. All elements and content need to be readable.
14.  Feel free to add additional features, as long as all requirements above are satisfied.
15. Check your HTML and CSS syntax. You will be deducted points for any syntax errors, tags not closed/not used, etc.
    1. Use a validator like this one: https://validator.w3.org/#validate_by_input.

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 assignment2 inside the public_html folder. Then upload this assignment HTML file and images to the assignment2 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/assignment2/product.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 2: Responsive Product Page. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Sample

Note: Samples below don’t always meet all the requirements. Make sure to follow the requirements rather than solely relying on the samples.

Mobile:

Tablet:

Desktop:

Hover Effect:

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.

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

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