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: