CSCI 185: Spring 2024

Introduction to Programming for the Web

CSCI 185: Spring 2024

UNCA Logo

Fish by @akeatk

Final Exam (HTML + CSS)

Should I take this part of the exam?

  • If you are happy with your Quiz 1 score (check Moodle to see), you DO NOT need to take this part of the exam.
  • If you do want to replace your Quiz 1 score, download the starter files and follow the instructions below.

You are going to build the webpage pictured below:

Desktop

Tablet

Mobile

Part 1: Setup

Please download the starter files below (if you haven’t already):

Download Starter Files

Then, inside of the html-css-final-exam folder, create a brand new HTML file called index.html that is in the root of the html-css-final-exam folder. If you did it correctly, your file structure should look like this:

html-css-final-exam
├── images
│   ├── img1.jpg
│   ├── img2.jpg
│   ├── img3.jpg
│   ├── img4.jpg
│   ├── img5.jpg
│   ├── img6.jpg
│   ├── img7.jpg
│   ├── img8.jpg
│   └── img9.jpg
├── index.html      <-- Your new HTML file
└── pages
    ├── about.html
    └── contact.html

Edit index.html file by adding an HTML “skeleton” with the following tags:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    
</body>
</html>

Part 2: HTML Tasks (40 Points)

Edit the index.html pages as follows:

2.1. Metadata (2 Points)

  1. Add a title tag inside of the head tag, with the display text of “Final Exam”

2.2. Header Section (12 Points)

  1. Add a header tag inside the body tag (don’t get the head and the header tag confused).
  2. Inside the header tag, create an h1 tag that displays the text “Final Exam”
  3. Also inside the header tag and below the h1 tag, create a navigation section using the nav tag.
  4. Inside of the nav tag, create three hyperlinks:
    • One that links to contact.html (in the pages folder) with the display text of “Contact”. Use a relative path.
    • One that links to about.html with the display text of “About Us”. Also use a relative path.
    • One that links to Instagram’s home page, the display text of “Instagram”. Use an absolute path.

Note: you may NOT move the contact.html or about.html files outside of the pages folder.

2.3. Main Section (6 Points)

  1. Below the header tag, create a main tag.
  2. Inside the main tag, create two children:
    • An h2 tag with the text of “Photo Gallery”
    • A section that has a class of “photo-container”.

2.4. Photo Container (16 Points)

Inside of the “photo-container” section you will make 9 div tags.

...

Create a footer section below your main section using the footer tag. Within the footer, create a paragraph tag that says “Copyright Your Name, 2023.”

Part 3: CSS Tasks (56 Points)

Create a CSS file called styles.css that is a direct child of the html-css-final-exam folder. If you did it correctly, your file structure should look like this:

html-css-final-exam
├── images
│   ├── img1.jpg
│   ├── img2.jpg
│   ├── img3.jpg
│   ├── img4.jpg
│   ├── img5.jpg
│   ├── img6.jpg
│   ├── img7.jpg
│   ├── img8.jpg
│   └── img9.jpg
├── index.html
├── pages
│   ├── about.html
│   └── contact.html
└── styles.css          <-- Your new CSS file

Edit your index.html file by adding a link to your stylesheet. Then, complete the following tasks within styles.css:

3.1. Header & Nav Bar (16 Points)

  1. Create some style rules for the body element:
    • Set the background color to a light gray (#F0F4EF)
    • Set the font family to Arial, Helvetica, sans-serif
    • Set the margin to 0
  2. Create some style rules for the header element:
    • Set the background color to #222222
    • Set the height to 10vh
    • Set the left and right padding to 10vw
  3. Create some style rules for the h1 element (and any relevant child elements) to:
    • Set the font color to white
    • Set the font size to 1.2em
  4. Create some style rules for a elements inside the nav element:
    • Set the link color to white
    • Set the text decoration to none

3.2. Custom Font (8 Points)

Use the “Tangerine” Google font to style the h2 tag (see screenshot above).

3.3. Main (2 Points)

Set the left and right padding of the main tag to 10vw.

Create some style rules for the photo-container class that implement the following requirements:

  1. Use CSS Grid
  2. Define three evenly spaced columns
  3. Create a column gap and row gap of 30px.

3.5. Card Styling (10 Points)

Create some style rules for the card class that implement the following requirements:

  1. The background should be white
  2. The border should be solid and light gray
  3. The image contained inside the card should span the full width of its div container
  4. The caption should not be too close to the sides of the div

Create some style rules to set the footer’s background color to #222222, and the footer’s text color to white.

3.7 Responsive Design with Media Queries (8 Points)

  1. When the width of the screen is less than 1200px, the photo-container section should display two cards per row.
  2. When the width of the screen is less than 600px, the photo-container section should display one card per row.

Part 4: Accessibility Tasks (4 Points)

Run the WAVE extension and make sure there are no accessibility issues. Correct any issues that you find.

What to Submit

Please read carefully: Doublecheck your work to make sure you’ve completed all of the tasks. Then, update your homepage by adding a linking to the index.html page you just completed. After committing and syncing your changes to GitHub, paste a link to your homepage on GitHub pages into the Moodle.