Objectives

• Learn about structural tags/elements in HTML5
• Gain familiarity with CSS3 Layout (Grid and Flexbox)
• Learn to use a variety of CSS properties
• Deploy the web page to static web hosting provider and setup for continuos deployment

Preparation

First of all, create a new directory for this assignmeent in your local computer. All the commands you type below shall be done while you are inside that directory.

This assignment requires you have the following

• NodeJS installed on your local computer. Verify your installation by typing

  node -v    # v14 or newer
  npm -v     # v8 or newer

• GitHub account and access to GitHub using SSH Key. Follow the tutorial here if have not done so.

• Vercel account to deploy your web page (or use your GitHub account to login to Vercel). To do that, you must first install Vercel CLI (Command-Line Interface) by running the following command

  npm install --global vercel

  To verify that you can run vercel locally. Login to Vercel using your GitHub account:

  vercel login

1. Create a new repository on GitHub. Follow the Quick setup instruction provided by GitHub to initialize the repo from your local computer via SSH. Look for the instructions that look similar to the following:

   

2. On your local computer create a new index.html file with a "Hello World" text in it.

3. Deploy your web page (in the current directory) to Vercel

   vercel login   # if you have not done so
   vercel deploy

   After a succesful deployment you will find two URLS: the Inspect URL (ending in vercel.com) and the Production URL (ending in vercel.app)

4. Visit the Production URL to confirm that you are able to see your page.

5. Login to your Vercel account and select the project just created. At the upper right corner click the "Connect Git Repo" button to link this instance of Vercel app to your GitHub repo. After this step is correctly done, any new commits to your GitHub will trigger a rebuild and redeployment by Vercel.

TIP

Throughout this document you will find relevant online reference at W3Schools for HTTP and CSS for a quick lookup for details on a particular topic. Use these links to obtain more details about proper technique for solving the tasks asked in this homework.

Build A Web Page

Use CSS Grid to arrange your page into the following areas:

• The width of Area 1 (also Area 3) should be 30% of the page width
• The width of Area 5 (also Area 6) should be 15% of the page width
• The height of Area 1, Area 2, and Area 8 should 100px
• The entire content should fill the available height of your browser canvas.

Area 1

Area 2

Area 3

Area 4

Area 5

Area 6

Area 7

Area 8

To start, put a heading with your name at the top of page. Then place a picture of yourself (it can be silly but again it would be nice to have something I can recognize) so that it appears on the right side of the page (use CSS float). Then have one or more paragraphs to the left of your picture that wrap around it. To show the text wrapping effect be sure to include sufficiently long text in your paragraph(s) and specify the image size so it's not too big/tall.

Structure and Contents

Area 1

Demonstrate use of <img> and its height attribute (so your photo fits into the 100 px height) to place your photo. Also the photo should be horizontally centered within this area.

Area 2

Demonstrate use of <h1>, <h2>, (or other heading tags) to show your (real name) and your fake phone-number. Include a small phone icon next to your phone number.

Area 4

Demonstrate use of <table>, <tr>, <td>, (and other related tags for creating a table) to show the list of classes you have taken in the past. Include a table header row that shows "Course Number", "Course Name", "Semester Taken". Following the header row, list your past courses.

• Explore the use of CSS pseudo clasess :nth-child(odd) and :nth-child(even) to alternate the background color of this table.
• Explore the use of CSS pseudo class :hover to change the background of the table row when the mouse hovers over it.

Area 5

Insert a picture of your choice that relates one of the classes in Area 4. Please the picture vertically and horizontally center in Area 5.

Area 6

Demonstrate use of <ul> (or <ol>) and <li> to create a list of two or more abbreviated real company names (3-4 letters each). Use <a> to make the name abbreviation into a link that will take users to the website of the said company.

Area 7

Insert several paragraphs of text (of your preference). Each paragraph should be long enough so the text will wrap around into three or more lines. Demonstrate use of <b>, <i>, and <code> throughout text in your paragraphs.

Area 8

Include five or more small icons that will take you to social media, online, online shopping, etc. Examples are: Twitter, Facebook, Instagram, GitHub, Pinterest, and many more. The icons should represent the identity of the company, i.e. use the bird logo for Twitter, etc.

Demonstrate use of Flex box to place these icons space evenly and vertically centered.

Area 3

Use this area as a "short report" that explains the details how you fullfil all the requirements in the other seven areas. Essentially, explain how you build this website.

Visual Styles

• Apply border/background color to each area so the content from one section is easily distinguishable from the others
• Demonstrate use of hex color string, rgb, and hsl when specifying your colors.

Grading

One of the main objectives of this assignment is to prepare students to be a good web developer, and not a web designer. Understanding the structure of an HTML document and the roles of CSS rules for controlling various visual properties are more imporant than the final aesthetic of the page. Therefore, the instructor expects you hand edit the webpage instead of creating it using some kind of webpage authoring software. If your page shows some trace of automatic generation by web authoring software, the instructor reserves the right to deduct some points.

DANGER

IMPORTANT: keep your files after it has been graded. It may be used again for a future assignment.

Deliverables

1. After hosting the page to a publicly accessible web server, please confirm everything works

2. Copy the Vercel Production URL and paste it to Bb submission link for this assignment.

   WARNING

   IMPORTANT: after completing the submission, go back to your Bb submission to make sure the URL to your homework is not broken. Common issues are: misspelling or incorrect paths.

Grading Rubrics

Feature	Point
Grid Layout setup	6
Hosting the web page on Vercel (or similar)	2
Host the source files on GitHub (or similar)	2
Area 1	2
Area 2	4
Area 3: report/documentation	10
Area 4: correct HTML tag structure for table	5
Area 4: use :nth-child and :hover	3
Area 5: picture alignment in	4
Area 6: correct list structure and live anchors	4
Area 7	5
Area 8: use of Flex box	4
Overall visual styles border/background/colors	4