Assignment 1: Interests Page

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)
• Getting Started with HTML (MDN) – this is the first article of a series of articles about HTML. Click “Next” on this article to continue reading.
• What is CSS? (MDN) – this is the first article of a series of articles about CSS. Click “Next” on this article to continue reading.

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. 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! Here is a sample of what it should look like: http://303.itpwebdev.com/~nayeon/student_page.html (screenshot is also below).

   

7. (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.