Category: 20221_itp303

Overview

For this lab you will practice creating JavaScript objects by implementing a Contact List application. Users will be able to add new contacts, display all contacts, display first three contacts, and clear the list.

Sample

Requirements

1. Download the starter file from: lab05-contact-list.
2. Do not change the HTML or CSS code. You only need to write JavaScript.
3. Do not use inline JavaScript. This is bad practice. Write event handler like we did in class.
4. Open up console and console.log() things out as you work on this lab.
5. A contacts array is created for you. You will be storing any newly created contacts as an object and storing it in this array.
6. Create an event handler for form submission. When the form is submitted:
   1. Check that all input fields are filled out.
   2. If all inputs are filled out, save the information into an object. The object must have these properties:
      1. firstName: property that stores user input for First Name.
      2. lastName: property that stores user input for Last Name.
      3. email: property that stores user input for Email.
   3. Add this object to the contacts array .
   4. If any of the inputs are not filled out, do nothing. Do not add create an object or add it to the array. For this lab you do not need to display any error messages.
7. Create an event handler for Show All Contacts
   1. Run through the contacts array and show all contacts.
   2. To display contacts, create <li> elements and append them to <ul class="list-group" id="contact-list"> on line 52. See line 53 to see a sample of what the <li> element should look like.
   3. Each contact must be styled to look like the sample. Not working? See line 53 to see a sample of what the <li> element should look like.
8. Create an event handler for Show First Three Contacts
   1. Run through the contacts array and show only the first three contacts.
   2. Display contacts by creating <li> elements like in step #7.
9. Create an event handler for Delete All.
   1. Remove all objects from the contacts array.
   2. Clear everything from <ul class="list-group" id="contact-list"> so that no contacts are displayed.
10. Not required but helpful: create functions for anything that is repetitive. For example, you will find yourself needing to clear all contacts multiple times.
11. When completed, upload completed file to the server and add a link to this lab in your student_page.html.

Overview

For this assignment, you will create a web page that allows users to search for movies and display some basic information about the movie. You will use AJAX to access two (2) different endpoints of The Movie DB API (version 3). You will need to read through this API’s documentation to understand how to work with this endpoint.

Sample

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

Requirements

Utilizing the Movie DB API

1. Go to the Movie DB API documentation at https://developers.themoviedb.org/3/getting-started.
2. Read the “Introduction” section. You will learn that you need to create an API key to authenticate your API calls. Create an account and obtain an API key as instructed.
3. The first API request you will need to make is to get the movies that are currently playing in theaters. Click through some of the bolded links on the left sidebar of the documentation (Account, Authentication, Credits, etc). You will see that there are numerous endpoints available. Clicking on any endpoint gives you details about the endpoint such as parameters, responses, etc. Look for the one that sounds like you can call to get movies that are currently playing in theaters.
4. Once you find the endpoint you need, Movie DB API has a nifty tool that allows you to test out the endpoint with your API key and show the results you would get when calling this endpoint. To access this tool, click on the endpoint then click on the Try it out tab. Enter your API key in the api_key field.
   1. If this tool does not work, skip steps 4-6 and just try making a call to the API endpoint from your file.
5. Click on SEND REQUEST button and you should see results in JSON format. Get familiar with the JSON keys that are returned because you will need them. Any errors will be displayed if something is wrong.
6. Next to the SEND REQUEST button, you will also see the full endpoint (with recommended parameters included). This is the endpoint you want to call.

Layout

1. Create the following new files:
   1. index.html file for all the HTML,
   2. style.css file for all CSS, and
   3. main.js file for all the JavaScript.
2. Title at the top of the page.
3. Search box and submit button.
4. Text that shows how many movies are displayed and how many movies there are in total.
   1. Ex: Showing 20 of 878 result(s).
5. A layout that displays the movie’s poster image, title, and release date.
   1. Do NOT use tables.
   2. Mobile (0-767px): show 2 columns per row
   3. Tablet (768px-991px): show 3 columns per row
   4. Desktop (991px and above): show 4 columns per row
6. When a user hovers over the specific movie, show the movie’s rating, number of voters, and synopsis on top of the movie’s poster image.
7. If the movie does NOT have a poster image, show an image that says “Not available” or similar.
8. If the movie’s synopsis is over 200 characters, append “…” at the end.
9. Rating and synopsis must fit on the top of the movie image. Do not let the text go outside the movie image.
10. Page and text need to be readable. Ensure colors complement each other.
11. You may use Bootstrap, but it is not required.

JavaScript

1. When the page is loaded, display movies that are currently playing in theaters.
   1. Hint: All code in a .js file will automatically run when the page is loaded.
2. When user submits a search term, display movies that match the search query.
   1. If no results are found, display an appropriate message.
   2. Do not worry about implementing pagination. You can just display the first page of results.
3. Not required but highly recommended: create a separate function that handles the display of search results.
4. Number of results shown vs returned must be updated when page first loads and every time a new search term is submitted.
   1. Ex: Showing 20 of 878 result(s).
5. When displaying movies, use JavaScript’s .createElement() OR use the backtick method (shown in lecture) to create elements for each movie.
6. Do not use jQuery’s ajax function if you know what that is. You must use native JavaScript’s XMLHttpRequest object like shown in lecture.
   1. You may use the JavaScript Fetch API to make ajax requests if you know what that is.

Submission/Upload to the server

1. 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 set this password in Lab 1. 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. Create a new folder inside the public_html folder by clicking on the +Folder button on the top left.
      
   6. Name the folder assignment05. Double click it to navigate inside this folder.
   7. Click on “Upload” to upload all assignment5 files to this folder.
      
   8. Drag and drop all assignment files to upload into this folder.
   9. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment05/index.html to check that the assignment file has been uploaded correctly.
   10. One last thing. In your computer, open up student_page.html that you created in Lab 2. Add a link to this assignment to student_page.html under the heading “Assignments” so that the graders can easily access your completed assignment.
   11. Re-upload the updated student_page.html to the itpwebdev server via cPanel -> Files -> File Manager. If it asks you want to overwrite the previous file, click Yes.
   12. If all the above is completed, go to your student page at http://303.itpwebdev.com/~yourusername/student_page.html and check that the link to this assignment is there. The TAs/graders use this link to access your assignment so make sure this is working! Below is a screenshot sample of what it should look like.
       
   13. (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 5: Movie DB API. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Suggested Workflow

There are many ways to implement this assignment. If you don’t know where to start, here’s a suggested workflow:

1. Register for Movie DB API key.
2. Look through the documentation to find the two endpoints you need for this assignment.
3. Create a new HTML and JS file. Link the JS file into the HTML file.
4. In the JS file, set up the XMLHttpRequest() object and make an AJAX request to the first API endpoint. Log out the results to the console to ensure you successfully received a response back.
5. If you get back a successful response, pause on working on the JavaScript for now. Start laying out the page with HTML/CSS. While Bootstrap is not required, it may be helpful in creating the responsive layout.
6. Although you will need to create movie elements using JavaScript, write out HTML to create a few movies first. Hardcode the title, image, rating, synopsis, etc to ensure the layout meets all the requirements first.
7. Back to JavaScript! Write JavaScript to create the movie elements. Use console.log() to see which keys you need to use to get the movie’s title, image, rating, etc. Start with creating outer elements first and make your way in. Test incrementally. Don’t try to create everything at once. Use the Inspect Element tool to ensure that you are building elements as you want them to be.
8. Once all the movies currently in theaters are displayed, the code to display search results is very similar.

To-do for today’s class

• Save this Google drive folder in the itp303 folder that you are saving all the lecture material in:
  https://drive.google.com/drive/folders/1Cwnp42IzL4LZeGB1AfDMt2n_lQoGZ7k6?usp=sharing
  Click on the folder name -> Direct Download on top left to get a .zip of this folder.

Helpful Readings

• JS Numbers
• JS Strings

Slides

Link to download PDF version of slides.

Resources

• More reading on NaN
• JS Math Library (MDN)
• String methods (MDN)
• http://scrollmagic.io/
• Alfred scroll example – http://alfredservice.com/

Completed Files

• 12pm: https://github.com/nayeonk/itp303-spring-2022-12pm/tree/master/lect08-input
• 4pm: https://github.com/nayeonk/itp303-spring-2022-4pm/tree/master/lect08-input/

Overview

This lab helps you to solidify the basics of manipulating the DOM with JavaScript and event-based programming with JavaScript. You will create an interactive photo gallery.

Requirements

1. Download the starter file from this Google Drive link.
2. Do not change the HTML or the styles.css file.
3. In the browser, open up the console like in the lecture and have it open as you complete this lab. It will be helpful to see errors right away. You can also log things out on the browser to test your code.
4. Write all CSS and JavaScript in gallery.html.
5. Review the HTML structure. Note that name of each thumbnail’s name is in a child div.
6. Write CSS in the <style> tag so that when a user hovers over a thumbnail:
   1. Name of the place is displayed on top of the thubmail. Use CSS position property to achieve the overlapping effect.
   2. Change the text color of name to white.
   3. Change the background color of name to a slightly transparent black. Background width is as wides as the thumbnail.
      1. Hint: Use rbga() as background color to make background color slightly transparent.
   4. Position the name so that it is displayed at the bottom of each thumbnail.
7. Write JS in the <script> tag so that when a user clicks on a thumbnail:
   1. Update main image to clicked thumbnail image.
      1. Hint: Refer to this article to see the various traversal properties. Use console.log() to log out different traversal properties.
   2. Update main image’s alt attribute to clicked thumbnail’s alt attribute.
   3. Update the caption below the main image to the clicked thumbnail’s alt attribute.

Sample

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 set this password in Lab 1. 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. Create a new folder inside the public_html folder by clicking on the +Folder button on the top left.
   
6. Name the folder lab04. Double click it to navigate inside this folder.
7. Click on “Upload” to upload all assignment4 files to this folder.
   
8. Drag and drop all assignment files to upload into this folder.
9. In your browser, go to http://303.itpwebdev.com/~yourusername/lab04/gallery.html to check that the assignment file has been uploaded correctly.
10. One last thing. In your computer, open up student_page.html that you created in Lab 2. Add a link to this assignment to student_page.html under the heading “Assignments” so that the graders can easily access your completed assignment.
11. Re-upload the updated student_page.html to the itpwebdev server via cPanel -> Files -> File Manager. If it asks you want to overwrite the previous file, click Yes.
12. If all the above is completed, go to your student page at http://303.itpwebdev.com/~yourusername/student_page.html and check that the link to this assignment is there. The TAs/graders use this link to access your assignment so make sure this is working! Below is a screenshot sample of what it should look like.
    
13. (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/Labs -> Lab 4: Photo Gallery. You will get some points deducted for not uploading correctly but at least you will not get a zero.

To-do for today’s class

• Save this Google drive folder in the itp303 folder that you are saving all the lecture material in:
  https://drive.google.com/drive/folders/1CsdCgfkfih64vftEJ9JWxYiMDSeN5n2-?usp=sharing
  Click on the folder name -> Direct Download on top left to get a .zip of this folder.

Helpful Readings

• Introduction to events (MDN)
• Useful DOM Traversal Properties

Slides

Link to download PDF version of slides.

Completed Files

• 12pm: https://github.com/nayeonk/itp303-spring-2022-12pm/tree/master/lect07-events
• 4pm: https://github.com/nayeonk/itp303-spring-2022-4pm/tree/master/lect07-events

Overview

This assignment will help you practice JavaScript basics. The HTML and CSS is provided for you. You only need to write JavaScript to implement all the interactivity.

Sample

Requirements

Setup

1. Download starter files (Google Drive folder link).
2. Write all JavaScript in the included .html file.
3. Do NOT modify the HTML.
4. You can complete this assignment without modifying the included external CSS file but you may modify it if needed.
   1. Note: The starter file utilizes Bootstrap CSS classes.
5. Do NOT write inline JavaScript.
6. Open up the Inspect tool as you work on this assignment. Use the Console to catch errors and use the Elements tab to see how the HTML elements change.

Customizer

1. Text to put on T-shirt
   1. As user types text into the text field, display the text in <div id="tshirt-preview">. The div is already positioned for you so you do not need to modify any CSS.
   2. If user types in more than 20 characters:
      1. Change the message “max 20 characters” text color to red and add a CSS class .is-invalid to the text input. .is-invalid is a Bootstrap CSS class that automatically gives a red border around the input.
         
2. Font, font size, and text color
   1. When user selects a different font in the dropdown, change the t-shirt font to that font.
      1. Use onchange event to detect change in the dropdown and slider.
   2. When user changes the font size slider, change the t-shirt font size to that size.
   3. When user clicks on one of the text color boxes, change the t-shirt text color to that color AND add a gray border around the color box that was clicked on (add CSS class .selected to it).

Add to Cart

1. When user clicks “Add to Cart”:
   1. Validate that “Text to put on T-shirt” input field is not empty and is not have longer than 20 characters. Show a red error message below the button and add .is-invalid class around the text input to display a red border around it. Do not update the shopping cart if validation rules are not met.
   2. Shopping cart: hide the “Cart is empty” message if above validation rules are met.
   3. Shopping cart: show the t-shirt information that is in the <div class="cart-item">.
   4. Shopping cart: Update the subtotal, tax, and total fields accordingly.
      1. Each shirt base price is $20.00.
      2. Tax rate is 9.5%.
      3. In JavaScript, calculating floating points are not always accurate (e.g. 0.1 + 0.2 does not equal to 0.3). There are ways to go around this issue but for this assignment, it is OK if not exact results are returned.
      4. Use .toFixed() to set two digits after the decimal place. There are known rounding issues with .toFixed() but it is OK if rounding is a little off in this assignment.
   5. Shopping cart: Update the quantity by one every time user clicks “Add to Cart.” Subtotal, tax, and total must be recalculated every time the quantity is updated.

Remove from Cart

1. When user clicks on “Remove from Cart”:
   1. Shopping cart: show the “Cart is empty” message.
   2. Shopping cart: hide the shirt information
   3. Shopping cart: Reset the Subtotal, Tax, and Total to 0 (zero).

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 set this password in Lab 1. 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. Create a new folder inside the public_html folder by clicking on the +Folder button on the top left.
   
6. Name the folder assignment04. Double click it to navigate inside this folder.
7. Click on “Upload” to upload all assignment4 files to this folder.
   
8. Drag and drop all assignment files to upload into this folder.
9. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment04/tshirt-customizer.html to check that the assignment file has been uploaded correctly.
10. One last thing. In your computer, open up student_page.html that you created in Lab 2. Add a link to this assignment to student_page.html under the heading “Assignments” so that the graders can easily access your completed assignment.
11. Re-upload the updated student_page.html to the itpwebdev server via cPanel -> Files -> File Manager. If it asks you want to overwrite the previous file, click Yes.
12. If all the above is completed, go to your student page at http://303.itpwebdev.com/~yourusername/student_page.html and check that the link to this assignment is there. The TAs/graders use this link to access your assignment so make sure this is working! Below is a screenshot sample of what it should look like.
    
13. (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 4: T-shirt Customizer. You will get some points deducted for not uploading correctly but at least you will not get a zero.

To-do for today’s class

• Save this google drive folder in the itp303 folder you created last lecture:
  https://drive.google.com/drive/folders/1CndlRahEpIVQ7Y1Pq-o44cCjv-Va3i66?usp=sharing
  Click on the name of the folder and click Download to get a .zip of this folder.
  You’ll need to be logged into your USC account to access the link.

Helpful Readings

• What is JavaScript? (MDN, a high-level overview of what JS is and what you can do with it).
• Introduction to JS events (MDN, an overview of how to use event listeners).
• List of all DOM events – https://developer.mozilla.org/en-US/docs/Web/Events
• DOM Traversal – https://www.w3schools.com/js/js_htmldom_navigation.asp
• classList – https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Slides

Link to download PDF version.

Completed Files

• 12pm: https://github.com/nayeonk/itp303-spring-2022-12pm/tree/master/lect06-intro-js
• 4pm: https://github.com/nayeonk/itp303-spring-2022-4pm/tree/master/lect06-intro-js

To-do for today’s class

• Save this folder in the itp104 folder where you keep all lecture files:
  https://drive.google.com/drive/folders/1DF1PkG9sgWxq-gHbEQ4N_v_IUClB7G_J?usp=sharing
  Click on down arrow next to lect03 and click “Download” 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-2022/tree/master/lect03

Overview

This lab is intended to give you a basic understanding of how CSS flexbox works and its benefits vs using float in previous lab/assignments.

Sample

Requirements

1. Create a brand new HTML file named flexbox-nav.html (all lowercase, no spaces).
2. You may write CSS in either an internal or external stylesheet. No inline styles.
3. Create a <div> with four <a> inside. The links do not need to go anywhere at this point. Use # as a placeholder for href, like this: <a href="#">
4. Add some basic styling, such as:
   1. A background color on all the <a>
   2. Hover effect to change background color on all the<a>
   3. Add padding top/bottom on all the <a> to create some spacing on top/bottom.
   4. text-align: center to align all the text to the center
5. Using only flexbox properties (do not use floats!), style the navigation so that:
   1. Desktop (screen sizes 992px and above):
      1. All nav items are in one row.
      2. All nav items have the same width.
      3. Text is horizontally centered.
   2. Tablet (screen sizes 768px – 991px):
      1. Two nav items per row.
      2. Each nav item takes up half the width of the row.
   3. Mobile (screen sizes 0px – 767px):
      1. One nav item per row.
6. You do not need to use flex-growth, flex-shrink, and flex-basis properties (which we did not go over in lecture). Using width is enough to satisfy the lab requirements.

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 Lab3 files to: ITP303_Lab3_[usc username]
2. Compress this folder to a .zip file.
3. On Blackboard, go to Assignments -> Lab 3: Flexbox Nav and upload the .zip file here.
4. You will be able to make unlimited submissions. Only the last submission will be graded.

Overview

For this assignment, you will create a mobile-first, responsive fake company website (two pages) using the Bootstrap CSS framework. You must create the site using Bootstrap components and Bootstrap’s Grid framework with some customization as needed.

Requirements

Setup

1. Create two brand new HTML files.
   1. Name one home.htmland the other team.html
   2. Add in the required bootstrap meta tags and the bootstrap CSS file (either relative or absolute link).
2. Create one brand new CSS file.
   1. Write CSS in this file.
   2. Link this CSS file to both home.html and team.html.
3. Gather text and images for this assignment. Come up with a fake company name and some text that can describe the company’s product or services. Have fun with it — make up any company you ever wanted to create.
   1. Get free beautiful images at https://unsplash.com/ 
4. Your site needs to be built using the mobile-first approach (already built in with Bootstrap but any extra CSS you add must follow the mobile-first approach).
5. Most of the site can be built using what Bootstrap comes with, plus a few customizations. Refer to the Bootstrap documentation and hints listed below.
6. Check your HTML and CSS syntax. You will be deducted points for any syntax errors, tags not closed/not used, etc.

Homepage (home.html)

1. Navigation Bar
   1. Displays name of company and at least three links: Home, Team, and one other link.
   2. Clicking on the name of company goes to home.html. Clicking on “Home” goes to home.html. Clicking on “Team” goes to team.html. Third link does not need to go anywhere.
   3. “Home” link is a different color than other three links to indicate user is viewing the Home page.
   4. Nav bar must have a background color that is not the default color. You must overwrite the default background color that comes with Bootstrap.
   5. Hint: Refer to Bootstrap documentation on the Navbar component.
2. Header at the top includes:
   1. Background image
      1. Use CSS property background-image to include a background image on the header.
      2. You may use background-size: cover; to make the image look good across all screen sizes.
      3. Play around with background-position to position the background image if you’d like.
   2. Company name
   3. Company slogan
3. Below the header, a featured section that displays text and pictures that showcase at least two features of the company’s product or services.
   1. Each feature has some heading text, a paragraph, and an image.
   2. A line between each feature.
   3. Must use Bootstrap’s Grid system to create the rows and columns in this section (for all screen sizes).
      1. Hint: use .container, .row, and various .col classes (refer to Bootstrap documentation)
4. Footer on the bottom of the page.
5. Mobile Devices (0 – 767px):
   1. Single-column layout,
   2. Navbar collapses into a hamburger menu (refer to Bootstrap documentation on how to easily implement this).
   3. Featured section’s order from top to bottom must be Feature 1 heading, Feature 1 description, Feature 1 image, Feature 2 heading, Feature 2 description, and Feature 2 image.
   4. Some spacing around each feature (not edge to edge)
6. Tablet Devices(768px – 991px):
   1. Navbar expands to show all nav links.
   2. One feature per row.
      1. Alternate order of picture and text per row.
      2. Column that contains feature’s text must not be the same width as the column that contains the feature’s image.
   3. Leave whitespace around each feature (not edge to edge)
7. Desktop Devices (992px and above):
   1. Layout remains the same. Adjust as necessary.
8. For each device, adjust font sizes, images sizes, etc. as necessary.
9. All elements and content need to be readable.
10.  Feel free to play around with Bootstrap and get familiar with it. Bootstrap is extremely useful and is used widely in industry. You are welcome to add additional features, as long as all requirements above are satisfied.

Team (team.html)

1. Navigation Bar requirements the same as home.html. Navigation bar must look exactly the same in both home.html and team.html.
   1. “Team” link is a different color than other three links to indicate user is viewing the Team page.
2. Header remains the same, except the heading must read “Our Team” or similar.
3. Below the header, display at least three team members. Display each team member’s:
   1. Image
   2. Name
   3. Job title
   4. Short bio
   5. A colored “View more” button (that does not need to link anywhere)
4. Mobile Devices (0 – 767px):
   1. Navbar and header follow the same requirements as Home page.
   2. One team member per row.
5. Tablet Devices(768px – 991px):
   1. Navbar and header follow the same requirements as Home page.
   2. Three team members per row.
6. Desktop Devices (992px and above):
   1. Layout remains the same. Adjust as necessary.

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 A3 files to: ITP303_Assignment3_[usc username]
2. Compress this folder to a .zip file.
3. On Blackboard, go to Assignments -> Assignment 3: Bootstrap Company Site 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.

• Home (mobile)
• Home (mobile – nav open)
• Home (tablet)
• Home (desktop)
• Team (mobile)
• Team (tablet)
• Team (desktop)