Category: 20221_itp303

Lecture 5: Flexbox, CSS Frameworks, Bootstrap

Posted on | by nayeon

To-do for today’s class

Helpful Readings

Slides

Link to download PDF version of slides.

Completed files

Lab 2: Updated Student Page

Posted on | by nayeon

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 similar to Lab 1:
    1. Name, email address, favorite color, favorite website
    2. Pick a favorite activity and add an image of it
  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. Add links to previous work (NOTE: add the link but clicking on the links will not actually show the page yet)
    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. 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/
  10. Tips:
    1. Create a <div> for every row and column.
    2. Nest column <div> inside of each row <div>
    3. Don’t forget to clear the floats after the last column <div> of each row!
    4. You can use border-top and/or border-bottom property to create lines between each 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 a browser and go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
  2. Login with your username and password (this password does not sync with your USC NETID password. You have created this password separately. If you don’t remember your password, post on EdStem and a course staff member will reset it for you).
  3. Scroll down to Files section and click on File Manager. You will see a list of folders and files like below.
  4. Double click to navigate inside the public_html folder.
  5. Click on “Upload” to upload your files to your server account.
  6. Drag and drop your student_page.html to upload this file to the server. You will overwrite the existing student_page.html file.
  7. In addition, upload this file to Blackboard. Put student_page.html and any images into a folder named lab02 or similar. Compress the folder in to a .zip file. Go to Blackboard -> Assignments/Labs -> Lab 2: Updated Student Page and upload the .zip file. You will be able to submit multiple attempts. Only the last submission will be graded.

Sample

Annotated:

Lecture 3: CSS Selectors, Cascade, Page Layouts

Posted on | by nayeon

To-do for today’s class

  • Save this folder in the itp303 folder you created last lecture:
    https://drive.google.com/drive/folders/10r-zrlMOjxPgZ0hj-2ntWgdC4t16wSxb?usp=sharing
    Click on the name of folder (down arrow) and click “Download” to get all the files.
  • Copy paste the following text:The Coachella Valley Music and Arts Festival (commonly called Coachella or the Coachella Festival) is an annual music and arts festival held at the Empire Polo Club in Indio, California, in the Coachella Valley in the Colorado Desert. It was co-founded by Paul Tollett and Rick Van Santen in 1999, and is organized by Goldenvoice, a subsidiary of AEG Presents. The event features musical artists from many genres of music, including rock, pop, indie, hip hop and electronic dance music, as well as art installations and sculptures. Across the grounds, several stages continuously host live music.

Helpful Readings

Slides


Link to download PDF version of slides.

Completed Files

Assignment 2: Responsive Product Page

Posted on | by nayeon

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 new folder named assignment02.
  2. Create a brand new HTML file in this folder. Name it product.html.
  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. You 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 column must have some spacing and 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 helpful 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 the product is above the product image.
      1. Hint: You can hide any elements using display, visibility or opacity. Show this product name on only mobile screen sizes.
    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 displayed per row.
      1. Create a <div> for every related product. Put image inside this div. Add border around the <div> and not the image.
      2. Each related product image has some spacing around it.
      3. Background color for each related product column is not required but will be helpful to visualize what your code is doing.
    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.
      2. Hint: You can hide any elements using display, visibility or opacity. Show this product name on screensizes 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. All images scale up as browser size increases.
    4. The “box” that contains all the product information must not grow wider than 1000px.
    5. 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 contains the related product’s name.
    2. The overlay must overlap the related product image (not be below the image).
    3. The overlay must be positioned at the very bottom of each product.
    4. The width of the overlay box must be exactly the same width as the related product column at all screen sizes.
    5. Horizontally center the related product’s name in the overlay.
    6. 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

Until the server is fixed, submit all files to Blackboard. Follow the below steps:

  1. Rename the folder that contains all your A2 files to: ITP303_Assignment2_[usc username]
  2. Compress this folder to a .zip file.
  3. On Blackboard, go to Assignments -> Assignment 2: Responsive Product Page and upload the .zip file here.
  4. You will be able to make unlimited submissions. Only the last submission will be graded.

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:

Desktop sizing details:

Hover Effect:

Lab 1: Student Page & Server Set-up

Posted on | by nayeon

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. Upload your first webpage to “the Internet” via cPanel.

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.
  4. 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/

As of 1/13, server is running into issues so you will not see your files under your domain. Skip the requirements below that require you to check something on your domain. Still upload the file on cPanel AND blackboard.

Server set up
  1. Go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
  2. Log in with your USC NetID as the username. Get the temporary password from Edstem.
  3. Upon login, change your password by scrolling down to the Preferences 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.
Upload your first file to the web server
  1. Open a browser and go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
  2. Login with your username and password (this password does not sync with your USC NETID password. You have created this password separately. If you don’t remember your password, post on EdStem and a course staff member will reset it for you).
  3. Scroll down to Files section and click on File Manager. You will see a list of folders and files like below.
  4. Double click to navigate inside the public_html folder.
  5. Click on “Upload” to upload your files to your server account.
  6. Drag and drop your student_page.html to upload this file to the server.
  7. Once the upload is completed, 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. 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

Lecture 1: Course Overview, WWW

Posted on | by nayeon

To-do for today’s class

  • Download VS Code (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

Completed Code

Coming soon…